Sorting tables with dynamically loaded branches

Webix JS
#1

Hi, I’m testing out Webix for our product. We’d like to use a tree table with dynamically loaded branches. I’ve built a table like this:

  webix.ui({
    container:"tree",
    view:"treetable",
    position:"flex",
    columns: [
      { id: "name", template:"{common.treetable()} #name#", width: 300, header: ["Name", { content: "textFilter" }], sort: "string"},
      { id: "description", fillspace: true, header: "Description", sort: "string"},
      { id: "created_at", width: 150, header: "Created At", sort: "datetime"},
    ],
    url: "/feeds/node",
    datatype: "json"
  });

Dynamic branch loading works fine, as does sorting. However, if I first sort a column, and then expand a new branch, the nodes on the new branch are not sorted corrected. They seem to be sorted however they come back from the server. Is this a known issue, and is there a way to work around it?

Thanks!

#2

This is expected behavior.

Sorting is one time operation, not a persistent state. So if you are adding new items in the treetable after sorting they will be added as is, without automatic re-sorting.

It possible to catch the loading event and reapply sorting to the treetable after that.

#3

Thanks for the response! Would you mind pointing me at some documentation or examples of hooking into a loading event, and also how to manually apply sorting to a treetable?

#4

onAfterLoad event
http://docs.webix.com/api__link__ui.proto_onafterload_event.html

Sorting
http://docs.webix.com/api__link__ui.datatable_sort.html
http://docs.webix.com/datatable__sorting.html#programmaticsorting