How to add complex headers to a Kendo grid using simple jQuery javascript

I was trolling through the horrible documentation provided by Telerik for the kendo grid. I needed to create a complex header. Basically, a two row header so that I could group columns in a visually meaningful way.

simple example:

I spent far too much time reading how it couldn’t be done. A light bulb finally hit me, this is html. Yeah, flexibility abounds if you can be clever. I simply opened up the old browser developer tool and looked at the generated html for the grid.I then realized, this is a simple table, why not just inject another table row.

So, here is the easy way to add another row to your kendo grid and make a nice complex header. You can use this technique to go to town on adding additional features to your grid as well.

//create grid.

function BuildMyActionsList(tasks) {
            var list = $("#tasksContainer");
            list.empty();

            list.kendoGrid(
                {
                    dataSource: {
                        data: tasks,
                        schema: {
                            model: {
                                id: "Id",
                                fields: {
                                    Name: { type: "string" },                                    
                                    LessThanEGAs: { type: "number" },
                                    GreaterThanEGAs: { type: "number" },
                                    LessThanRisks: { type: "number" },
                                    GreaterThanRisks: { type: "number" },
                                    LessThanCNs: { type: "number" },
                                    GreaterThanCNs: { type: "number" },                                    
                                    ReportSignDate: { type: "date" }
                                }
                            }
                        },
                        //     pageSize: 20
                    },
                    dataBound: addExtraStylingToTasksGrid,
                    filterable: true,
                    scrollable: true,
                    sortable: true,
                    columns: [
                        {
                            field: "Name", title: "Engagement", width: "175px",
                            filterable: {
                                extra: false,
                                operators: {
                                    strings: {
                                        startswith: "Starts with",
                                        eq: "Is equal to",
                                        neq: "Is not equal to"
                                    }
                                }
                            }
                        },                        
                        {
                            field: "LessThanEGAs", title: "EGA's", width: "80px"
                        },
                        {
                            field: "GreaterThanEGAs", title: "CN's", width: "80px"
                        },
                        {
                            field: "LessThanRisks", title: "Risk's", width: "80px"
                        },
                        {
                            field: "GreaterThanRisks", title: "EGA's", width: "80px"
                        },
                        {
                            field: "LessThanCNs", title: "CN's", width: "80px"
                        },
                        {
                            field: "GreaterThanCNs", title: "Risk's", width: "80px"
                        },
                        {
                            field: "ReportSignDate", title: "Report Signing", width: "125px", filterable: false                            
                        }
                    ]
                });

            list.find("thead").first().prepend("<tr><th></th><th class='lessThanDaysGrouping' colspan='3'>&lt;= 2 Days</th><th  class='greaterThanDaysGrouping' colspan='3'>&gt; 7 Days</th><th></th></tr>");

        }

Notice , the line at the end. This is where we search the table for the header and then prepend the row. Just make sure your new row definition aligns with the same column structure as your table. If you need help with this, search on html tables on google.

Line of code that does the magic:

  list.find("thead").first().prepend("<tr><th></th><th class='lessThanDaysGrouping' colspan='3'>&lt;= 2 Days</th><th  class='greaterThanDaysGrouping' colspan='3'>&gt; 7 Days</th><th></th></tr>");

 

Happy Coding!

 

5 Replies to “How to add complex headers to a Kendo grid using simple jQuery javascript”

  1. Thanks for the solution. Everything works fine except the column resizing. It only allows resizing on the top header row. Any ideas?

Leave a Reply

Your email address will not be published. Required fields are marked *