Your search did not match any results.
Pivot

Overview

API Reference
The dxPivot widget includes items placed horizontally next to one another and navigated by flicking or panning to the left or right, or by choosing the desired pivot header.
Copy to Codepen
Apply
Reset
$(function(){ var pivotData = [ { 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"] }) }, { title: "Friends", listData: new DevExpress.data.DataSource({ store: contacts, sort: "name", filter: ["category", "=", "Friends"] }) }, { title: "Work", listData: new DevExpress.data.DataSource({ store: contacts, sort: "name", filter: ["category", "=", "Work"] }) } ]; $("#pivot").dxPivot({ dataSource: pivotData, itemTemplate: function(itemData, itemIndex, itemElement) { $("<div/>").dxList({ dataSource: itemData.listData, itemTemplate: function(itemData, itemIndex, itemElement) { $imageContainer = $("<div />").addClass("image-container"); $("<img />").attr("src", itemData.image).appendTo($imageContainer); $infoContainer = $("<div />").addClass("info"); $infoContainer.append( $("<div />").text(itemData.name), $("<div />").text(itemData.phone), $("<div />").text(itemData.email) ); itemElement.append($imageContainer, $infoContainer); } }).appendTo(itemElement); }, onItemClick: function (e) { DevExpress.ui.dialog.alert("The current section: " + e.itemData.title, "Click Handler"); }, }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.light.css" /> <link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.android5.light.css" /> <link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.ios7.default.css" /> <link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.win10.black.css" /> <link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.win10.white.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.4/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type ="text/css" href ="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div class="pivot-container"> <div id="pivot"></div> </div> </div> </body> </html>
.info { margin-top: 5px; height: 78px; } .image-container { width: 65px; float: left; margin-right: 20px; } .image-container img { display: block; width: 100%; } .pivot-container { height: auto; position: absolute; top: 0; bottom: 0; width:100%; }
var contacts = [ { name: "Barbara J. Coggins", phone: "512-964-2757", image: "../../../../images/employees/04.png", email: "BarbaraJCoggins@rhyta.com", category: "Family" }, { name: "Leslie S. Alcantara", phone: "360-684-1334",image: "../../../../images/employees/01.png", email: "LeslieSAlcantara@teleworm.us", category: "Friends" }, { name: "Chad S. Miles", phone: "520-573-7903",image: "../../../../images/employees/02.png", email: "ChadSMiles@rhyta.com", category: "Work" }, { name: "Michael A. Blevins", phone: "530-480-1961",image: "../../../../images/employees/03.png", email: "MichaelABlevins@armyspy.com", category: "Work" }, { name: "Jane K. Hernandez", phone: "404-781-0805",image: "../../../../images/employees/05.png", email: "JaneKHernandez@teleworm.us", category: "Friends" }, { name: "Kim D. Thomas", phone: "603-583-9043",image: "../../../../images/employees/06.png", email: "KimDThomas@teleworm.us", category: "Work" }, { name: "Donald L. Jordan", phone: "772-766-2842",image: "../../../../images/employees/07.png", email: "DonaldLJordan@dayrep.com", category: "Family" }, { name: "Nicole A. Rios", phone: "213-812-8400",image: "../../../../images/employees/09.png", email: "NicoleARios@armyspy.com", category: "Friends" }, { name: "Barbara M. Roberts", phone: "614-365-7945",image: "../../../../images/employees/08.png", email: "BarbaraMRoberts@armyspy.com", category: "Friends" } ];