KendoUI Tutorial on Grid Table


With Kendo UI grid is pretty easy creating a table for representing your data but you might get in troubles when trying to customize it for your own needs.

When I started using Kendo UI, I was pretty surprised for the fact that it has a good set of widgets and having a good and exhaustive documentation, there were some basic questions that were not easy to do or, at least, I could not find how to do them.

Goal

Define a Grid for showing some companies stock prices, the amount of shares and the total price.

Some particular requirements are:

  • Use decimal and currency representation for prices and amount of shares.
  • We want to be able to add stock (ticks), its price and want the grid to automatically compute the total value.
  • We want to be able to remove stock (ticks).
  • We want to be able to undo changes if we have not saved them.
  • We (very important) want to do all previous action in memory (locally) and do not send changes to the server every single action.
  • Want to show a toolbar with  icons and no text (this is something that I couldn’t find how to officially do it).
  • The data source ia a JSON structure and we will edit it in memory (no server involved) being able to
    • add entries,
    • remove entries,
    • cancel changes
    • and save changes.

So it should look  like this:

If you want to see it working, just go to fiddle, otherwise keep reading and I will show you and explain each step.

JSON Data Source

var entries = [
    { "symbol":"AAPL", "price":665.24, "shares":100 },
    { "symbol":"AMZN", "price":248.27, "shares":100 },
    { "symbol":"IBM", "price":194.85, "shares":100 },
    { "symbol":"CSCO", "price":19.08, "shares":100 },
    { "symbol":"MSFT", "price":30.82, "shares":100 },
    { "symbol":"INTC", "price":24.83, "shares":100 },
    { "symbol":"QCOM", "price":61.46, "shares":100 },
    { "symbol":"ORCL", "price":31.65, "shares":100 },
    { "symbol":"HPQ", "price":16.88, "shares":100 },
    { "symbol":"CRM", "price":145.18, "shares":100 }
];

Basic Grid

Following KendoUI Grid widget documentation

The HTML is as simple as:

<div id="stocks_tbl"></div>

And the JavaScript:

$("#stocks_tbl").kendoGrid({
    dataSource:{
        data:entries,
        pageSize:10
    },
    navigatable:true,
    pageable:{
        input:true,
        numeric:true
    }
}).data("kendoGrid");

Adding Custom Headers

But in the previous step we have as header of the table the name of the fields. Lets customize it a little by adding a columns field definition to kendoGrid initialization.

$("#stocks_tbl").kendoGrid({
    dataSource:{
        data:entries,
        pageSize:10
    },
    columns:[
        { field:"symbol", title:"Symbol" },
        { field:"price", title:"Price"},
        { field:"shares", title:"Shares"},
    ],
    navigatable:true,
    pageable:{
        input:true,
        numeric:true
    }
}).data("kendoGrid");

Now, this looks like:

Customizing grid columns format

We want to display Price and Shares as currency in dollars and number, both with two decimals. There are many ways of customizing data/rows but here we will use a very simple one with columns format option.

$("#stocks_tbl").kendoGrid({
    dataSource:{
        data:entries,
        pageSize:10
    },
    columns:[
        { field:"symbol", title:"Symbol" },
        { field:"price", title:"Price", format:"{0:c2}" },
        { field:"shares", title:"Shares", format:"{0:n2}" },
    ],    navigatable:true,
    pageable:{
        input:true,
        numeric:true
    }
}).data("kendoGrid");

Getting…

Aligning columns

Not enough… being number, we want to have them aligned to the right.
Here, I’m going to use attributes field in columns that I cannot find it documented but it works…
Start defining a CSS style:

.ob-right {
    text-align: right;
}

And then add attributes to columns definitions.

$("#stocks_tbl").kendoGrid({
    dataSource:{
        data:entries,
        pageSize:10
    },
    columns:[
        { field:"symbol", title:"Symbol" },
        { field:"price", title:"Price", attributes:{class:"ob-right"}, format:"{0:c2}" },
        { field:"shares", title:"Shares", attributes:{class:"ob-right"}, format:"{0:n2}" }
    ],
    editable: true,
    navigatable:true,
    pageable:{
        input:true,
        numeric:true
    }
}).data("kendoGrid");

Getting…

Adding calculated column

There is one missing column corresponding to the total of multiplying price by shares.
Again, there are multiple ways of getting it, one very simple is defining a function in the model that computes it but we will do it in a different way because we need to be able of editing price and shares and get it updated.

First we define a kendo.data.DataSource that provides the data that we have in entries and adds the total field. This is done in transport.read function that is invoked when done reading data.

var stocksDataSource = new kendo.data.DataSource({
    transport:{
        read:function (options) {
            for (var i = 0; i < entries.length; i++) {
                entries[i].total = entries[i].price * entries[i].shares;
            }
            return options.success(entries);
        }
    },
    schema:{
        model:{
            fields:{
                symbol:{ type:"string" },
                price:{ type:"number" },
                shares:{ type:"number" },
                total:{ type:"number" }
            }
        }
    },
    pageSize:10
});

Then we use stocksDataSource in kendoGrid initialization.

$("#stocks_tbl").kendoGrid({
    dataSource:stocksDataSource,
    columns:[
        { field:"symbol", title:"Symbol" },
        { field:"price", title:"Price", attributes:{class:"ob-right"}, format:"{0:c2}" },
        { field:"shares", title:"Shares", attributes:{class:"ob-right"}, format:"{0:n2}" },
        { field:"total", title:"Total", attributes:{class:"ob-right"}, format:"{0:c2}" }
    ],
    editable:true,
    navigatable:true,
    pageable:{
        input:true,
        numeric:true
    }
}).data("kendoGrid");

Getting…

In the second part of this tutorial I will show you how to add custom actions to the toolbar and put just a button with an icon (without text). These actions will implement methods for creating, removing and updating rows in memory allowing to save changes or revert to latest saved point.

Advertisements

8 thoughts on “KendoUI Tutorial on Grid Table

  1. Just wondering if you have any idea on how to make sure that only integers are allowed in the numeric fields of the grid. Meaning if a user tries to enters a decimal its ignored similarly to the text is completely ignored in the numeric fields.

  2. Hello! I am new to Kendo Environment. I was searching for a replacement of older ajax & asp.net controls. First I found Radcontrols. Now I am exploring KenbdoUI. Now I have a doubt. How can I add a SEQUEL SERVER database data as a datasource to Kendo Grid. I have surfed and read many blogs. But everything was vain. Most replies states JSON datasource, ODatasource which makes me more confused. It would help me alot if you guide me with a simple application that contains a Kendo Grid retriving data from SEQUEL server and displaying it.

    • Hi,
      Kendo UI is about the User Interface, how to present data. It does not say nothing about how the data is stored in the server, they don’t care if it is MySQL, SQL Server, Plain Data Files or Document Oriented Data Stores as Documentum, Couchbase, CouchDB,…
      Now, you have two pieces: Storage (Model), Presentation (View). This is where Kendo UI “imposes” JSON or ODataSource as way for transfer data.
      Kendo UI runs on the browser.
      SQL Server in the server (back-end).
      I hope that this clarifies a little why you hear about JSON but not about what you have in the server or how to store data.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s