I've blogged about making Kendo UI's Web controls work with Backbone.js, and the basics of how to use a Backbone.Collection as a Kendo UI DataSource. Brandon also announced the new Kendo UI Labs with the kendo-backbone repository as part of the new labs organization on Github. And as part of the new labs and this repository, I've started moving my previous code samples over there, writing tests around the functionality, and building samples that use the integration points.

Working On The Integration Code

The first thing I did when moving the code in to this repository is set up a proper build and test process, add some documentation and a readme, and produce a release with a more solid code base for the kendo.Backbone.Datasource.

The test suite showed me a few areas where the code was not working correctly, and also allows me to have confidence in moving forward with new featues. If I break anything, my tests will hopefully fail and show me what I broke.

You can easily run the tests with the help of NodeJS and GruntJS, which means it's also easy to contribute features and changes, and know if you broke anything in the process.

If you've never used NodeJS or GruntJS - don't worry. It really is simple. You'll need to install NodeJS first, and there are great instructions on how to do this on the NodeJS website. In fact, you shouldn't have to do anything more than download the installer and run it. It's just that easy - Windows, Mac or Linux.

Once you have NodeJS installed, open a command prompt or terminal window and run these command from the project's root folder:

Install Grunt And NPM Packages

npm install -g grunt-cli
npm install

This will install all of the dependencies for the project, including the GruntJS command line tool, the Jasmine test framework and everything else that is needed.

Once you have that installed, you can run the test suite by issuing this command from the same command prompt / terminal window:

grunt server

Then open http://localhost:8888/_SpecRunner.html in your browser, and you should see all of the tests for the KendoUI-Backbone integration projects.

Now you can modify the specs (located in the specs folder) and refresh your browser to see if they still pass, or if they fail!

The CRUD Of Memes

I've also put together a sample application to show off some of the features and capabilities of the integration code. At this point, there is only a meme Grid that allows you to add, edit and delete images in the grid. This is a great demo, though, as it shows how simple it is to get a Backbone.Collection in to a Kendo UI Grid with the kendo.Backbone.DataSource.

At a minimum, you only need the collection instance and the kendo.Backbone.DataSource specified with a few configuration details for the grid:

Kendo UI Grid + Backbone.Collection

// Build a Backbone.Collection with a hard coded data set
var memeCollection = new Backbone.Collection([
  { id: 1, name: "spring cleaning", url: "/images/memes/28067008.jpg" },
  { id: 2, name: "like a boss", url: "/images/memes/CatLikeaBoss.jpg" },
  { id: 3, name: "infinite high five", url: "/images/memes/high-fives.gif" },
  // ...
]);

// Bind the Kendo UI Grid to the Backbone.Collection
$(".grid").kendoGrid({
  dataSource: new kendo.Backbone.DataSource({
    collection: memeCollection
  })
});

But to get something more useful, we can provide column names, CRUD buttons, a preview of the image in the grid, and a custom editor template that lets us preview the image when we are adding and editing the URL for the image.

The CRUD Of Memes

// Build a Backbone.Collection with a hard coded data set
var memeCollection = new Backbone.Collection([
  { id: 1, name: "spring cleaning", url: "/images/memes/28067008.jpg" },
  { id: 2, name: "like a boss", url: "/images/memes/CatLikeaBoss.jpg" },
  { id: 3, name: "infinite high five", url: "/images/memes/high-fives.gif" },
  // ...
]);

// Bind the Kendo UI Grid to the Backbone.Collection
$(".grid").kendoGrid({
  dataSource: new kendo.Backbone.DataSource({
    collection: memeCollection,
    schema: {
      model: {
        fields: {
          url: "string",
          name: "string",
          preview: "string"
        }
      }
    }
  }),

  columns: [
    {
      title: "Preview",
      editor: showImagePreview,
      template: "<img src='#= url #' width='100'>",
      field: "preview"
    },
    {
      title: "Name",
      field: "name",
    },
    {
      title: "URL",
      field: "url"
    },
    { command: ["edit", "destroy"] }
  ],
  toolbar: ["create"],
  editable: "popup"
});

function showImagePreview(container, options){
  var imagePreview = $("<img width='100' data-bind='attr: {src: url}'>");
  kendo.bind(imagePreview, options.model);
  container.append(imagePreview);
}

The result:

To see the sample app in all it's meme-tastic glory, you can run the code on your computer. Be sure you have installed NodeJS and run the npm install command outlined above. Then in a command prompt or terminal window, run this

node app.js

and open your browser to http://localhost:3000. You will be presented with the Kendo UI Backbone integration demos where you can find the Grid demo and play with the code to your heart's content.

A Roadmap Of Memes

While this is a good start, and it gets the Kendo UI Backbone integration project rolling, there is a lot of work left to be done. I already know that I need to add supprot for filtering, sorting and paging to the DataSource integration. There's also the Model and Collection MVVM wrappers that need some additional love and care. There's a lot of work to do, and having this core project structure and test suite in place will make it easier for others to contribute.

I'm hoping that even a moderate amount of use in real projects will help to flesh out a roadmap for the project - what we need to build, when we'll be able to get it done, etc.

If you're interested in helping out, please stop by the repository and dig in! Open an issue with an idea of what you want to see, or a code suggestion. Clone the repository to your machine and hack on the code to see if you can help build some of the features that you need. Any contributions that you can make - even if it's just using the integration project and providing feedback on what does or does not work - is greatly appreciated.

A Community Effort

One thing to note: the Kendo UI Backbone integration project is not officially supported by the Kendo UI engineering or support team. Opening a support ticket with Kendo UI or Telerik, for the Kendo UI Labs projects will result in the ticket being closed without resolution. This is a community supported effort, being spear-headed by a few Kendo UI team members. The goal is to create a collaborative environment where the larger community can be involved, and hopefully take ownership for features and support.

Lastly, be sure to read the contributing guidelines for the project, and for the Kendo UI Labs in general.


Burke Holland is the Director of Developer Relations at Telerik
About the Author

Burke Holland

Burke Holland is a web developer living in Nashville, TN and the Director of Developer Relations at Telerik. He enjoys working with and meeting developers who are building mobile apps with jQuery / HTML5 and loves to hack on social API's. Burke works for Telerik as a Developer Advocate focusing on Kendo UI.

Related Posts

Comments

Comments are disabled in preview mode.