State Persistence
Documentation
Sort and filter data, group, reorder and resize columns, change page numbers and page size. Once you are done, refresh the web page to see that the grid’s state is automatically persisted to continue working from where you stopped.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
$scope.gridOptions = {
dataSource: orders,
keyExpr: "ID",
allowColumnReordering: true,
allowColumnResizing: true,
showBorders: true,
selection: {
mode: "single"
},
filterRow: {
visible: true
},
groupPanel: {
visible: true
},
stateStoring: {
enabled: true,
type: "localStorage",
storageKey: "storage"
},
pager: {
showPageSizeSelector: true,
allowedPageSizes: [5, 10, 20]
},
columns: [{
dataField: "OrderNumber",
width: 130,
caption: "Invoice Number"
}, {
dataField: "OrderDate",
dataType: "date",
sortOrder: "desc"
}, {
dataField: "SaleAmount",
alignment: "right",
format: "currency"
},
"Employee", {
caption: "City",
dataField: "CustomerStoreCity"
}, {
caption: "State",
dataField: "CustomerStoreState",
groupIndex: 0
}]
};
});
<!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="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.3/css/dx.common.css" />
<link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/19.1.3/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C\/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/19.1.3/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" ng-app="DemoApp" ng-controller="DemoController">
<div id="descContainer">Sort and filter data, group, reorder and resize columns, change page numbers and page size. Once you are done, <a onclick="window.location.reload()">refresh</a> the web page to see that the grid’s state is automatically persisted to continue working from where you stopped.</div>
<div id="gridContainer" dx-data-grid="gridOptions"> </div>
</div>
</body>
</html>
#gridContainer {
height: 440px;
margin-top: 30px;
}
#descContainer a {
color: #f05b41;
text-decoration: underline;
cursor: pointer;
}
#descContainer a:hover {
text-decoration: none;
}
var orders = [{
"ID" : 1,
"OrderNumber" : 35703,
"OrderDate" : new Date(2014, 3, 10),
"SaleAmount" : 11800,
"Terms" : "15 Days",
"TotalAmount" : 12175,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "Los Angeles",
"Employee" : "Harv Mudd"
}, {
"ID" : 4,
"OrderNumber" : 35711,
"OrderDate" : new Date(2014, 0, 12),
"SaleAmount" : 16050,
"Terms" : "15 Days",
"TotalAmount" : 16550,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "San Jose",
"Employee" : "Jim Packard"
}, {
"ID" : 5,
"OrderNumber" : 35714,
"OrderDate" : new Date(2014, 0, 22),
"SaleAmount" : 14750,
"Terms" : "15 Days",
"TotalAmount" : 15250,
"CustomerStoreState" : "Nevada",
"CustomerStoreCity" : "Las Vegas",
"Employee" : "Harv Mudd"
}, {
"ID" : 7,
"OrderNumber" : 35983,
"OrderDate" : new Date(2014, 1, 7),
"SaleAmount" : 3725,
"Terms" : "15 Days",
"TotalAmount" : 3850,
"CustomerStoreState" : "Colorado",
"CustomerStoreCity" : "Denver",
"Employee" : "Todd Hoffman"
}, {
"ID" : 9,
"OrderNumber" : 36987,
"OrderDate" : new Date(2014, 2, 11),
"SaleAmount" : 14200,
"Terms" : "15 Days",
"TotalAmount" : 14800,
"CustomerStoreState" : "Utah",
"CustomerStoreCity" : "Salt Lake City",
"Employee" : "Clark Morgan"
}, {
"ID" : 11,
"OrderNumber" : 38466,
"OrderDate" : new Date(2014, 2, 1),
"SaleAmount" : 7800,
"Terms" : "15 Days",
"TotalAmount" : 8200,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "Los Angeles",
"Employee" : "Harv Mudd"
}, {
"ID" : 14,
"OrderNumber" : 39420,
"OrderDate" : new Date(2014, 1, 15),
"SaleAmount" : 20500,
"Terms" : "15 Days",
"TotalAmount" : 9100,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "San Jose",
"Employee" : "Jim Packard"
}, {
"ID" : 15,
"OrderNumber" : 39874,
"OrderDate" : new Date(2014, 1, 4),
"SaleAmount" : 9050,
"Terms" : "30 Days",
"TotalAmount" : 19100,
"CustomerStoreState" : "Nevada",
"CustomerStoreCity" : "Las Vegas",
"Employee" : "Harv Mudd"
}, {
"ID" : 18,
"OrderNumber" : 42847,
"OrderDate" : new Date(2014, 1, 15),
"SaleAmount" : 20400,
"Terms" : "30 Days",
"TotalAmount" : 20800,
"CustomerStoreState" : "Wyoming",
"CustomerStoreCity" : "Casper",
"Employee" : "Todd Hoffman"
}, {
"ID" : 19,
"OrderNumber" : 43982,
"OrderDate" : new Date(2014, 4, 29),
"SaleAmount" : 6050,
"Terms" : "30 Days",
"TotalAmount" : 6250,
"CustomerStoreState" : "Utah",
"CustomerStoreCity" : "Salt Lake City",
"Employee" : "Clark Morgan"
}, {
"ID" : 29,
"OrderNumber" : 56272,
"OrderDate" : new Date(2014, 1, 6),
"SaleAmount" : 15850,
"Terms" : "30 Days",
"TotalAmount" : 16350,
"CustomerStoreState" : "Utah",
"CustomerStoreCity" : "Salt Lake City",
"Employee" : "Clark Morgan"
}, {
"ID" : 30,
"OrderNumber" : 57429,
"OrderDate" : new Date(2013, 11, 31),
"SaleAmount" : 11050,
"Terms" : "30 Days",
"TotalAmount" : 11400,
"CustomerStoreState" : "Arizona",
"CustomerStoreCity" : "Phoenix",
"Employee" : "Clark Morgan"
}, {
"ID" : 32,
"OrderNumber" : 58292,
"OrderDate" : new Date(2014, 4, 13),
"SaleAmount" : 13500,
"Terms" : "15 Days",
"TotalAmount" : 13800,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "Los Angeles",
"Employee" : "Harv Mudd"
}, {
"ID" : 36,
"OrderNumber" : 62427,
"OrderDate" : new Date(2014, 0, 27),
"SaleAmount" : 23500,
"Terms" : "15 Days",
"TotalAmount" : 24000,
"CustomerStoreState" : "Nevada",
"CustomerStoreCity" : "Las Vegas",
"Employee" : "Harv Mudd"
}, {
"ID" : 39,
"OrderNumber" : 65977,
"OrderDate" : new Date(2014, 1, 5),
"SaleAmount" : 2550,
"Terms" : "15 Days",
"TotalAmount" : 2625,
"CustomerStoreState" : "Wyoming",
"CustomerStoreCity" : "Casper",
"Employee" : "Todd Hoffman"
}, {
"ID" : 40,
"OrderNumber" : 66947,
"OrderDate" : new Date(2014, 2, 23),
"SaleAmount" : 3500,
"Terms" : "15 Days",
"TotalAmount" : 3600,
"CustomerStoreState" : "Utah",
"CustomerStoreCity" : "Salt Lake City",
"Employee" : "Clark Morgan"
}, {
"ID" : 42,
"OrderNumber" : 68428,
"OrderDate" : new Date(2014, 3, 10),
"SaleAmount" : 10500,
"Terms" : "15 Days",
"TotalAmount" : 10900,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "Los Angeles",
"Employee" : "Harv Mudd"
}, {
"ID" : 43,
"OrderNumber" : 69477,
"OrderDate" : new Date(2014, 2, 9),
"SaleAmount" : 14200,
"Terms" : "15 Days",
"TotalAmount" : 14500,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "Anaheim",
"Employee" : "Harv Mudd"
}, {
"ID" : 46,
"OrderNumber" : 72947,
"OrderDate" : new Date(2014, 0, 14),
"SaleAmount" : 13350,
"Terms" : "30 Days",
"TotalAmount" : 13650,
"CustomerStoreState" : "Nevada",
"CustomerStoreCity" : "Las Vegas",
"Employee" : "Harv Mudd"
}, {
"ID" : 47,
"OrderNumber" : 73088,
"OrderDate" : new Date(2014, 2, 25),
"SaleAmount" : 8600,
"Terms" : "30 Days",
"TotalAmount" : 8850,
"CustomerStoreState" : "Nevada",
"CustomerStoreCity" : "Reno",
"Employee" : "Clark Morgan"
}, {
"ID" : 50,
"OrderNumber" : 76927,
"OrderDate" : new Date(2014, 3, 27),
"SaleAmount" : 9800,
"Terms" : "30 Days",
"TotalAmount" : 10050,
"CustomerStoreState" : "Utah",
"CustomerStoreCity" : "Salt Lake City",
"Employee" : "Clark Morgan"
}, {
"ID" : 51,
"OrderNumber" : 77297,
"OrderDate" : new Date(2014, 3, 30),
"SaleAmount" : 10850,
"Terms" : "30 Days",
"TotalAmount" : 11100,
"CustomerStoreState" : "Arizona",
"CustomerStoreCity" : "Phoenix",
"Employee" : "Clark Morgan"
}, {
"ID" : 56,
"OrderNumber" : 84744,
"OrderDate" : new Date(2014, 1, 10),
"SaleAmount" : 4650,
"Terms" : "30 Days",
"TotalAmount" : 4750,
"CustomerStoreState" : "Nevada",
"CustomerStoreCity" : "Las Vegas",
"Employee" : "Harv Mudd"
}, {
"ID" : 57,
"OrderNumber" : 85028,
"OrderDate" : new Date(2014, 4, 17),
"SaleAmount" : 2575,
"Terms" : "30 Days",
"TotalAmount" : 2625,
"CustomerStoreState" : "Nevada",
"CustomerStoreCity" : "Reno",
"Employee" : "Clark Morgan"
}, {
"ID" : 59,
"OrderNumber" : 87297,
"OrderDate" : new Date(2014, 3, 21),
"SaleAmount" : 14200,
"Terms" : "30 Days",
"TotalAmount" : 0,
"CustomerStoreState" : "Wyoming",
"CustomerStoreCity" : "Casper",
"Employee" : "Todd Hoffman"
}, {
"ID" : 60,
"OrderNumber" : 88027,
"OrderDate" : new Date(2014, 1, 14),
"SaleAmount" : 13650,
"Terms" : "30 Days",
"TotalAmount" : 14050,
"CustomerStoreState" : "Utah",
"CustomerStoreCity" : "Salt Lake City",
"Employee" : "Clark Morgan"
}, {
"ID" : 65,
"OrderNumber" : 94726,
"OrderDate" : new Date(2014, 4, 22),
"SaleAmount" : 20500,
"Terms" : "15 Days",
"TotalAmount" : 20800,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "San Jose",
"Employee" : "Jim Packard"
}, {
"ID" : 66,
"OrderNumber" : 95266,
"OrderDate" : new Date(2014, 2, 10),
"SaleAmount" : 9050,
"Terms" : "15 Days",
"TotalAmount" : 9250,
"CustomerStoreState" : "Nevada",
"CustomerStoreCity" : "Las Vegas",
"Employee" : "Harv Mudd"
}, {
"ID" : 69,
"OrderNumber" : 98477,
"OrderDate" : new Date(2014, 0, 1),
"SaleAmount" : 23500,
"Terms" : "15 Days",
"TotalAmount" : 23800,
"CustomerStoreState" : "Wyoming",
"CustomerStoreCity" : "Casper",
"Employee" : "Todd Hoffman"
}, {
"ID" : 70,
"OrderNumber" : 99247,
"OrderDate" : new Date(2014, 1, 8),
"SaleAmount" : 2100,
"Terms" : "15 Days",
"TotalAmount" : 2150,
"CustomerStoreState" : "Utah",
"CustomerStoreCity" : "Salt Lake City",
"Employee" : "Clark Morgan"
}, {
"ID" : 78,
"OrderNumber" : 174884,
"OrderDate" : new Date(2014, 3, 10),
"SaleAmount" : 7200,
"Terms" : "30 Days",
"TotalAmount" : 7350,
"CustomerStoreState" : "Colorado",
"CustomerStoreCity" : "Denver",
"Employee" : "Todd Hoffman"
}, {
"ID" : 81,
"OrderNumber" : 188877,
"OrderDate" : new Date(2014, 1, 11),
"SaleAmount" : 8750,
"Terms" : "30 Days",
"TotalAmount" : 8900,
"CustomerStoreState" : "Arizona",
"CustomerStoreCity" : "Phoenix",
"Employee" : "Clark Morgan"
}, {
"ID" : 82,
"OrderNumber" : 191883,
"OrderDate" : new Date(2014, 1, 5),
"SaleAmount" : 9900,
"Terms" : "30 Days",
"TotalAmount" : 10150,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "Los Angeles",
"Employee" : "Harv Mudd"
}, {
"ID" : 83,
"OrderNumber" : 192474,
"OrderDate" : new Date(2014, 0, 21),
"SaleAmount" : 12800,
"Terms" : "30 Days",
"TotalAmount" : 13100,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "Anaheim",
"Employee" : "Harv Mudd"
}, {
"ID" : 84,
"OrderNumber" : 193847,
"OrderDate" : new Date(2014, 2, 21),
"SaleAmount" : 14100,
"Terms" : "30 Days",
"TotalAmount" : 14350,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "San Diego",
"Employee" : "Harv Mudd"
}, {
"ID" : 85,
"OrderNumber" : 194877,
"OrderDate" : new Date(2014, 2, 6),
"SaleAmount" : 4750,
"Terms" : "30 Days",
"TotalAmount" : 4950,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "San Jose",
"Employee" : "Jim Packard"
}, {
"ID" : 86,
"OrderNumber" : 195746,
"OrderDate" : new Date(2014, 4, 26),
"SaleAmount" : 9050,
"Terms" : "30 Days",
"TotalAmount" : 9250,
"CustomerStoreState" : "Nevada",
"CustomerStoreCity" : "Las Vegas",
"Employee" : "Harv Mudd"
}, {
"ID" : 87,
"OrderNumber" : 197474,
"OrderDate" : new Date(2014, 2, 2),
"SaleAmount" : 6400,
"Terms" : "30 Days",
"TotalAmount" : 6600,
"CustomerStoreState" : "Nevada",
"CustomerStoreCity" : "Reno",
"Employee" : "Clark Morgan"
}, {
"ID" : 88,
"OrderNumber" : 198746,
"OrderDate" : new Date(2014, 4, 9),
"SaleAmount" : 15700,
"Terms" : "30 Days",
"TotalAmount" : 16050,
"CustomerStoreState" : "Colorado",
"CustomerStoreCity" : "Denver",
"Employee" : "Todd Hoffman"
}, {
"ID" : 91,
"OrderNumber" : 214222,
"OrderDate" : new Date(2014, 1, 8),
"SaleAmount" : 11050,
"Terms" : "30 Days",
"TotalAmount" : 11250,
"CustomerStoreState" : "Arizona",
"CustomerStoreCity" : "Phoenix",
"Employee" : "Clark Morgan"
}];