The Kinvey flavour of the Kendo UI DataSource component (named 'kinvey'
), supports filtering, sorting, paging, and CRUD operations. Below are samples and explanations how to configure these features.
You can choose between several ways of sourcing the data source, including downloading a local copy or directly referencing an online copy.
The source code of the component can be accessed in the following GitHub repository. You can download a ZIP archive of the file from the Releases page.
<!-- Other framework scripts (cordova.js, etc.) -->
<!-- Kendo UI Core / Kendo UI Professional -->
<script src="kendo.all.min.js"></script>
<!-- Kinvey JS SDK (HTML, PhoneGap, etc.) -->
<script src="...."></script>
<!-- Kinvey Kendo Data Source -->
<script src="kendo.data.kinvey.js"></script>
In order to use the kinvey
data source dialect, the global Kinvey object should be initialized. Here you can learn how to initialize it in your app.
You can intialize the connection to the backend by specifying either a collection name or by passing an instance of the Kinvey data store object.
Before initializing the Data Source instance ensure you have reviewed the Kinvey Data Store Guide and are familiar with how the DataStore types in Kinvey work.
You can connect a data source instance directly to a given collection in the backend by simply supplying the name of that collection to the transport.typeName
setting.
When initialized in that way the data source will use internally a Kinvey Data Store of type Network
.
var collectionName = "books";
var dataSourceOptions = {
type: "kinvey",
transport: {
typeName: collectionName
},
schema: {
model: {
id: "_id"
}
},
error: function(err) {
alert(JSON.stringify(err));
}
};
var dataSource = new kendo.data.DataSource(dataSourceOptions);
For advanced scenarios like caching or offlynce synchronization you will need to manage a Kinvey data store of type Cache
or Sync
. You can instruct the data source instance to work directly with such data store. You have to manage yourself the state of the store and push
, pull
and sync
the entities to/from the server yourself in a suitable place of your application. The data source instance will only fetch the items that are available locally in the data store.
// initialize the data store
var booksSyncStore = Kinvey.DataStore.collection(collectionName, Kinvey.DataStoreType.Sync);
// pull and push items to/from the server in a suitable place in your code
// initialize the data source with the dataStore option
var dataSourceOptions = {
type: "kinvey",
transport: {
dataStore: booksSyncStore
},
schema: {
model: {
id: "_id"
}
},
error: function(err) {
alert(JSON.stringify(err));
}
};
var dataSource = new kendo.data.DataSource(dataSourceOptions);
For the data store of type
Cache
the data source is calling the server directly and will not .
The filtering is enabled by passing true
to the serverFiltering
configuration option and passing a filter object to the filter
option.
The dialect supports a selected subset of the DataSource filter configuration operators, namely:
-
"eq"
-
"neq"
-
"isnull"
-
"isnotnull"
-
"lt"
-
"gt"
-
"lte"
-
"gte"
-
"startswith"
-
"endswith"
var dataSourceOptions ={
type: 'kinvey',
// ommitted for brevity
serverFiltering: true,
filter: { field: 'author', operator: 'eq', value: 'Lee' }
}
In addition to the standard Kendo UI Data Source filtering operatiors, this dialect adds support for the following Kinvey-specific operators:
"isin"
—value is an array of possible matches. Ex:{ field: 'author', operator: 'isin', value: ["Author1", "Author2", "Author3"] }
"isnotin"
—an inversion of the above logic returning all matches that are not in the specified array, including these entities that do not contain the specified field.
{
field: "author",
operator: "isin",
value: ["John Steinbeck", "Leo Tolstoy", "Gore Vidal"]
}
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 dataSourceOptions = {
type: 'kinvey',
// ommitted for brevity
serverSorting: true,
sort: { field: 'author', dir: 'asc' }
}
The paging is enabled by passing true
to the serverPaging
.
Usually you have to specify only the pageSize
configuration option. You can also specify the page
option to request a specific page. The dialect supports all DataSource paging configuration options.
var dataSourceOptions = {
type: 'kinvey',
// ommitted for brevity
serverPaging: true,
pageSize: 20
};
When
serverPaging
is enabled, a separate request to determine the count of the entities on the server is made before each request for the respective page of entities to the server.
The following configuration options of the DataSource
component are not supported for server execution in {{site.tap}}. By default, their value is set to false
. This means that grouping and aggregation of data must be done client-side.
- The standard Kendo UI data source filter operators that are not supported for server filtering in the "kinvey" flavour are:
contains
,doesnotcontain
,isempty
,isnotempty
- Specifying a subset of fields to be returned
- Expand expressions
- Sending additional headers with the request
schema
—schema.aggregates
andschema.groups
are not supported. The component already takes care ofschema.data
,schema.total
andschema.type
for you so you do not need to set them explicitlybatch
serverGrouping
—you can use client-side grouping insteadserverAggregates
——you can use client-side aggregation instead or request the data from the_group
endpoint in Kinveytransport.parameterMap
inPlaceSort
—use theserverSorting
option instead.offlineStorage
—instead initialize and work with a Kinvey DataStore of typeSYNC
.type
—only the predefined for Kinveytransport
and/orschema
options are supported.
See LICENSE for details.