KendoUI Grid multi-column headers: now you can!


Many interesting new features in KendoUI Q3 2014 and many related with KendoUI Grid. I’ll be writing about some of them in the next posts including:

  1. Export to PDF
  2. Export to CSV
  3. New TreeList widget (despite this is a tree, it might be considered as nested grids)
  4. and the first of these post series multi-column headers

KendoUI Grid Multi-Column headers

This is something that has been requested for a long time and is the capacity of having multiple columns in a Grid under the same title or having multiple levels of titles. The same thing that you do in Excel when you merge several header cells.

Excel with merged header cells
Excel with merged header cells

In KendoUI, you had to live without merging cells and get one level headers (one header for each column).

KendoUI Grid with simple headers
KendoUI Grid with simple headers

But with KendoUI Q3 2014, you can also get the same effect by defining inside a column an array of columns. An idea really neat and transparent for previous definition syntax (backwards compatible).

Defining multi-columns

The definition of simple headers is an array of columns:

columns : [
    { field: "FirstName", width: 90, title: "First Name" },
    { field: "LastName", width: 200, title: "Last Name" },
    { field: "City", width: 200 }
]

What KendoUI did is extend the definition with one new attribute called columns that can be an array of columns.

columns : [
    {
        title: "Details",
        columns: [
            { field: "FirstName", width: 90, title: "First Name" },
            { field: "LastName", width: 200, title: "Last Name" }
        ]
    },
    { field: "City", width: 200 }
]

With this simple extension and minimum code change, I’ve been able to group FirstName and LastName columns under a Details header getting:

KendoUI Grid with merged headers
KendoUI Grid with merged headers

Really simple and very userful: Thanks Telerik!

Note: As you can see the structure of the data in the DataSource is the same than for simple headers, one question is the presentation where First and Last Name are grouped under Details and another is the Data Model where we do not have such grouping.

Advertisements

2 thoughts on “KendoUI Grid multi-column headers: now you can!

  1. hello
    how to set field value in kendo grid column header using mvvm grid in javascript?
    in grid columns i used template only.

    for ex:
    ———————————————-
    table:40 order:00035
    ———————————————-
    3 french fries
    1 pizza
    2 icecream
    ———————————————-

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