Enable/disable columns in Grid

Hi Jacob,

We will implement Grid column hiding and showing, but this functionality is not in our short-term plans, as we are currently developing features with higher priority. We might consider introducing this some time in 2012, based on customer requests.

Kind regards,
Dimo
the Telerik team

Thanks for the answer!

I tried to solve the show/hide of columns problem like this:

It doesn't work though, so I'm out of ideas here. Do I really have to kill the currently visible grid and reinitiate it all over, with new columns options supplied to the kendoGrid() call?

/Jacob

Hello Jacob,

I advise you to experiment showing and hiding columns of a plain HTML table, which has an identical HTML output as the Kendo Grid. Then you will use the same approach in the Kendo Grid. There will be no need to fiddle with the client object properties.

Regards,
Dimo
the Telerik team

Sure, this can be done with CSS if only each TD has a class identifying which column it belongs to. It's easily done if I write the table as HTML markup and do all <td>'s myself (and give them some classes).

However in my scenario data is coming from an API endpoint, so I might need to use column templating to specify additional elements (but it won't allow me to add a class to the TD, as the column template "lives" inside that TD as far as I can see). So another solution would be to use row templating, add CSS classes to each TD, and then decide which classes should be visible and which should be hidden. It would work.

Still, it's not an optimal solution, as the server has no idea which columns are actually needed, and will process and output all columns available which can be a waste of time, especially if some advanced filters will be applied.

Perhaps it would be much better if there was a way to tell the dataSource object which columns are currently visible (and hence, requested), wouldn't it?

/Jacob

Hi Jacob,

It is not the datasource's job to know which columns are hidden, because this is part of the UI configuration, not the data layer.

Indeed, manual column hiding is not a one-step task, but is also not impossible to achieve. For best results and cross-browser support, you need to remove the corresponding <col> element from the DOM and set a display:none style to all table cells from the respective column. You may need to save the col's element width style somewhere in case the column is shown again and a new <col> element is added to the DOM.

Greetings,
Dimo
the Telerik team

Hi again!

I've solved the show/hide thing as you mentioned, Dimo. The code is a bit cumbersome with the :nth-child selector, but it works:


Works like a charm so far (though I'm not sure which role the 'col' element plays - I can't see any difference whether I have it in this code or not). 

However, I think I've found a bug in the arrow key navigation (the 'navigatable: true' option): the hidden TD's are navigable, even though they're not visible. So, if I have three columns and the middle one is hidden, and I select the left column and press the right arrow key, the selection disappears (the hidden column gets selected). When I press right arrow key again, the selection appears on the right column.

Perhaps a simple fix on your side in the arrow navigation logic: ensure that the element we're about to select has ":is('visible')", else try with next element.

/Jacob

Hello Jacob,

Naturally, since the Kendo Grid does not support column hiding, hidden columns are currently not taken into account during keyboard navigation. We will address this issue in the future.

Regards,
Dimo
the Telerik team

I see. However, it's probably an easy fix. In kendo.grid.js there's this snippet:


Perhaps checking for :visibility on CELL_SELECTOR as well would do the trick? 

----

I know that the feature discussed here is not supported yet, so this isn't a "bug", but still I'd like to share some findings I've made when trying to solve the issue:

There seems to be a strange resize behavior in Webkit-based browsers when user starts to drag-and-select with the mouse in a Grid that has hidden columns. See attached screenshots for details. 

/Jacob

Hello Jacob,

Thank you for the feedback, we will take it into account.

Regards,
Dimo
the Telerik team

I think with the new popup edit option on grids, this is now a much higher need.

You want a list of items but you don't want to show every field in the list (ie product list for editing), however when they click edit and it opens in popup you want it to show all field available for editing. 

Hello Andre,

You are talking about a different scenario, which is now possible to achieve in two ways.

1. You can control which fileds are editable or not in the datasource's model.
http://www.kendoui.com/documentation/framework/datasource/configuration.aspx#model

2. The popup edit form accepts a template:


The binding of the input fields to the data values is achieved with MVVM.

Greetings,
Dimo
the Telerik team

Hi Dimo,
            Even when you set editable to true in your model field for an item in the datasource, it still wouldnt show in the popup edit mode for the grid as long as that item is not displayed in a colum on the grid.my guess is the popup edit module creates a form based on the columns on the grid and their associated data type

Hi Joshua,

In your case you need to use the second approach, namely a popup template.

Regards,
Dimo
the Telerik team

Hi Dimo,

Looking at the source


I can see that template takes precedence, which is great! But I'm not sure if iterating over the columns is the most intuitive approach for the popup mode.

Might be worth considering to iterate over

so that the popup would show all fields defined in the model instead.


Frohes Schaffen

Rainer

Hi Rainer,

I guess that both approaches may seem intuitive or counter-intuitive to certain people, anyway, thanks for sharing your opinion, we will take it into account if we decide to redesign the Grid's behavior.

Regards,
Dimo
the Telerik team