Available only in PRO Edition

Sorting Data

Query Builder provides the sorting functionality that works in tandem with the sorting features of the related data component.

To enable sorting in Query Builder, set the sorting property to true:

webix.ui({
    view: "querybuilder",
    id: "querybuilder",
    sorting: true,       fields:[
        { id:"year",  value:"Year", type:"number" },
        { id:"rating", value:"Rating", type:"number" },
        { id:"title", value:"Title",  type:"string" },
        { id:"votes",  value:"Votes", type:"number" },
    ]
});

Getting Sorting Elements

After you enable the sorting feature, Query Builder provides two additional elements: a multiselect control to choose columns by which a dataset will be sorted and a select control:

You can get these elements for further work via the getSortingElements() method:

var sort_elements = $$("querybuilder").getSortingElements();

It will return an array of two elements. The first one will be an object of the multiselect control and the second one - an object of the select control, correspondingly.

After that you will be able to work with these elements as with usual controls. For example, set a new value:

var sortingElements= $$("querybuilder").getSortingElements();
 
// set a new value for the select control
sortingElements[1].setValue("desc"); 
sortingElements[1].refresh();

or change values of their inputWidth and width parameters:

var sortingElements= $$("querybuilder").getSortingElements();
 
// define new width and inputWidth for the select control
sortingElements[1].define("inputWidth", "500");
sortingElements[1].define("width", "1000");
sortingElements[1].resize();

Using getSortingHelper() Method

There is a helper function that provides sorting logic for Query Builder. You can get this function with the help of the special method getSortingHelper().

var sorting_helper = $$("querybuilder1").getSortingHelper();

The returned "helper" function iterates through the dataset items and compares them in pairs. It returns a number value:

  • 1 - an object with the first value in pair must go before the second one;
  • -1 - the second object goes before the first one;
  • 0 - the order of both objects doesn't change.

After items are sorted by one property, the next sorting iteration will be applied only to those items that have the same values in the property by which dataset was sorted last time.

For example, you have sorted a datatable with films by the "year" property.

Then you want to sort items by the "title" property. This time only those items that have equal values in the "year" property will be sorted.

After you've received the helper function, you can pass it to the Webix sort method to enable sorting of data components with Query Builder.

For example, with Webix DataTable:

$$("$datatable1").sort(helper);

Related sample:  QueryBuilder - Soring and filtering a datatable

Back to top