ColumnHide not working with row templates

[Allocate Software Internal Systems]

When using row templates, if you programatically hide a column and then apply sorting the hidden state is maintained on the headers but gets lost on the data row.

Check out this fiddle showing the problem http://jsfiddle.net/Tups/3GWzZ/7/

Am I doing something wrong or is this a bug?

Thanks in advance.

[Nikolay Rusev]

Hello,

You will have to manage column cells state manually as the row template will be evaluated on very grid refresh. Here is an example how this can be implemented: http://jsfiddle.net/2yf9Q/

Regards,
Nikolay Rusev
Telerik

[Allocate Software Internal Systems]

Thanks Nikolay.

Is this by design or a work-around for a bug as it seems a bit of a hack and not ideal for us as our app has over 20 different grids that this would need to be added too.  Also it breaks when column re-ordering is switched on: http://jsfiddle.net/Tups/2yf9Q/1/

[Nikolay Rusev]

Indeed this is by design. Developer must take care of the look & feel of the row template. In the matter of fact the row template redefines the whole concept of column cells in the row, i.e you can have only one cell.

Same relates to column reordering: http://jsfiddle.net/hySAk/

Regards,
Nikolay Rusev
Telerik

[Allocate Software Internal Systems]

That makes sense.

It would be very useful if there was some way to re-use or force the use of your mechanism for toggling/ordering cells in templated rows though, as our templates have the same cell structure that would be generated by your code.  As a result our implementation for toggling/ordering is a copy-paste of your solution into our code base which isn't ideal.

[Nikolay Rusev]

Actually the mechanics behind column reorder/hiding is much more complicated :).  The only visible parts of all this is the column meta data: `hidden` attribute and the order in columns collection. And that is all developer needs to know and take care when implementing row template.

Regards,
Nikolay Rusev
Telerik

[Sonali]

Hi

I'm using kendo 2017.1.118 version. I basically need the same functionality, but the way you are including the style in the <td> is not working for me.

I tried using an if-else condition inside the row-template like this- https://dojo.telerik.com/oMokUMUT/3.

But, when I am selecting the hidden column from the column menu and doing grid refresh on a button click, the column header is shown but this time the row data is not visible and the other column's data shift to the left.

Also, when I hide any other column using the column menu and click on the button to refresh the grid, this time the column header is not visible but the related row data is still present.

[Martin]

Hello Sonali,

Thank you for the provided example.

The behavior is because the cols collection is not being updated according to the hidden property. You can do so in the columnShow and the columnHide events.

columnShow: function(e) {
  cols.filter(x=> x.field === e.column.field)[0]. hidden = e.column.hidden;
},
columnHide: function(e) {
  cols.filter(x=> x.field === e.column.field)[0]. hidden = e.column.hidden;
},

Here is the modified example for reference.

Let me know if you have any further questions.

Regards,
Martin
Progress Telerik

[Sonali]

Thanks Martin

This is exactly what I wanted. I have yet another concern in the script template. I have 15 columns in my grid. Is there a better way to iterate through the columns object and check for the hidden condition? 

[Nencho]

Hello, Sonali,

The real-life scenario implementation would depend on your preference, but in terms of code optimization - you can use a for cycle to loop through your columns.

Regards,
Nencho
Progress Telerik