JqxTree control is taking time to load with 500 records

yadta

It is taking around 3-4 seconds to load 500 records which is very slow as it is hampering my app performance.

var source = { datatype: "json",
datafields: [ { name: "Rid", type: "int" },
{ name: "ParentRid", type: "int" },
{ name: "Name", type: "string" },
{ name: "Text", type: "string" } ],
id : "Rid",
localdata : dataSource,
async: true,
hasThreeStates: false };

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

var records = dataAdapter.getRecordsHierarchy("Rid", "ParentRid", "items", [{ name: "Text", map: "label" }, { name: "Rid", map: "value" }, { name: "Name", map: "Name" }]);

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

I want to load 'JqxTree' control in such a way that other things won't wait for it to load. Is there any way in the jQuery to load 'JqxTree' control in the background?

Or something we can do which won't affect performance of whole application

Richard Deeming

The obvious question is why are you trying to load 500 records into a tree? Are your users really going to dig through that many tree nodes to find the one they want? Surely there must be a better way to help them find what they're looking for? Beyond that, you need to profile your code to find out where the bottleneck is. If it really is the call to the jqxTree method, then the problem is likely the browser struggling to handle DOM updates, and there will be nothing you can do to improve that. You would need support from the authors of the library, which means waiting for them to reply to your GitHub issue[^].

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

jschell

Richard Deeming wrote:

why are you trying to load 500 records into a tree?

Good question. I have seen others try to load 3,000 and even 300,000. First one is when I learned years ago as a backend developer to never write queries that do not have a paging limit. At least that way if the front end tries to load everything it won't blow up my code.

Secretsinnersuk2

To improve the performance of your application and ensure that other components do not wait for the JqxTree control to load, you can load the JqxTree control asynchronously. One way to achieve this is by using JavaScript's `setTimeout()` function to delay the creation of the JqxTree control until after the initial rendering of the page. Here's how you can modify your code:

```javascript
var source = {
datatype: "json",
datafields: [
{ name: "Rid", type: "int" },
{ name: "ParentRid", type: "int" },
{ name: "Name", type: "string" },
{ name: "Text", type: "string" }
],
id: "Rid",
localdata: dataSource,
async: true,
hasThreeStates: false
};

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

// Delay the creation of JqxTree control asynchronously
setTimeout(function() {
dataAdapter.dataBind();
var records = dataAdapter.getRecordsHierarchy("Rid", "ParentRid", "items", [
{ name: "Text", map: "label" },
{ name: "Rid", map: "value" },
{ name: "Name", map: "Name" }
]);

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

}, 0);
```

By wrapping the creation of the JqxTree control inside `setTimeout()` with a delay of 0 milliseconds, you allow other components to load without waiting for the JqxTree control. This way, the JqxTree control will be loaded asynchronously, improving the overall performance of your application.

Secret Sinners

Prestige Somerville live

Thank you for the information.