jQuery UI Widgets › Forums › TreeGrid › I’d like to get some opinions about: TreeGrid.
This topic contains 1 reply, has 2 voices, and was last updated by admin 1 week ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
Author
-
How to handle large datasets efficiently in jqxTreeGrid using virtual scrolling with jQuery?
Hi vitorio,
Ensure you have the jQWidgets library loaded.
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>Use the virtualModeCreateRecords function to load data on demand. However, this loads data on demand when you expand a node. Load of data on demand while you scroll is not supported, however the UI of the Tree Grid re-uses the DOM elements and the performance would be smooth with the following code block:
<!DOCTYPE html> <html lang="en"> <head> <title id="Description">In virtual mode, the Tree Grid is created on demand. In this case, Child records are created and initialized when the parent record is expanded.</title> <meta name="description" content="Data Loading on Demand - JavaScript Tree Grid Demo | jQWidgets"> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="../sampledata/generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { var generateTasks = function (rowsCount) { var rowsCount = !rowsCount ? 1 + Math.floor(Math.random() * 5) : rowsCount; var data = new Array(); var generatekey = function () { var S4 = function () { return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); }; return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4()); }; for (var i = 0; i < rowsCount; i++) { var row = {}; var tasks = ["Shopping", "Housewares", "Kitchen supplies", "Groceries", "Cleaning supplies", "Office supplies", "Remodeling", "Paint bedroom", "Paint wall", "Fitness", "Decorate living room", "Fix lights", "Fix front door", "Clean kitchen"]; var firstNames = [ "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene" ]; var lastNames = [ "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier" ]; row["id"] = generatekey(); row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)]; row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)]; row["name"] = row["firstname"] + " " + row["lastname"]; var taskindex = Math.floor(Math.random() * tasks.length); row["task"] = tasks[taskindex]; row["duration"] = 1 + Math.floor(Math.random() * 10); data.push(row); } return data; } // create Tree Grid $("#treegrid").jqxTreeGrid( { width: getWidth("TreeGrid"), pageable: true, altRows: true, virtualModeCreateRecords: function (expandedRecord, done) { // expandedRecord is equal to null when the function is initially called, because there is still no record to be expanded. // prepare the data var source = { dataType: "array", dataFields: [ { name: "id", type: "string" }, { name: "name", type: "string" }, { name: "duration", type: "number" }, { name: "task", type: "number" } ], localData: expandedRecord === null ? generateTasks(3000) : generateTasks(), id: 'id' } var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function () { done(dataAdapter.records); } }); dataAdapter.dataBind(); }, virtualModeRecordCreating: function (record) { if (record.level == 2) { // by setting the record's leaf member to true, you will define the record as a leaf node. record.leaf = true; } }, columns: [ { text: 'Task', dataField: "task", align: 'center', width: 300 }, { text: 'Person Name', dataField: "name", cellsAlign: 'center', align: 'center', width: 300 }, { text: 'Duration', aggregates: ['sum'], dataField: "duration", cellsAlign: 'center', align: 'center', cellsRenderer: function (row, column, value) { var hour = value > 1 ? " hours" : " hour"; return value + hour; } } ] }); }); </script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head> <body class='default'> <div id="treegrid"> </div> </body> </html>Best regards,
Peter -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.