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
Create The Grid
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.
Add Some Awesome Data
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.
object creates a new Kendo UI data source and assigns it as the data source for the grid.
object defines how we will communicate with our remote data source.
is pretty self explanatory.
tells the data source the format that we expect the response to be in. In this case, it's JSOP. JSONP is a way of returning json from a cross-browser request without getting blocked. It's also a way to get malicious code injected into your page. It basically wraps the json response in a callback to fool the browser. Don't do it unless you fully trust your data. I think the fine folks at Instagram are quite trustworthy enough for this demo!
tells the grid what the schema of our response is. Or you could think of it as the "json element to repeat on". Kendo UI will look for this element to represent each row in the grid. Instagram returns an array of "data" elements so our repeating item is just "data".
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.
Make it pretty. Well. Prettier.
A Note About Templates
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.