Edit this page

Merge Cells in the Grid Footer

Environment

Product Version 2017.1 117
Product Progress Kendo UI Grid

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>
    
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy