Products

[Tr12]

Hello,
are there any updates regarding adding a lot of tree items at once? We add child items to the tree when a tree item is expanded, but it is really a bad user experience when the user has to wait 10 seconds for the tree to add all the child nodes. With the older jqxTree, this worked a bit better, because we could set the (undocumented) “update” parameter to false for the first n-1 items, and set it to true for the last item, which improved performance.
Thank you!

[Tr12]

I’m sorry – thank you for your help, Christopher!
Hi Peter,
thanks for the hint about using document fragment. However, I tried it, but it doesn’t seem to make a noticeable difference – it still needs about 500 ms to create the 30 text boxes. You can see the code pen example here: https://codepen.io/KP-Traeger12/pen/XWXPYVy
Thank you

[Tr12]

Hi Peter,
thank you for your help. As a workaround, I set the “readonly” attribute on the inner “input” element instead of the smart-input:
$("input", smartInput).attr("readonly", "");
 
Unfortunately, I cannot use the Smart.TextBox component, because it seems to be very slow to create. When I create 30 text boxes (for a form), they need about 500-600 ms to create (in Chrome), which is way too much. See this code pen link: https://codepen.io/KP-Traeger12/pen/abdadYY
When you change Smart.TextBox to Smart.Input, it only needs ~60 ms (1/10 of the time).
I also noticed an issue with Smart.Input, that when getting the current value by calling .value, it does not always return the current value, but the value from about 0.5 seconds ago. Instead, I have to get the value from the underlying “input” element, similar to setting the “readonly” attribute.
Thank you
 

[Tr12]

Hi Peter,
when I combine the “.virtualized = true” setting with “.dropDownAppendTo = document.body”, (because I display it in a SmartWindow), then it seems the drop down list doesn’t work correctly in Firefox 78.0.2, whereas it works in Chrome. See the following code pen: https://codepen.io/KP-Traeger12/pen/OJMoMmK
In Firefox, it will look like this (only the first item is visible):

 
 

[Tr12]

Hi Peter,
OK, thank you. In the meantime, is there another way to ensure the pageSize works correctly?
Currently, I’m trying to set the .pageSize property manually after setting the .dataSource property; however, in that case the pager is not updated and it shows still “10” as size; additionally, when I update the pageSize after updating dataSource, the number of pages in the footer has still the old value, only when you click on one page indicator, they are updated.
Thank you

[Tr12]

Hi Peter,
thank you for your help!
By setting virtualized=true and setting itemHeight to a fixed value (e.g. 25), the performance is now better, it needs about 50-60 ms to create instead of 300 ms. Still, when I have multiple drop down lists, the delay is noticeable, e.g. when I have 4 smart-drop-down-lists to be shown on the page/window, they still need about 200-250 ms to create. This is still slower than using the jqxDropDownList widget.
I also tried to use a smart-input with setting readonly=true and dropDownButtonPosition=’right’, and using a datasource to show items like in the drop-down-list, which seems to be much faster than the smart-drop-down-list (only needs about 10 ms).
However, with smart-input I cannot set a different value for each item – the smart-input only seems to use the “label” property from the data source.
Thank you

[Tr12]

I tried to set dropDown.dataSource to an array of objects rather than creating new smart-list-items. This improves performance a bit (it only needs about 300 ms), but it’s still relatively slow.

let perfStart = performance.now();
let dropDown = new window.Smart.DropDownList();
let datas = [];
for (let i = 0; i < 120; i++)
datas.push({
label: "Item " + i,
value: i
});
dropDown.dataSource = datas;
document.body.appendChild(dropDown);
let time = performance.now() - perfStart;
alert("Time: " + Math.floor(time));

[Tr12]

Hi Peter,
thank you, setting dropDownAppendTo to the body element worked.
Regarding event bubbling, thank you for the explanation. I was able to fix the issue by checking if event.target == windowElement, and otherwise ignore the event.
Thanks

[Tr12]

Hi Hristofor,

1) Currently there is no way to add more than 1 item at a time. However we will consider adding such functionality.

OK. I think it would be great if a functionality to add multiple items at once can be added, as it seems the tree component of a competitor has such a functionality to insert lots of items with good performance.

2) The Smart.Tree does not throw any specfic events regarding context menus, so you will have to add your own. Here’s how to do it:

OK, thank you, I will try it.

[Author]

Posts