SMART datagrid is the way to display part of Data Set being connected to Grid, and it implements the paging function of common Web application at the client level. Of course, it should be enabled to implement the server logic which can respond to the operating mode. The implementation from grid can be a little different according to the time or actual amount of loading data. TreeView does not support paging now.
It does not have to match the total page number being set in the paging and the row number being determined by the page number and page size with the actual data set. In addition, it is the same to the rows being displayed in each page. In other words, it means grid paging only displays a certain number of data rows in the current logical page which has been specified in the paging settings. Except the rows being displayed in the current page, it does not store the row list of each different page separately. Of course, it commonly implements by aligning with the state of actual data set.
Display the loaded data in the data set from the specified location with each specified page size.
First, specify the size of one page and page number by GridView.setPaging. If do not specify pageCount or specify with a value less than 0, it will automatically calculate the total page number according to the number of data rows which will be displayed in the grid and the page size specified by setPaging or pageSize. Later, it will display the corresponding data rows for the page location in the grid each time you change pageIndex.
If you can predict the total row number or page number but do not have to load the total data in advance, you can use this way to implement. If you can know the row number, you can specify rowCount of data set to automatically calculate the page number, or you should call setPaging or setPageCount when necessary to specify the expected total page number. It is because you cannot specify pageIndex with a greater value than the specified page number.
When change pageIndex, or it has yet loaded the data corresponding to the page location in the data set within onPageIndexChanged event, you should load the data rows of the corresponding location from the server again and fill them in the data set. If the data already exists in the client, you can use GridDataSet.updateRows, etc.
You can check whether the data of a specific row has been loaded through DataSet.hasData method.
$('#incPage').click(function () {
var oldPage = grid.pagIndex();
var newPage = oldPage + 1;
grid.setPageIndex(newPage);
if (newPage != oldPage) {
var row = grid.getRow(newPage * grid.pageSize());
if (row && !dataset.hasData(row.dataIndex()) {
// Load the data.
$.ajax({
url: "/data/path/orders.csv",
dataType: 'text',
success: function (data) {
DataLudi.loadCsvData(dataset, data, {
count: pageSize,
fillMode: 'update',
fillPos: pageIndex * pageSize
});
}
};
// If the data already exists,
dataset.updateRows(pageIndex * pageSize, rows, 0, pageSize);
}
}
});
You do not have to exactly match the data set and page location so as to implement grid paging. For example, you can also store the data of only one page size in the data set, and newly load the data every time the page location is changed. And, you can also display specific rows according to the page location.
First, in order to implement paging in this way, you should specify pageCount first as above. And then, you can use pageOffset or setPageAndOffset to specify the row location which will be displayed in the current page differently from the row location of a normal page.
$('#incpage').click(function (ev) {
// Always display from the first row.
var newPage = grid.pageIndex() + 1;
var size = grid.pageSize();
grid.setPageOffset(-newPage * size);
grid.setPageIndex(newPage);
// Reload the data of the page location.
loadData(newPage * size);
});
You can also explicitly specify the data rows which will be displayed in the current page. In other words, you can call pageRows or setPageAndRows to display specific rows instead of the data rows being determined automatically according to the paging settings. You can specify the page location, or call within onPageIndexChanged event.
grid.onPageIndexChanged = function (grid, oldPage, newPage) {
grid.setPageRows([0, 1, 2, 3, 4, 5]);
});
The grid basically runs sorting and filtering based on the rows being displayed in the current page. However, if specify pageSorting and pageFiltering of GridBase.operateOptions as false respectively, it will run sorting and filtering with targeting the entire rows.
If run sorting or filtering based on the entire rows, it may be complicated to implement lazy loading or specifying the location as described above.