Skip to content

boevski/kinvey-js-data-source

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Kinvey Kendo UI DataSource

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.

Sourcing the Component

You can choose between several ways of sourcing the data source, including downloading a local copy or directly referencing an online copy.

GitHub Repository

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.

Adding References

<!-- 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>

Initializing

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.

Initialize with Collection Name

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);

Initialize with a Data Store Instance

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 .

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 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"]
}

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 dataSourceOptions = {
    type: 'kinvey',
    // ommitted for brevity
    serverSorting: true,
    sort: { field: 'author', dir: 'asc' }
}

Paging

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.

Unsupported Configuration Options

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
  • schemaschema.aggregates and schema.groups are not supported. The component already takes care of schema.data, schema.total and schema.type for you so you do not need to set them explicitly
  • batch
  • serverGrouping—you can use client-side grouping instead
  • serverAggregates——you can use client-side aggregation instead or request the data from the _group endpoint in Kinvey
  • transport.parameterMap
  • inPlaceSort—use the serverSorting option instead.
  • offlineStorage—instead initialize and work with a Kinvey DataStore of type SYNC.
  • type—only the predefined for Kinvey transport and/or schema options are supported.

License

See LICENSE for details.

About

[WIP] Data Source component for JS apps using Kendo

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 71.2%
  • HTML 28.8%