Integrating Kendo.Grid with Backbone.Collection

Asked By: Anonymous

Background

I’m working in a client-server REST based application which manages various kinds of information and defines a generic EntitiesCollection which extends Backbone.Collection.
The EntitiesCollection has an API (it extends the Backbone.Collection API) for CRUD operations, filtering, sorting and so on.

My team needs to write a Grid component which can display and manipulate an EntitiesCollection object. This grid will be based on some 3rd party component and we are seriously considering using Kendo.Grid.

The Challange

My first question is whether anyone ever tried to use Kendo.Grid whose datadata-source is actually a Backbone.Collection and whether that is a good and applicable idea at all?

I have seen various articles regarding Kendo and Backbone integration including Derick Bailey’s Backbone And Kendo UI: A Beautiful Combination. However, these articles talk about view level integration (wrapping the Kendo.Grid with a Backbone.View). What I am looking for is data level integration – making Kendo.Grid work with Backbone.Collection.

Options

As far as I understand so far Kendo.Grid works with a Kendo.DataSource which in turn holds an internal collection – a Kendo.ObservableArray.

Assuming we are going for it I see several implementation options:

1. One of the options we discussed is converting our EntitiesCollection to a Kendo.DataSource however this seems to be a non option – the communication with the server has to be done through our own objects.
2. Replace the Kendo.DataSource with the EntitiesCollection – our EntitiesCollection will implement the Kendo.DataSource API and the grid will work with it as its dataSource object. I don’t like this solution since I think I will loose a lot of the functionality that Kendo gives me in the Kendo.DataSource object.
3. The Kendo.DataSource will wrap our own EntitiesCollection and delegate requests to it.
4. The Kendo.ObservableArray object contained by the Kendo.DataSource will wrap our EntitiesCollection (see this sample implementation I found online). This approach seem to work with simple use cases however something seems wrong to me – I think that the Backbone.Collection is not the data object (in Kendo terminology) but the DataSource object – since it is the one that interacts with the remote server and fetches the data.

Solution

Answered By: Anonymous

You might be interested in this article that I just posted:

http://www.kendoui.com/blogs/teamblog/posts/13-02-07/wrapping_a_backbone_collection_in_a_kendo_data_datasource.aspx

In it, I walk through the basics of what it takes to build an adapter to use a Backbone.Collection as the backing store for a DataSource, and connect it to a Kendo UI Grid.

I haven’t completely solved all of your needs – for example, no paging support – but hopefully this will get you down the path far enough.