Bug in hideColumn()

[Graeme]

I have finally tracked down a bug in  Grid.hideColumn() that has been troubling me for months.

if you call hideColumn() when you grid is not visible because the grid elements is 0 width or height, or otherwise not visible, the column will not be hidden, and the grid will be in an inconsistant state, with columns assuming other columns widths and other weird behavior.

This occurs for me when including a Grid in a Tab that has a fade in animation. If you programatically hide columns in the Grid on document load while the tab is still fading in, the grid will not be visible and hideColumn will fail.

This is caused by the use of the :visible custom jquery selector in the selector to find the grid column header or footer cell. 

from the JQuery documentation.

"Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero."

Even though the JQuery documentation states

"During animations that hide an element, the element is considered to be visible until the end of the animation. During animations to show an element, the element is considered to be visible at the start at the animation."

This does not appear to be the case, at least for a kendoui tab strip builder with ".Animation(a => a.Open(o => o.Fade(FadeDirection.In).Duration(200)));" set as the animation. I assume the above quote does not apply to elements that are hidden because of parent elements animations.

The fix for the issue is to avoid the :visible selector in the Grid.hideColumn() method and use a filter instead.

Change:

hideColumn: function(column) {
.
.
.
that.thead.find(">tr>th:not(.k-hierarchy-cell,.k-group-cell):visible").eq(columnIndex).hide();
            if (footer) {
                that._appendCols(footer.find("table:first"));
                footer.find(".k-footer-template>td:not(.k-hierarchy-cell,.k-group-cell):visible").eq(columnIndex).hide();
            }
.
.
.

to

that.thead.find(">tr>th:not(.k-hierarchy-cell,.k-group-cell)").filter(function () { return $(this).css("display") != "none"; })
                .eq(columnIndex).hide();
            if (footer) {
                that._appendCols(footer.find("table:first"));
                footer.find(".k-footer-template>td:not(.k-hierarchy-cell,.k-group-cell)").filter(function () { return $(this).css("display") != "none"; })
                    .eq(columnIndex).hide();
            }

[Nikolay Rusev]

Hello Graeme,

Thank you for reporting us this behavior. Unfortunately we weren't able to replicate it. Can you modify the following sample in order to demonstrate the behavior?

http://jsbin.com/izukej/2/edit

Regards,
Nikolay Rusev
the Telerik team

[Graeme]

(Fourth time lucky, I have being trying to post this response since Friday. I have just removed the packages from the attached VS solution and enabled package restore, and the upload (8MB) still fails.. I have uploaded the solution to Google Drive at:

https://docs.google.com/file/d/0B1foOYBJfsXvVzZyRUZwR3huT28/edit?usp=sharing

)



It appears that the issue only appears with remotely loaded tab content. I have attached a Visual Studio project that demonstrates the issue. You will notice that despite the hidecolumn(0) call on document load of the second tabs content, column 0 is still visible. Additionally further call to  hidecolumn will fail as the columns array on the grid is in an incosistent state.

[Nikolay Rusev]

Hello Graeme,

Here is what's recommended for such scenarios:

 - set hidden configuration of the column in the grid initialization

columns: [
{
 field: "foo",
 hidden: true,
 footerTemplate: "foo footer"
},
{
 field: "bar",
 footerTemplate: "bar footer"
}]

 - perform any initial manipulations on activate event of the TabStrip

$("#tabstrip").kendoTabStrip({
 activate: function (e) {
  var grid = $(e.contentElement).find(".k-grid");
  if (grid[0]) {
   grid.data("kendoGrid").hideColumn(0);
  }
 }
});

For more details take a look at the attached project.

Regards,
Nikolay Rusev
the Telerik team

[Graeme]

That would be a problem.

The code that runs is part of a persistence framework for  the grid that is in a remotely loaded html file that is
blissfully unaware of the container it is being loaded in to. ... and the tab strip is blissfully unaware it is loading a grid that will need to be restored on load.

Additionally, I don't have access to the Grid initialization. It is created by the MVC Html helpers, and then modified on document load based on the persisted settings (filters, column order, column visibility etc).

This all works absolutely fine, other than the single bug with column visibility detailed in the original post.

To manually patch the Grid Persistence code to be container aware would be problematic (I'm not sure I even have a hook from the remote content that can detect if it is loaded into a Tabstrip).

In any case, it seriously compromises the separation of concerns between our components of they have to manage themselves depending on which widget they were loaded from.

The :visible  selector (which is not a native css selector, it is simply a JQuery invention ) clearly appears to be either buggy, or not suitable for use in a scenario when loading remote content. 

Using .filter as described below is clearly the more correct behavior in this situation. The code should be selecting columns that have explicitly been hidden when trying to select the set of currently hidden grid  columns, not those that have had their height or width set to zero, or are otherwise not visible due to some edge case of remote ajax loading.

[Nikolay Rusev]

Hello Graeme,

I understand your concerns and we will revisit the implementation. The change will be available for testing in the Internal Builds.

Regards,
Nikolay Rusev
the Telerik team