Premium forums

Kendo UI + Backbone.js Cancel

• Mike

  
  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
  
  
  
  
  
  
• RainerAtSpirit

  
  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
• Sebastian

  
  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!
• Sam

  
  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
• Sam

  
  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
• Sam

  
  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
• Sam

  
  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
• Atanas Korchev

  
  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!
• Christian

  
  23 Dec 2011 (Link to this post)

  Atanas,
  
  has this blog post wrt Backbone  already been published?
  
  Thanks.
• Atanas Korchev

  
  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!
• Nagendra

  
  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 ?

  • Error.png
  • Error.png
• briankb

  
  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.
• Atanas Korchev

  
  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!
• Atanas Korchev

  
  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!
• RainerAtSpirit

  
  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 ;-).
• ricardo castro

  
  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.
  
  
• Atanas Korchev

  
  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!
• Benjamin

  
  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
  
   
• Alexis

  
  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
• Atanas Korchev

  
  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!
• Alexis

  
  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?
• Atanas Korchev

  
  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!
• Bobby

  
  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. 
• Atanas Korchev

  
  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!
• Bobby

  
  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

  }
• Atanas Korchev

  
  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!
• Paul

  
  12 Feb (Link to this post)

  Comment deleted