Telerik UI for Windows 8 HTML

The DataSource component supports local and remote data grouping. You can use the group property to assign one or more group expressions to the control. Grouping can also be done on the server (if the remote endpoint supports it) by using the DataSource to pass the needed parameters.

Define Group Expressions

Grouping is configured through the group property that accepts an object or an array of objects of the form { field: "fieldName", dir: "asc" }. The options meaning is as follows:

  • field: The name of the field by which grouping will be performed.

  • dir: the sort order of the created groups.

The example below shows a basic grouping scenario.

Data Grouping Setup Copy imageCopy
var myDataSource1 = new Telerik.Data.DataSource({
    transport: {
        read: {
            url: "http://services.odata.org/V3/Northwind/Northwind.svc/Orders",
            dataType: "json"
        }
    },
    schema: {
        data: "value"
    },
    group: [{ field: "OrderID", dir: "desc" }, { field: "ShipName", dir: "asc" }]
});

myDataSource1.read().then(function () {
    //data is grouped
    var data = myDataSource1.view;
});

You can also add aggregates to the groups by adding the aggregates property to the group object. It has two options:

  • field: The name of the field that will be aggregated in the group.

  • aggregate: The aggregate function. Supported values are "average", "count", "max", "min" and "sum".

Data Aggregation in Groups Copy imageCopy
var myDataSource2 = new Telerik.Data.DataSource({
    transport: {
        read: {
            url: "http://services.odata.org/V3/Northwind/Northwind.svc/Orders",
            dataType: "json"
        }
    },
    schema: {
        data: "value"
    },
    group: [
        {
            field: "ShipCountry",
            dir: "desc",
            aggregates: [
                { field: "ShipCity", aggregate: "count" }
            ]
        }
    ]
});

Server Grouping

When bound to remote data, the Boolean serverGrouping property defines how grouping is performed. If the value is set to true, the DataSource sends group descriptors to the server and expects the grouped data. Note that based on the scenario, you may need to use the transport.parameterMap property to modify the object that contains the grouping information sent to the remote endpoint. For more information, see the Configuring Remote Binding article. The default value of the serverGrouping property is false, meaning data is grouped locally inside the DataSource.

See Also