treetable sorting

edited January 2014 in Technical questions


column sorting in a treetable doesn't work right, unfortunately. please see the following simple snippet:


  • It works, but it sorts data on each level of treetable
    Check the adjusted sample, I have added tree icon to visualize the hierarchy

    As you can see, after sorting data on each level is correctly sorted. Top level items sorted, child items of (1) is sorted and so for. If you need to show a plain dataset, just use "datatable" instead of "treetable"

    If you want to use treetable with different sorting logic - please share your thoughts ( it possible to define custom sorting function )

  • edited January 2014

    you are right, i overlooked it. thanks for the explanation.

    however, what i actually wanted to point out was something different, i think i am now able to demonstrate the problem with the following snippet:

    i have a rather complex JSON data, for the sake of readability I simplified it. To reproduce the problem, simply click on the column "event", for example, a few times to sort.

    What I need is a simple string sorting, not really something customized at the moment.

  • The sorting, filtering and editing of cells use raw data from json, and don't use template. Template defines only visual formatting.

    In your case id of column is "event", so when sorting is applied - grid attempts to sort by "event" field which doesn't exists. Template, which holds the value is ignored.

    To have the desired functionality you need to use "map" property in column configuration. It will define one way mapping between the original data and column id.

    If you want to define a template - you still can, but now, instead of the long data field name ( as it was in the original json), you can use just

    If you try to access the data of row through API you will get object which contains all properties from original json + mapped propertis ( obj.event and obj.d2LogicalModel - both will be here )

  • edited January 2014

    wow! a great solution. thanks a lot.

    however there is still a minor bug inside, i guess. please take a look at this snippet:

    i just cloned the 4 row entries, gave them unique ids and set height to 700 for visibility. now if you try to sort on "type" it sorts (wrong), although it is not needed. i have no idea about the cause of this behavior. it doesn't happen if you have 4 entries, but it happens if you have 12, in this case.

  • edited January 2014

    one more thing:

    can i also define map as a function? I need to concatenate fields, display the concatenation and be able to sort concatenation, something like this:

     template: function (obj) {
        var location = "";
        var fromLocation = obj.d2LogicalModel.payloadPublication.situations[0].situationRecords[0].specificLocation;
        var toLocation = obj.d2LogicalModel.payloadPublication.situations[0].situationRecords[0].alertCLocationName.value;
        location += obj.roadName;
        if (fromLocation !== undefined) location += ", " + fromLocation;
        if (toLocation !== undefined) location += " - " + toLocation;
        return location;
  • As for "type" sorting - its kind of expected, items are sorted in the correct order, they all have the same value - so any order is correct. The sorting doesn't guarantee that order of items with equal value will not be changed. It is native behavior of javascript

    It possible to workaround this behavior, though.

  • You can't use function for the map ( this I think will be changed in future ), but you can use a low level functionality that is used by map properties.

    The data scheme is mutual exclusive with map attributes, you can't use both in the same time. You can get mode details about data scheme here -

  • thank you maksim for your answers.

    next question:
    where can i put your suggestion, namely this:


    in a backbone view? in config, it doesn't seem to be recognized.

    I am actually trying to integrate webix to my backbone view.

  • edited January 2014

    It goes to the config or related component, something like next

    var ui_config = { view:"datatable", $scheme: { ... }, .... };
    new WebixView({
        config: ui_config,
        el: ".app1_here"

    Basically, place it next to view:"datatable".

  • edited January 2014

    yes, i have a similar code, like the following, but $init doesn't get called at all:

      define(function (require) {
         var Backbone = require('backbone');
         var Webix = require('webix');
         return WebixView.extend({
           initialize: function () {
           config: {
               id: "importTreeTable",
               view: "treetable",
               scheme: {
                   $init: function (obj) {
               on: ...
               columns: ...
  • edited January 2014

    The same code works for me :/

    I can share a working sample, if it helps.

    Please check that you are not using map attributes in the datatable ( as I stated before - map attribute and scheme.$init are mutual exclusive features )

  • oh now i see!

    i actually misinterpreted your words. i thought you mean the mutual exclusivity between map and template, whereas you were talking about map and scheme. sorry, mea culpa!

    thanks, now it works with scheme/init.

    PS: it would have been better to be able to sort according to the displayed value (i.e. template) in the first place as a default behavior.

  • There are few reasons why the sorting works against raw data

    • it doesn't require any extra configuration in case of direct property mapping ( mapping by column id )
    • it works nicely when you are using html to format value ( exclude html from search )
    • it works for numbers and dates, sorting by text will not work here
    • it gives a better performance
    • to have edit operations you will need to define data mapping anyway

    As compromise, we can add support for extra sorting type - sort:"template", which will use the text of cell for sorting.

  • i have applied column sorting and when i delete a folder then the sorting is changed to some other column . Is there any way to know the last column to which the sorting was applied and the direction.

  • edited June 2018

    @shravs ,
    To get the current state of sorting, you can use getState() method, which returns an object with a sort property.

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!