This is a migrated thread and some comments may be shown as answers.

ColumnHide not working with row templates

9 Answers 122 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Allocate Software Internal Systems
Top achievements
Rank 1
Allocate Software Internal Systems asked on 30 Jan 2014, 04:14 PM
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.

9 Answers, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 30 Jan 2014, 04:39 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Allocate Software Internal Systems
Top achievements
Rank 1
answered on 31 Jan 2014, 10:14 AM
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/

0
Nikolay Rusev
Telerik team
answered on 03 Feb 2014, 08:57 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Allocate Software Internal Systems
Top achievements
Rank 1
answered on 05 Feb 2014, 08:39 AM
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.
0
Nikolay Rusev
Telerik team
answered on 06 Feb 2014, 09:29 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sonali
Top achievements
Rank 1
Veteran
answered on 28 Apr 2020, 05:55 AM

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.

0
Martin
Telerik team
answered on 30 Apr 2020, 05:53 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Sonali
Top achievements
Rank 1
Veteran
answered on 30 Apr 2020, 06:09 AM

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? 

0
Nencho
Telerik team
answered on 01 May 2020, 12:44 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Allocate Software Internal Systems
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Allocate Software Internal Systems
Top achievements
Rank 1
Sonali
Top achievements
Rank 1
Veteran
Martin
Telerik team
Nencho
Telerik team
Share this question
or