Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 06 Aug 2026 07:24 by ADMIN
Bradley
Created on: 11 Mar 2024 15:02
Category: Grid
Type: Bug Report
1
Aggregates in Grid's footer shift after editing a cell if a column is hidden

Bug report

In a Grid with a hidden column, the aggregates in the footer shift to the right if you edit a cell.

Regression introduced with 2023.2.829

Reproduction of the problem

  1. Open this Dojo example - https://dojo.telerik.com/EXOmOcAs
  2. Scroll to the bottom to see the footer
  3. Edit a cell

Current behavior

The footer cells shift to the right.

Expected/desired behavior

The footer cells shouldn't shift to the right after updating a cell.

Environment

  • Kendo UI version: 2024.1.130
  • Browser: [all]
1 comment
ADMIN
Rumen
Posted on: 06 Aug 2026 07:24

Hi Bradley,

Here is some information why this happens and how to avoid it.

Why this happens
The Grid always rebuilds its footer row from a template function (footerTemplate) that contains a cell for every column, including hidden ones. When a column is hidden/shown, the Grid doesn't regenerate that template but instead it toggles a display style directly on the existing footer <td> elements already in the DOM.

Your change handler calls grid.footerTemplate(...) and swaps in a brand-new <tr> via replaceWith(...). That new row has no knowledge of which column is currently hidden (that state only existed on the DOM nodes you just discarded), so the new footer renders one extra visible cell shifting every subsequent aggregate one column to the left.

Solution
Instead of replacing the whole <tr>, update the existing footer cells' content in place, by index, so any hidden/visible state already applied to those DOM cells is preserved:
change: function (e) {
    if (e.field && e.action == "itemchange") {
        var grid = $("#grid").data("kendoGrid");
        var aggregates = this.aggregates();

        var newRow = $(grid.footerTemplate(aggregates));
        var newCells = newRow.children("td");
        var currentCells = grid.footer.find(".k-footer-template>td");

        newCells.each(function (index) {
            var currentCell = currentCells.eq(index);
            if (currentCell.length) {
                currentCell.html($(this).html());
            }
        });
    }
}

This computes the new aggregate markup the same way as before, but instead of swapping DOM nodes, it only updates the innerHTML of each existing cell so the hidden-column display state stays intact and the alignment issue disappears, even when columns are hidden/shown before or after an edit.

You can give the solution a try in the following dojo https://dojo.telerik.com/AIcoVSAL. Hiding a column and then editing a cell keeps the footer aggregates correctly aligned under their respective columns, with no shift.

Regards,
Rumen
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Create an account Log In
View
Type
Status
Category