JQXTree is loading slow with 500 records

Question

**JQXTree ** is loading slow with 500 records. Below is my code snipset.

It is taking around 3-4 seconds to load 500 records which is very slow as it is hampering my performance. Is there any alternative approach we can follow to reduce the binding time.

var source = {
        datatype: "json",
        datafields: [{ name: "ClassRid", type: "int" }, { name: "ParentClassRid", type: "int" }, { name: "ClassName", type: "string" }, { name: "ClassLabel", type: "string" }],
        id: "ClassRid",
        localdata: dataSource,
        async: true,
        hasThreeStates: false
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    dataAdapter.dataBind();
    var records = [];
    if (dataSource.length > 0)
        records = dataAdapter.getRecordsHierarchy("ClassRid", "ParentClassRid", "items", [{ name: "ClassLabel", map: "label" }, { name: "ClassRid", map: "value" }, { name: "ClassName", map: "ClassName" }]);
   
        $("#treeId").jqxTree({ checkboxes: true, source: records, width: '100%', height: 220 });
   

It is taking around 3-4 seconds to load 500 records which is very slow as it is hampering my performance. Is there any alternative approch we can follow to reduce the binding time.

Answer 1

The performance issue you’re experiencing is due to the very deep tree structure (500) you can't improve your current case. But what you can improve is to minimize the layer of your tree structure to increase performance.

Example: https://jsfiddle.net/mbszt7ek/

html code

<div id="treeId"></div>

javascript + jquery code

$(document).ready(function () {
    var dataSource = [];
    // Add a record for each group label
    for (var i = 0; i < 5; i++) {
        var group = i * 100 + 1;
        dataSource.push({
            ClassRid: group,
            ParentClassRid: null,
            ClassName: "ClassName" + group,
            ClassLabel: "ClassLabel " + group + "-" + (group + 99)
        });
    }
    // Add a record for each individual item within the groups
    for (var i = 1; i <= 500; i++) {
        var group = Math.floor((i-1) / 100) * 100 + 1;
        dataSource.push({
            ClassRid: i + 5, // Add 5 to avoid conflict with group labels
            ParentClassRid: group,
            ClassName: "ClassName" + i,
            ClassLabel: "ClassLabel" + i
        });
    }

    var source = {
        datatype: "json",
        datafields: [
            { name: "ClassRid", type: "int" },
            { name: "ParentClassRid", type: "int" },
            { name: "ClassName", type: "string" },
            { name: "ClassLabel", type: "string" }
        ],
        id: "ClassRid",
        localdata: dataSource,
        async: false, // Process data synchronously
        hasThreeStates: false
    };

    var dataAdapter = new $.jqx.dataAdapter(source);
    dataAdapter.dataBind();

    var records = dataAdapter.getRecordsHierarchy("ClassRid", "ParentClassRid", "items", [
        { name: "ClassLabel", map: "label" },
        { name: "ClassRid", map: "value" },
        { name: "ClassName", map: "ClassName" }
    ]);

    $("#treeId").jqxTree({ checkboxes: true, source: records, width: '100%', height: 220 });
});