This is a migrated thread and some comments may be shown as answers.

Kendo UI + Backbone.js

26 Answers 818 Views
Integration with other JS libraries
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Mike
Top achievements
Rank 1
Mike asked on 23 Sep 2011, 01:03 AM
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





26 Answers, 1 is accepted

Sort by
0
RainerAtSpirit
Top achievements
Rank 1
answered on 26 Sep 2011, 08:42 PM
+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
0
Sebastian
Telerik team
answered on 27 Sep 2011, 12:48 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sam
Top achievements
Rank 1
answered on 07 Dec 2011, 07:59 PM
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
0
Sam
Top achievements
Rank 1
answered on 07 Dec 2011, 07:59 PM
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
0
Sam
Top achievements
Rank 1
answered on 07 Dec 2011, 08:01 PM
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
0
Sam
Top achievements
Rank 1
answered on 07 Dec 2011, 08:01 PM
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
0
Atanas Korchev
Telerik team
answered on 08 Dec 2011, 09:37 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Christian
Top achievements
Rank 1
Iron
answered on 23 Dec 2011, 07:57 PM
Atanas,

has this blog post wrt Backbone  already been published?

Thanks.
0
Atanas Korchev
Telerik team
answered on 26 Dec 2011, 09:09 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Nagendra
Top achievements
Rank 1
answered on 13 Jan 2012, 09:42 PM
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 ?
0
briankb
Top achievements
Rank 2
answered on 12 Feb 2012, 07:51 AM
@Atanas,

Any updates on examples using Backbone.js?

Seems pretty important to support Backbone.js as its popularity is growing fast and furious.
0
Atanas Korchev
Telerik team
answered on 13 Feb 2012, 08:57 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Atanas Korchev
Telerik team
answered on 13 Feb 2012, 08:57 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
RainerAtSpirit
Top achievements
Rank 1
answered on 18 Feb 2012, 11:36 PM
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 ;-).
0
ricardo castro
Top achievements
Rank 1
answered on 25 Feb 2012, 06:19 AM
Hi, I'm agree with Mike.

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

Best regards,

Ricardo.

0
Atanas Korchev
Telerik team
answered on 27 Feb 2012, 08:55 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Benjamin
Top achievements
Rank 1
answered on 16 Mar 2012, 04:01 PM
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

 
0
Alexis
Top achievements
Rank 1
answered on 23 Mar 2012, 10:06 AM
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
0
Atanas Korchev
Telerik team
answered on 23 Mar 2012, 03:53 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Alexis
Top achievements
Rank 1
answered on 27 Mar 2012, 04:43 AM
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?
0
Atanas Korchev
Telerik team
answered on 27 Mar 2012, 07:39 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Bobby
Top achievements
Rank 1
answered on 07 Sep 2012, 10:05 PM
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. 
0
Atanas Korchev
Telerik team
answered on 10 Sep 2012, 07:02 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Bobby
Top achievements
Rank 1
answered on 10 Sep 2012, 01:35 PM
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
}
0
Atanas Korchev
Telerik team
answered on 10 Sep 2012, 01:40 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Paul
Top achievements
Rank 1
answered on 12 Feb 2013, 09:43 PM
Comment deleted
Tags
Integration with other JS libraries
Asked by
Mike
Top achievements
Rank 1
Answers by
RainerAtSpirit
Top achievements
Rank 1
Sebastian
Telerik team
Sam
Top achievements
Rank 1
Atanas Korchev
Telerik team
Christian
Top achievements
Rank 1
Iron
Nagendra
Top achievements
Rank 1
briankb
Top achievements
Rank 2
ricardo castro
Top achievements
Rank 1
Benjamin
Top achievements
Rank 1
Alexis
Top achievements
Rank 1
Bobby
Top achievements
Rank 1
Paul
Top achievements
Rank 1
Share this question
or