I have a TreeGrid (from version "'8.1/ProDeployment' and additional modules from 'v8.3p_2013-04-16/ProDeployment'", javascript below) that is currently straining under 6000 items, and ideally needs to be able to handle hundreds of thousands. When not filtered, it fetches the root of the tree and its immediate children on startup and the children of the selected record when the plus sign is clicked, and the results are paged such that any node with more than pageSize child records retrieves them in multiple fetches, on demand. This part works fine.
The issue appears when the filter is used. The filter takes advantage of progressive loading, so the results are returned in several seconds, rather than the several minutes required before. However, this has had two (apparently related) side effects, which are problematic.
First, when the filter criteria is submitted, the grid submits fetch requests for the first page of results, then subsequently requests the next set and the next, with no input from the user, eventually retrieving the entire result set of 5000+ records. This is exactly what I was hoping to avoid by employing paging. Given this, I must ask, is there a way to more efficiently handle the filtered results? Is there any way to avoid loading all of the results on the client browser?
Second, while the filtered results are loading, they do not respond to clicks in a timely manner. As the grid is laid out, each record displayed is a summary, clicking the record fetches and displays the details in a form off to the side. This happens very slowly while the filtered records are loading, usually only succeeding after all or nearly all of the results have finished loading. This seems to be a side effect of the first issue, but again I must ask if anyone knows how I might avoid this?
Thank you for your assistance, please let me know if I have omitted any necessary information.
The issue appears when the filter is used. The filter takes advantage of progressive loading, so the results are returned in several seconds, rather than the several minutes required before. However, this has had two (apparently related) side effects, which are problematic.
First, when the filter criteria is submitted, the grid submits fetch requests for the first page of results, then subsequently requests the next set and the next, with no input from the user, eventually retrieving the entire result set of 5000+ records. This is exactly what I was hoping to avoid by employing paging. Given this, I must ask, is there a way to more efficiently handle the filtered results? Is there any way to avoid loading all of the results on the client browser?
Second, while the filtered results are loading, they do not respond to clicks in a timely manner. As the grid is laid out, each record displayed is a summary, clicking the record fetches and displays the details in a form off to the side. This happens very slowly while the filtered records are loading, usually only succeeding after all or nearly all of the results have finished loading. This seems to be a side effect of the first issue, but again I must ask if anyone knows how I might avoid this?
Thank you for your assistance, please let me know if I have omitted any necessary information.
Code:
var zoneTreeGrid = isc.TreeGrid.create({
ID: "zoneTreeView",
width: "65%",
height: "100%",
dataSource: "customDS_zone_tree",
dataFetchMode: "paged",
progressiveLoading: true,
showFilterEditor: true,
filterOnKeypress: true,
keepParentsOnFilter: true,
autoFetchData: true,
autoFetchAsFilter: true,
selectionType: "single",
showHoverComponents: true,
alternateRecordStyles: true,
loadDataOnDemand: true,
showResizeBar: true,
fixedRecordHeights: false,
fields: fieldsForZoneTreeGrid,
dataProperties: {
defaultIsFolder: true,
modelType: "parent",
idField: "zone_id",
openPropery: "isOpen",
parentIdField: "parent_zone_id"
},
filterEditorSubmit: function(criteria) {
if (Object.keys(criteria).length !== 0) {
if (zoneList.getOpenState)
zoneListOpenState = zoneList.getOpenState();
filterActive = true;
if (criteria.listGridFilter)
delete criteria.listGridFilter;
zoneFilterCriteria = criteria;
} else {
filterActive = false;
zoneFilterCriteria = {};
}
;
return true;
},
dataArrived: function(startRow, endRow) {
if (!filterActive) {
if (zoneListOpenState && zoneList.setOpenState) {
zoneList.setOpenState(zoneListOpenState);
}
if (zoneListSelectedState) {
zoneList.setSelectedState(zoneListSelectedState);
}
} else if (zoneList.data.openAll) { //true by default
zoneList.data.openAll();
}
if (currentZoneId > 0) {
record = zoneList.data.find({zone_id: currentZoneId});
if (!filterActive && zoneList.data.openFolders) {
var parentNodes = zoneList.data.getParents(record);
zoneList.data.openFolders(parentNodes);
}
if (record) {
zoneList.selectSingleRecord(record);
zoneList.scrollToRow(zoneListView.data.indexOf(record));
}
}
rightPane.setHeight(FRList.getHeight() + 2);
},
recordClick: function(viewer, record, recordNum, field, fieldNum, value, rawValue) {
//Displays zone details on form off to the side
}
});