Kendo UI + Backbone.js

Thread is closed for posting
27 posts, 0 answers
  1. Mike
    Mike avatar
    14 posts
    Member since:
    Sep 2011

    Posted 22 Sep 2011 Link to this post

    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





  2. RainerAtSpirit
    RainerAtSpirit avatar
    3 posts
    Member since:
    Jul 2009

    Posted 26 Sep 2011 Link to this post

    +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

  3. Sebastian
    Admin
    Sebastian avatar
    9801 posts
    Member since:
    Sep 2012

    Posted 27 Sep 2011 Link to this post

    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!

  4. Sam
    Sam avatar
    6 posts
    Member since:
    Oct 2010

    Posted 07 Dec 2011 Link to this post

    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

  5. Sam
    Sam avatar
    6 posts
    Member since:
    Oct 2010

    Posted 07 Dec 2011 Link to this post

    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

  6. Sam
    Sam avatar
    6 posts
    Member since:
    Oct 2010

    Posted 07 Dec 2011 Link to this post

    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

  7. Sam
    Sam avatar
    6 posts
    Member since:
    Oct 2010

    Posted 07 Dec 2011 Link to this post

    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

  8. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8221 posts
    Member since:
    Sep 2012

    Posted 08 Dec 2011 Link to this post

    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!

  9. Christian
    Christian avatar
    24 posts
    Member since:
    Sep 2008

    Posted 23 Dec 2011 Link to this post

    Atanas,

    has this blog post wrt Backbone  already been published?

    Thanks.

  10. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8221 posts
    Member since:
    Sep 2012

    Posted 26 Dec 2011 Link to this post

    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!

  11. Nagendra
    Nagendra avatar
    1 posts
    Member since:
    Mar 2011

    Posted 13 Jan 2012 Link to this post

    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 ?

  12. briankb
    briankb avatar
    88 posts
    Member since:
    Feb 2004

    Posted 12 Feb 2012 Link to this post

    @Atanas,

    Any updates on examples using Backbone.js?

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

  13. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8221 posts
    Member since:
    Sep 2012

    Posted 13 Feb 2012 Link to this post

    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!

  14. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8221 posts
    Member since:
    Sep 2012

    Posted 13 Feb 2012 Link to this post

    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!

  15. RainerAtSpirit
    RainerAtSpirit avatar
    3 posts
    Member since:
    Jul 2009

    Posted 18 Feb 2012 Link to this post

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

  16. ricardo castro
    ricardo castro avatar
    1 posts
    Member since:
    Apr 2006

    Posted 25 Feb 2012 Link to this post

    Hi, I'm agree with Mike.

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

    Best regards,

    Ricardo.

  17. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8221 posts
    Member since:
    Sep 2012

    Posted 27 Feb 2012 Link to this post

    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!

  18. Benjamin
    Benjamin avatar
    1 posts
    Member since:
    Mar 2012

    Posted 16 Mar 2012 Link to this post

    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

     

  19. Alexis
    Alexis avatar
    5 posts
    Member since:
    Feb 2012

    Posted 23 Mar 2012 Link to this post

    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

  20. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8221 posts
    Member since:
    Sep 2012

    Posted 23 Mar 2012 Link to this post

    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!

  21. Alexis
    Alexis avatar
    5 posts
    Member since:
    Feb 2012

    Posted 26 Mar 2012 Link to this post

    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?

  22. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8221 posts
    Member since:
    Sep 2012

    Posted 27 Mar 2012 Link to this post

    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!

  23. Bobby
    Bobby avatar
    3 posts
    Member since:
    May 2012

    Posted 07 Sep 2012 Link to this post

    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. 

  24. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8221 posts
    Member since:
    Sep 2012

    Posted 10 Sep 2012 Link to this post

    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!

  25. Bobby
    Bobby avatar
    3 posts
    Member since:
    May 2012

    Posted 10 Sep 2012 Link to this post

    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
    }

  26. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8221 posts
    Member since:
    Sep 2012

    Posted 10 Sep 2012 Link to this post

    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!

  27. Paul
    Paul avatar
    1 posts
    Member since:
    Feb 2013

    Posted 12 Feb 2013 Link to this post

    Comment deleted

Back to Top