group

groups data by the specified data property

void group(object config, [id target] );
configobjectan object with grouping parameters
targetidthe ID of the branch for multiple grouping

Example

myview.group({
    by:"company", // 'company' is the name of a data property
    map:{
        sales:["sales","sum"]
    }   
});

Related samples

Details

The method is called for each data item.

The config object has several properties:

  • by – a data property according to which items will be united in groups

  • map – an object that specifies new data properties that the items in a group will have. Properties are specified by an array. The first element of this array is the name of a property from original data, the second one – the functor that will be applied to all values of the property (set by the first element) in the group.
    Grouping provides the following functors:

    • sum – gets the sum of values in a group;
    • max – gets the maximum value in a group;
    • min - gets the minimum value in a group;
    • count - gets the number of items in a group;
    • any - gets a random property value from a group;
    • string - adds a custom data property to group items.

      It's possible to define custom functor. Read on the topic in the related article - 'Custom Functor for Data Grouping'.
  • missing (boolean, string) - defines how the objects the group header of which returns ""/null/false/undefined will be grouped. The possible values:

    • true (default) the missing values are appended after the grouped values,
    • false - the missing values are ignored,
    • string - creates a separate group for missing values or, if the string is the name of some existing group, adds them to the group.

To group data initially (just after data has been loaded) you may use the scheme parameter, to be accurate, its $group key.

webix.ui({
    view:"chart",
    ...
    scheme:{
        $group:{
            by:"company", // 'company' is the name of a data property
            map:{
                sales:["sales","sum"],
                state:["grouped","string"]
            }   
        }
    }
});
See also
Back to top
If you have not checked yet, be sure to visit site of our main product Webix popular javascript framework and page of tree grid ui product.