Love them or hate them, grids are a staple of user interfaces. While jQuery has made UI engineering remarkably easier on most of us, the grid is still a very iffy scenario when designing for the web.
Kendo UI Grid
makes this much easier on us. With to the rapid templating engine that is included with Kendo UI, and the built-in datasource, we can get up and running with our grid very quickly.
To start with, we need a data source. Due to my work on
recently, I have become quite familiar with the Instagram API. We can use their "Popular" feeds endpoint without having to go through an authorization process. We still need a client_id, but it's easy to sign up for one of those at
First we need a grid on our page. A simple table describing the column headers will do just fine. This makes sense. If you were making a grid yourself, you would start with a table.
Now we need to make our div into a grid. First we need to download the Kendo UI Beta
or we can use the static CDN references.
We are going to need the kendo.common.min.css
, the kendo.kendo.min.css
as far as stylesheets go. We also need jQuery because Kendo UI is built on top of the jQuery platform. The last thing we need is the
reference. It's important to include your jQuery reference first as it is a dependency for Kendo UI.
For the sake of simplicity, here are all the script tags as CDN references that you can just copy and paste.
We can turn the div into a grid in the document.ready() jQuery function.
It's not much to look at, so lets add some data to it. Kendo UI provides a very powerful
data binding framework
we can use right inline with our grid. We simply need to define the data source of the grid and supply our remote endpoint. Kendo UI is still in beta so some of the naming may change slightly, but I'll explain what each one of these attributes / objects does.
Now if you run the above example (if you haven't already), you will see a grid with nothing in it. That's because we haven't told the grid what to render in each column. We can do this by simply specifying which element off the "data" tag in the Instagram response we want to show in that particular column. I have specified the "field" attribute in the columns array so now our grid will display the actual data from our response.
Now we have data, but we have several problems. We have the URL of an image in our image column and the other columns are showing arrays of objects because they are. We need to tell the grid how we want each column displayed. We can do that through a simple inline template for the image. Now our image shows up just fine.
If you check out the "html" tab on the previous fiddle, you can see the templating syntax for
Kendo UI Templates
I hope you were able to see the power of the Kendo UI
Download the toolkit
, or use the CDN references. Make sure you also hit up the
if you have any questions or suggestions for Kendo UI.
Burke Holland is a web developer living in Nashville, TN and was the Director of Developer Relations at Progress. He enjoys working with and meeting developers who are building mobile apps with jQuery / HTML5 and loves to hack on social API's. Burke worked for Progress as a Developer Advocate focusing on Kendo UI.