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

Kendo UI DataSource

Kendo UI DataSource

The Backend Services dialect of the Kendo UI DataSource component (named 'everlive'), supports filtering, sorting, paging, and CRUD operations. Below are samples and explanations how to configure these features.

Initialization

In order to use the 'everlive' dialect, the global Everlive variable should be initialized. More information could be read here.

Please, note that the Everlive JavaScript SDK must be included after all Kendo UI resources.

Filtering

The filtering is enabled by passing true to the serverFiltering configuration option and passing a filter object to the filter option. The dialect supports all DataSource filter configuration options.

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

var dataSource = new kendo.data.DataSource({
    type: 'everlive',
    transport: {
        typeName: 'type-name'
    },
    schema: {
        model: { id: Everlive.idField }
    },
    serverFiltering: true,
    filter: { field: 'Author', operator: 'contains', value: 'Lee' }
});

Custom filtering

The filtering API of Backend Services can be accessed in order to apply advanced filtering options, that are not supported in the filter configuration. For example, filtering the values of fields of type Geo Point or Array. This can be achieved by constructing a custom header and passing it to transport.VERB.headers, where VERB can be create, read, destroy, or update.

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

var filterExpr = {
   "Location":{
      "$nearSphere":{
         "longitude":23.379068,
         "latitude":42.650601
      },
      "$maxDistanceInKilometers":10
   }
};

var dataSource = new kendo.data.DataSource({
    type: "everlive",
    transport: {
        typeName: "Locations",
        read: {
            headers: {
                "X-Everlive-Filter": JSON.stringify(filterExpr)
            }
        }
    },
    schema: {
        model: {
            id: Everlive.idField
        },
        // additional configuration
    },
    // additional configuration
});

Sorting

The sorting is enabled by passing true to the serverSorting configuration option and passing a sort object to the sort option. The dialect supports all DataSource sorting configuration options.

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

var dataSource = new kendo.data.DataSource({
    type: 'everlive',
    transport: {
        typeName: 'type-name'
    },
    schema: {
        model: { id: Everlive.idField }
    },
    serverSorting: true,
    sort: { field: 'Author', dir: 'asc' }
});

Paging

The paging is enabled by passing true to the serverPaging. The page and pageSize properties can be preset by passing the page and pageSize configuration options. The dialect supports all DataSource paging configuration options.

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

var dataSource = new kendo.data.DataSource({
    type: 'everlive',
    transport: {
        typeName: 'type-name'
    },
    schema: {
        model: { id: Everlive.idField }
    },
    serverPaging: true,
    page: 2,
    pageSize: 20
});

Subset of Fields

Retrieving a projection of the fields of the entities saved in Telerik Platform can be achieved by constructing a fields expression header and passing it to the Kendo UI transport configuration option.

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

var fieldsExp = {
    "Author": 1,
    "Title": 1,
};

var dataSource = new kendo.data.DataSource({
    type: "everlive",
    transport: {
        typeName: 'type-name',
        read: {
            headers: {
                "X-Everlive-Fields": JSON.stringify(fieldsExp)
            }
        }
    },
    schema: {
        model: {
            id: Everlive.idField
        },
        // additional configuration
    },
    // additional configuration
});

Expand Expressions

You can use expand expressions by passing the custom header "X-Everlive-Expand".

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

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

var dataSource = new kendo.data.DataSource({
    type: "everlive",
    transport: {
        typeName: "Activities",
        read: {
            contentType: "application/json",
            headers: {
                "X-Everlive-Expand": JSON.stringify(expandExpr)
            }
        }
    },
    schema: {
        model: {
            id: Everlive.idField
        },
        // additional configuration
    },
    // additional configuration
});

CRUD Operations

Filling the DataSource component with data from Telerik Platform is done by calling the fetch method. The other operation should be performed by calling the sync method at the end. The sync methods get the new, updated and deleted items and call the appropriate RESTful services. Here is a example of these operations:

var el = new Everlive('your-app-id');
var dataSource = new kendo.data.DataSource({
    type: 'everlive',
    transport: {
        typeName: 'type-name'
    },
    schema: {
        model: { id: Everlive.idField }
    }
});
// retrieve the data from Telerik Platform  
dataSource.fetch(function () {

// add a new item
var itemToAdd = {
    'Author': 'Harper Lee'
};
dataSource.add(itemToAdd);

// Update the first item
var itemToUpdate = dataSource.at(0);
itemToUpdate.set('Author', 'Updated Sample Text');

// Delete the second item
var itemToDelete = dataSource.at(1);
dataSource.remove(itemToDelete);

// Send the changes to Telerik Platform
dataSource.sync();
});

Unsupported Kendo UI data source configuration options

The following configuration options of the DataSource component are not supported for server execution in Telerik Platform. By default, their value is set to false. This means that grouping and aggregation of data must be done client-side.

See Also

Aggregation and Grouping

Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.