@@ -43,7 +43,7 @@
DataView requires a collection of items as its value and one or more templates depending on the layout mode e.g. list and grid. Throughout the samples, a car interface having vin, brand, year and color properties are used to define an object to be displayed by the dataview. Cars are loaded by a CarService that connects to a server to fetch the cars.
Layouts
-DataView has two layout modes; "list" and "grid" where a separate template is used to render an item in each mode. In list mode name of the template is "listItem" whereas - in grid mode it is "gridItem".
+DataView has two layout modes; list and grid where a separate template is used to render an item in each mode. In list mode name of the template is "list" whereas + in grid mode it is "grid".
Note that there is no restriction to use both layouts at the same time, you may configure only one layout using the layout property with the corresponding template.
Sections
-Header and Footer are the two sections that are capable of displaying custom content.
+Header and Footer are the two templates that are capable of displaying custom content.
DataViewLayoutOptions
@@ -75,19 +78,26 @@ mounted() { to display a buttonset to choose the layout mode in DataView. Location of the DataViewLayoutOptions should be inside the DataView component. If you prefer a different UI element you can create your own that updates the layout property of the DataView. -Paginator
Pagination is enabled by setting paginator property to true, rows attribute defines the number of rows per page and pageLinks specify the the number - of page links to display. To customize the left and right side of the paginators, use "paginatorLeft" and "paginatorRight" templates.
+ of page links to display. To customize the left and right side of the paginators, use paginatorLeft and paginatorRight templates.Sorting
-sortField and sortOrder properties are available for sorting functionality, for flexibility there is no built-in UI available so that a custom UI can be used for the sorting element. +
sortField and sortOrder properties are available for the sorting functionality, for flexibility there is no built-in UI available so that a custom UI can be used for the sorting element. Here is an example that uses a dropdown where simply updating the sortField-sortOrder bindings of the DataView initiates sorting.
Properties of DataViewLayoutOptions
-
-
-
-
-
+| Name | -Type | -Default | -Description | -
|---|---|---|---|
| layout | -string | -list | -Layout of the items, valid values are "list" and "grid". | -
Events of DataViewLayoutOptions
-
-
-
-
-
+ if (value.indexOf('!') === 0) {
+ this.sortOrder = -1;
+ this.sortField = value.substring(1, value.length);
+ this.sortKey = sortValue;
+ }
+ else {
+ this.sortOrder = 1;
+ this.sortField = value;
+ this.sortKey = sortValue;
+ }
+ }
+ }
+}
+
+| Name | -Parameters | -Description | -
|---|---|---|
| change | -event.originalEvent: browser event - event.value = layout mode e.g. "list" or "grid" - |
- Callback to invoke when layout mode is changed. | -
Properties
| Name | -Type | -Default | -Description | -
|---|---|---|---|
| Name | +Type | +Default | +Description | +
| value | -array | -null | -An array of objects to display. | -
| layout | -string | -list | -Layout of the items, valid values are "list" and "grid". | -
| rows | -number | -null | -Number of rows to display per page. | -
| first | -number | -0 | -Index of the first record to render. | -
| totalRecords | -number | -null | -Number of total records, defaults to length of value when not defined. | -
| paginator | -boolean | -false | -When specified as true, enables the pagination. | -
| paginatorPosition | -string | -bottom | -Position of the paginator, options are "top","bottom" or "both". | -
| alwaysShowPaginator | -boolean | -true | -Whether to show it even there is only one page. | -
| paginatorTemplate | -string | -FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown | -Template of the paginator. | -
| pageLinkSize | -number | -5 | -Number of page links to display. | -
| rowsPerPageOptions | -array | -null | -Array of integer values to display inside rows per page dropdown. | -
| currentPageReportTemplate | -string | -({currentPage} of {totalPages}) | -Template of the current page report element. | -
| emptyMessage | -string | -No records found. | -Text to display when there is no data. | -
| sortField | -string | -null | -Name of the field to sort data by default. | -
| sortOrder | -number | -null | -Order to sort the data by default. | -
| lazy | -boolean | -false | -Defines if data is loaded and interacted with in lazy manner. | -
| value | +array | +null | +An array of objects to display. | +
| layout | +string | +list | +Layout of the items, valid values are "list" and "grid". | +
| rows | +number | +0 | +Number of rows to display per page. | +
| first | +number | +0 | +Index of the first record to render. | +
| totalRecords | +number | +null | +Number of total records, defaults to length of value when not defined. | +
| paginator | +boolean | +false | +When specified as true, enables the pagination. | +
| paginatorPosition | +string | +bottom | +Position of the paginator, options are "top","bottom" or "both". | +
| alwaysShowPaginator | +boolean | +true | +Whether to show it even there is only one page. | +
| paginatorTemplate | +string | +FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown | +Template of the paginator. | +
| pageLinkSize | +number | +5 | +Number of page links to display. | +
| rowsPerPageOptions | +array | +null | +Array of integer values to display inside rows per page dropdown. | +
| currentPageReportTemplate | +string | +({currentPage} of {totalPages}) | +Template of the current page report element. | +
| emptyMessage | +string | +No records found. | +Text to display when there is no data. | +
| sortField | +string | +null | +Name of the field to sort data by default. | +
| sortOrder | +number | +null | +Order to sort the data by default. | +
| lazy | +boolean | +false | +Defines if data is loaded and interacted with in lazy manner. | +
Events
+
+
+
+
+
+
| Name | +Parameters | +Description | +
|---|---|---|
| page | +event.page: New page number + event.first: Index of first record + event.rows: Number of rows to display in new page + event.pageCount: Total number of pages + |
+ Callback to invoke when page changes, the event object contains information about the new state. | +
Styling
Following is the list of structural style classes, for theming classes visit
| Name | -Element | -
|---|---|
| Name | +Element | +
| p-dataview | -Container element. | -
| p-dataview-list | -Container element in list layout. | -
| p-dataview-grid | -Container element in grid layout. | -
| p-dataview-header | -Header section. | -
| p-dataview-footer | -Footer section. | -
| p-dataview-content | -Container of items. | -
| p-dataview | +Container element. | +
| p-dataview-list | +Container element in list layout. | +
| p-dataview-grid | +Container element in grid layout. | +
| p-dataview-header | +Header section. | +
| p-dataview-footer | +Footer section. | +
| p-dataview-content | +Container of items. | +