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>