Kendo UI + Backbone.js

[Mike]

Hi,

According a quick research on Google / Stack Overflow, Backbone.js is the most popular MVC JavaScript framework. Since Backbone.js has no UI elements and also uses jQuery, I think it would be the perfect match for Kendo UI. My questions:

1. What do you think about Backbone.js + Kendo UI, is this a good combination or not?
2. Will you provide integration examples for Backbone.js?
3. Are there other such frameworks you can recommend for Kendo UI (for example: JavaScriptMVC)?

Unless you're a really fastidious coder, some sort of library to help structure large-scale JavaScript applications is important (see http://news.ycombinator.com/item?id=2119704 ). Since Kendo UI seems to be "only" an UI framework (please correct if wrong), it would be really great if you could write/blog more about this topic (how to integrate/combine Kendo UI with other non-UI JavaScript frameworks) in the future.

Thanks
mike

[RainerAtSpirit]

+1 for an official example for Backbone.js integration.

If Kendo UI would solely be a UI framework one would expect it plugs into the Views of backbone. But looking at e.g. the grid examples this is clearly more then just the View (not saying this is a bad thing, I just don't see how it nicely integrates with backbone.js).
e.g. in backbone you might want to implement a sorting, a paging and an item model and then have a collection of items that are paged/sorted. You'd then use a sort view (aka thead) a paging view (aka tfoot) and a collection view (aka tbody) to display results.
In Kendo UI (at least at the first glance) paging, sorting and item configuration are handled by grid configuration options so I don't see an easy mapping at that level.

On the other side kendo.grid.js uses Kendo.data.js. So this might be a promising integration point where you would have a specific Kendo.data.backbone.js implementation that maps backbone collections/models to KendoUI.

So more questions than answers at the moment. An official example would help :).

Rainer

[Sebastian]

Hi guys,

Thank you for the feedback. I will make sure our developers will hear it and contemplate integration examples with Backbone.js for the future versions of the Kendo UI Framework.

Kind regards,
Sebastian
the Telerik team

[Sam]

Now that the 1.0 release is out, what are the plans to support MVC / MVVM frameworks like backbone or knockout?  This is extremely important factor when planning larger scale applications that are starting from scratch.

I see that it is in the top 5 feature requests on the feedback site, so others share this opinion:
http://kendo.uservoice.com/forums/127393-kendo-ui-feedback/suggestions/2387398-add-support-for-mvc-and-or-mvvp-patterns

[Sam]

Now that the 1.0 release is out, what are the plans to support MVC / MVVM frameworks like backbone or knockout?  This is extremely important factor when planning larger scale applications that are starting from scratch.

I see that it is in the top 5 feature requests on the feedback site, so others share this opinion:
http://kendo.uservoice.com/forums/127393-kendo-ui-feedback/suggestions/2387398-add-support-for-mvc-and-or-mvvp-patterns

[Sam]

Now that the 1.0 release is out, what are the plans to support MVC / MVVM frameworks like backbone or knockout?  This is extremely important factor when planning larger scale applications that are starting from scratch.

I see that it is in the top 5 feature requests on the feedback site, so others share this opinion:
http://kendo.uservoice.com/forums/127393-kendo-ui-feedback/suggestions/2387398-add-support-for-mvc-and-or-mvvp-patterns

[Sam]

Now that the 1.0 release is out, what are the plans to support MVC / MVVM frameworks like backbone or knockout?  This is extremely important factor when planning larger scale applications that are starting from scratch.

I see that it is in the top 5 feature requests on the feedback site, so others share this opinion:
http://kendo.uservoice.com/forums/127393-kendo-ui-feedback/suggestions/2387398-add-support-for-mvc-and-or-mvvp-patterns

[Atanas Korchev]

Hello Sam,

 We are currently working on something regarding MVVM but it is still too early to announce it or preview it. Kendo UI also includes its own models and implements CRUD via the datasource. This blog post shows how.

 We also plan to prepare an example for using Backbone models. There will be a blog post showing that. As for Knockout integration - we have some preliminary support. However deeper KO integration requires quite a lot of code. You can check this forum thread for more details.

Regards,
Atanas Korchev
the Telerik team

[Christian]

Atanas,

has this blog post wrt Backbone  already been published?

Thanks.

[Atanas Korchev]

Hello,

 No, we have not yet published such a blog post. We don't yet have a backbone integration example because this would require some extending of Kendo UI. Stay tuned!

Regards,
Atanas Korchev
the Telerik team

[Nagendra]

Its super hard to work with KendoUI charts with framework like JavascriptMVC. Not sure, if i'm missing anything basic but its really really hard to get a simple chart up!

Have any example to deal with JavascriptMVC ?

[briankb]

@Atanas,

Any updates on examples using Backbone.js?

Seems pretty important to support Backbone.js as its popularity is growing fast and furious.

[Atanas Korchev]

Hi,

 No, we don't have an update. By the way I decided to ask what kind of example you would like to see. I know that some of our customers are using Backbone with Kendo UI without any issues. Some clarification would definitely help us to make that example.

Regards,
Atanas Korchev
the Telerik team

[Atanas Korchev]

Hi,

 No, we don't have an update. By the way I decided to ask what kind of example you would like to see. I know that some of our customers are using Backbone with Kendo UI without any issues. Some clarification would definitely help us to make that example.

Regards,
Atanas Korchev
the Telerik team

[RainerAtSpirit]

Hi Atanas ,

I'm gettting your point of being specific, so if you are ready to roll please add something to

https://github.com/addyosmani/todomvc

Based on a backbone/requiersjs example it would tell us enough how KendoUI could/should be integrated.

Rainer

BTW: Feel feel free to other examples for other platforms as well, while you're there ;-).

[ricardo castro]

Hi, I'm agree with Mike.

+1 for an example like https://github.com/addyosmani/todomvc 

Best regards,

Ricardo.

[Atanas Korchev]

Hi,

 As far as I see there is already a Backbone application: https://github.com/addyosmani/todomvc/tree/master/architecture-examples/backbone 

How exactly would you like Kendo UI to be integrated there?

Regards,
Atanas Korchev
the Telerik team

[Benjamin]

Hallo out there,

I'm rather new to Kendo UI and Backbone so I'm not able to answer Antanas question properly.
But maybe I can descripe my problem and you'll be able get an idea about that.

We have a project with jQuery Mobile and backbone.js.
Our router delegates to the view and with a template + data a proper result will be generate. After we have done this we say jQuery mobile that we are done and the page will be displayed.

As far as I've seen Kendo handles navigation events on its own and you would connect data within data-binding.
So what if the content page is not available during link click?

Would it be possible to handle click events by ourself (backbone) and fire some ("we are ready Kendo, please do transformation and so on") event?

Maybe our approach is not the best, so I would also be glad to hear how to use backbone structure and routing within Kendo.

Thank you

 

[Alexis]

Any information with regards to Kendo UI and Backbone.js? 

I'm creating an application similar to an POS ( point of sale ) and i would like to do it using kendo UI grid and Backbone. I would like to ask if  this is possible. and how would it be with regards on the grid part. Thanks

[Atanas Korchev]

Hello,

 I just created a sample project how to integrate Kendo UI with BackboneJS. You can find it here: https://github.com/telerik/kendo-backbone 

Regards,
Atanas Korchev
the Telerik team

[Alexis]

I would like to include your kendo.backbone.js on my project. I'm using backbone, requirejs and kendoui. How would i do it? Any ideas?

[Atanas Korchev]

Hi,

 The linked github project shows how. Check https://github.com/telerik/kendo-backbone/blob/master/index.html 

All the best,
Atanas Korchev
the Telerik team

[Bobby]

I don't think the code works properly. If you add the "save" method on the grid, you will notice it only is called once. It is never called afterwards, even though you create new records or change an existing record. 

The reason why this occurs is in the Observable class. the bind function of Observable seems to unbind the handler. Not sure why this is being done. Can someone please explain?

Commenting out the unbind call makes the "save" method on the grid work properly. 

[Atanas Korchev]

Hi Bobby,

 I am not sure what you mean. Please clarify. For example what is the "save method of the grid"?

Regards,
Atanas Korchev
the Telerik team

[Bobby]

Sorry for being unclear.

I did some further investigating and it seems like the code does not work if you change the script section to

$("#grid").kendoGrid({

    editable: true,

    toolbar: ["create"],

    columns: ["ProductID", "Name", { command: "destroy" }],

    dataSource: {

        schema: {

            model: ProductWrapper

        },

        data: new ProductCollectionWrapper(products)

    }

});

 

this.grid = $('#grid');

this.kendoGrid = this.grid.data('kendoGrid');

this.kendoGrid.bind('save', this.save, this);

this.kendoGrid.bind('remove', this.remove, this);

 

function save() {

    console.log("Save entry called");

}

function remove() {

    console.log("Delete entry called");

}

The problem is with the Observable class that I mentioned. Look at Line: 96 in kendo.all.js v2012.1.515 (It is even present for newer versions of kendo.all.js, I tested)


However, if you add the save/remove method in the grid definition, then it works

$("#grid").kendoGrid({

    editable: true,

    toolbar: ["create"],

    columns: ["ProductID", "Name", { command: "destroy" }],

    dataSource: {

        schema: {

            model: ProductWrapper

        },

        data: new ProductCollectionWrapper(products)

    },

    save: function (e) { console.log("Save entry called"); },

    remove: function (e) { console.log("Delete entry called"); }

});

Does bind act differently? I used bind cause I read the Documentation for savechanges on the grid. 

// get a reference to the grid

var grid = $("#grid").data("kendoGrid");

// bind to the saveChanges event

grid.bind("saveChanges", function(e) {

    // handle event

}

[Atanas Korchev]

Hello,

 The proper way to use the bind method is this:

this.kendoGrid.bind('save', save); 

The bind method has two arguments - name of the event and the function which handles it.

Regards,
Atanas Korchev
the Telerik team

[Paul]

Comment deleted