[Solved] Locked column duplicates every time grid is show after being hidden

[Steve]

I have a grid which has the first column locked.  After hiding the grid when I show it the first column is duplicated.  Every time I continue to call show on the hidden grid another column is added.

    $("#HCPCS_Management").click(function() {
        hideAllDivs();
        $("#HcpcsMgmt").show();
        onHcpcsManagementClick(this);
    });

I have attached a couple of files:

HcpcsDuplicateActionsColumn1.png
     This file shows the correct grid after the first show().

HcpcsDuplicateActionsColumn1.png
     This file shows the bad grid after the 2nd show().

[Steve]

Followup posting...

I just download the lastest Kendo UI Professional v2014.3.1119.   The "Actions" column is no longer being duplicated when the hidden grid is shown.  However, the grid's header is totally messed up.  See attached file: HcpcsDuplicateActionsColumn3.png.

Recall from my original posting that the column with the "Actions" heading is locked.  When it is not locked all works well.

[Dimo]

Hi Steve,

The third attachment is missing, so I am not able to see the header issue. If calling grid.resize(true) after showing the Grid does not fix the layout, please provide an example.

http://docs.telerik.com/kendo-ui/web/grid/appearance#initializing-the-grid-inside-a-hidden-container

Regards,
Dimo
Telerik

 

 

[Steve]

Doing a resize did not change anything.  Still getting the following stack dump after showing a grid that is within a hidden div.  The only occurs when the first column is locked  (locked: true).

 Uncaught TypeError: Cannot read property 'style' of undefinedkendo.all.min.js:28 Jkendo.all.min.js:28 ut.ui.DataBoundWidget.extend._syncLockedHeaderHeightkendo.all.min.js:30 ut.ui.DataBoundWidget.extend._appendLockedColumnHeaderkendo.all.min.js:30 ut.ui.DataBoundWidget.extend._theadkendo.all.min.js:28 ut.ui.DataBoundWidget.extend.initkendo.all.min.js:10 (anonymous function)jquery-1.11.1.min.js:2 m.extend.eachjquery-1.11.1.min.js:2 m.fn.m.eachkendo.all.min.js:10 mt.plugin.e.fn.(anonymous function)hcpcsMgmt.js:4 onHcpcsManagementClickcatalogMgmtHome.js:44 (anonymous function)jquery-1.11.1.min.js:3 m.event.dispatchjquery-1.11.1.min.js:3 m.event.add.r.handle

[Steve]

I have attached a zip file which contains the source code for our problematic grid.  Every time we show the hidden div that contains the grid, it messes up the header of the grid.  The very first time the grid is displayed it's OK.  But if we hide the containing div then show it, the problem appears.  We have to completely refresh the page in order to get the grid back to normal.

Here's the code to hide and show the div containing the grid.

$("#HCPCS_Management").click(function() {
        hideAllDivs();
        $("#HcpcsMgmt").show();
        onHcpcsManagementClick(this);
});

[Dimo]

Hello Steve,

We are not aware of the reported Javascript error and I am not able to reproduce it. Can you provide an example? It will also help me track down the cause of the layout problem. Generally, if the Grid is rebound while invisible, its layout will break, but this should be fixed if you execute gridObject.resize(true) after the widget is displayed back.

Regards,
Dimo
Telerik