DevExtreme jQuery/JS - Categorize Data for Views
IMPORTANT: The Pivot widget is deprecated since v18.1. We recommend using the TabPanel widget instead.
Because as a rule, the Pivot presents categorized lists, you need to form them in code. For example, assume that you have the following array named contacts.
JavaScript
var contacts = [
{ name: "Barbara J. Coggins", phone: "512-964-2757", email: "barbarajsoggins@rhyta.com", category: "Family" },
{ name: "Carol M. Das", phone: "360-684-1334", email: "carolmdas@jourrapide.com", category: "Friends" },
{ name: "Janet R. Skinner", phone: "520-573-7903", email: "janetrskinner@jourrapide.com", category: "Work" },
// . . .
];The contacts array will be used as a data source for all views, but depending on the view, different filters will be applied to it.
JavaScript
$(function() {
$("#pivotContainer").dxPivot({
items: [{
title: "All",
listData: new DevExpress.data.DataSource({
store: contacts, sort: "name"
})
}, {
title: "Family",
listData: new DevExpress.data.DataSource({
store: contacts, sort: "name", filter: ["category", "=", "Family"]
})
},
// . . .
],
height: "auto",
itemTemplate: function (itemData, itemIndex, itemElement) {
$("<div>").dxList({
dataSource: itemData.listData,
itemTemplate: function (itemData, itemIndex, itemElement) {
itemElement.append(
$("<div />").text(itemData.name);
$("<div />").text(itemData.phone);
$("<div />").text(itemData.email);
)
}
}).appendTo(itemElement);
}
});
});Note that the Pivot in this example employs DevExtreme's own DataSource object to filter data. To learn more about this and other data-processing capabilities of this object, see the Data Layer article.
See Also
Select one or more answers