Progress will discontinue Telerik Platform on May 10th, 2018. Learn more

Kendo UI HierachicalDataSource

Kendo UI HierarchicalDataSource

The Backend Services JavaScript SDK provides a helper constructor for initializing the Kendo UI HierarchicalDataSource component. It relies on the Expand feature and is useful for representation of hierarchically connected content types. The "everlive" dialect supports all Kendo UI HierarchicalDataSource configuration options. Below are samples and explanations on how to initialize and use this data source with Telerik Platform content types.

Basic usage and configuration

The "everlive" dialect provides a way for creating instances of a Kendo UI HierarchicalDataSource through the Everlive.createHierarchicalDataSource, which are ready and configured to work with Telerik Platform.

The configuration of the component is tuned by passing an object with the following keys:

  • typeName - this is the name of the given content type.
  • expand - an array, containing the definition(s) of the field(s) to be expanded.

    Please, note that the relation fields passed to the expand configuration option should resolve to an array when expanded. This includes multiple relations and external relations, meaning you cannot use the hierarchical data source to expand single relations.

  • schema - an object with the schema configuration. Use this if you want to override the "everlive" dialect with custom Kendo UI schema configuration.

Initialization with "lazy" loading

This data fetching strategy will initially load the items from the parent content type. When the children items are fetched client-side, subsequent requests will be sent to the server, on-demand.

var el = new Everlive('your-app-id');

var activities = Everlive.createHierarchicalDataSource({
    "typeName": "Continents",
    "expand": ["Countries", "Towns"]
});

In the "expand" array we provide the sequence of nodes that will be expanded. These can either be string values representing the relation field name definitions, or an object that allows for advanced options to be specified.

var el = new Everlive('your-app-id');

var townsExpandNode = {
    relation: "Towns",
    filter: {
        Population: {
            $gt: 10000
        }
    },
    sort: {
        "Name": 1
    },
    take: 10
};

var activities = Everlive.createHierarchicalDataSource({
    "typeName": "Continents",
    "expand": [
        "Countries", //string value representing the relation field that will be expanded
        townsExpandNode
    ]
});

The options when using the object notation for an expand node are the following:

  • relation - Required. This is the field that will be expanded. Check out specifying expand expression for more information about relation field definitions.
  • filter - an object specifying the filter expression.
  • sort - an object specifying the sort expression.
  • skip - a number specifying the skip value.
  • take - a number specifying the take value.
  • fields - an object specifying the fields expression.
  • singleField - string representing the single field expression.

Initialization with "eager" loading

This data fetching strategy will load the parent and the children with a single request to the server. Note that the same restrictions as for the "Expand" requests apply.

var el = new Everlive(your-app-id);

var expandExpr = {
    "Likes": {
        "ReturnAs": "UsersLikedIt"
    }
};

var activities = new kendo.data.HierarchicalDataSource({
    type: "everlive",
    transport: {
        typeName: "Activities",
        read: {
            contentType: "application/json",
            headers: {
                "X-Everlive-Expand": JSON.stringify(expandExpr)
            }
        }
    },
    schema: {
        model: {
            id: "Id",
            hasChildren: function (item) {
                return item.UsersLikedIt && item.UsersLikedIt.length > 0;
            },
            children: "UsersLikedIt"
        }
    }
});

Usage with Kendo UI widgets

The usage of this component is pretty straightforward in widgets that rely on a hierarchical data source. It is particularly well binded to a Kendo UI Web TreeView or to a Kendo UI Mobile ListView widgets.

Use this snippet to populate a TreeView with hierarchical data source.

$("#treeview").kendoTreeView({
    dataSource: dataSource,
    dataTextField: ["FieldNameOfTheParentContentType", "FieldNameOfTheFirstChildContentType", "FieldNameOfTheSecondChildContentType"]
});
Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.