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 data\data-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:
-
One of the options we discussed is converting our
EntitiesCollectionto aKendo.DataSourcehowever this seems to be a non option – the communication with the server has to be done through our own objects. -
Replace the
Kendo.DataSourcewith theEntitiesCollection– ourEntitiesCollectionwill implement theKendo.DataSourceAPI 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 theKendo.DataSourceobject. -
The
Kendo.DataSourcewill wrap our ownEntitiesCollectionand delegate requests to it. -
The
Kendo.ObservableArrayobject contained by theKendo.DataSourcewill wrap ourEntitiesCollection(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 theBackbone.Collectionis not thedataobject (in Kendo terminology) but theDataSourceobject – since it is the one that interacts with the remote server and fetches the data.
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.