New to Kendo UI for jQuery? Download free 30-day trial

Merge Cells in the Grid Footer

Environment

Product Version 2017.1 117
Product Progress® Kendo UI® Grid for jQuery

Description

How can I merge cells in the footer of the Grid?

Solution

For the current version, it is not possible to merge cells out of the box. However, you cans till work around this issue.

  1. Add the desired content in a cell by using the footerTemplate configuration.
  2. Set the overflow: visible; and white-space: nowrap; styles for this cell.
  3. Remove the borders from the desired cells by using CSS.

    <style>
        .k-footer-template td:nth-child(1) {
            overflow: visible;
            white-space: nowrap;
        }
    
        .k-footer-template td:nth-child(1),
        .k-footer-template td:nth-child(2),
        .k-footer-template td:nth-child(3) {
            border-width: 0;
        }
    </style>
    
    <div id="grid"></div>
    <script>
        $("#grid").kendoGrid({
            columns: [{
                    field: "category",
                    footerTemplate: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis turpis accumsan, porta orci et, faucibus dui."
                },
                {
                    field: "name"
                },
                {
                    field: "price"
                }
            ],
            dataSource: {
                data: [{
                        category: "Beverages",
                        name: "Chai",
                        price: 18
                    },
                    {
                        category: "Beverages",
                        name: "Chang",
                        price: 19
                    },
                    {
                        category: "Seafood",
                        name: "Konbu",
                        price: 6
                    }
                ]
            }
        });
    </script>
    
In this article