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

Enable/disable columns in Grid

15 Answers 974 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jacob
Top achievements
Rank 1
Jacob asked on 17 Oct 2011, 02:27 PM
Hi,

I am wondering if you will support enabling/disabling columns in the grid on the flight. I'm thinking of something similar to this (see attached image).

See the demo for full interaction. 

/Jacob

15 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 17 Oct 2011, 05:12 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jacob
Top achievements
Rank 1
answered on 15 Nov 2011, 11:19 AM
Thanks for the answer!

I tried to solve the show/hide of columns problem like this:
var grid = $('#grid').kendoGrid({...}).data('kendoGrid');
 
// later, on some event I can do either…:
grid.options.columns.push('newCol'); // this way or…
grid.options.columns = [ /* array of objects with my columns to be shown */]; // that way
// now, refresh the grid
grid.refresh();

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
0
Dimo
Telerik team
answered on 15 Nov 2011, 12:26 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jacob
Top achievements
Rank 1
answered on 15 Nov 2011, 12:37 PM
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

0
Dimo
Telerik team
answered on 15 Nov 2011, 01:34 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jacob
Top achievements
Rank 1
answered on 16 Nov 2011, 09:16 AM
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:

// var columns - is an array that contains all columns.field values from the Grid's column property
// var selectedColumns - just an array of field names that we currently want to show, e.g. ['ShipAddress', 'ShipCity']
for (var i = 0; i < columns.length; i++) {
    var j = i+1; // n-th child is 1-based, while our index 0-based
    var cells = $('#gridContainer').find('col:nth-child('+j+'), th:nth-child('+j+'), td:nth-child('+j+')');
    if ($.inArray(columns[i], selectedColumns) !== -1) {
        cells.show();
    }
    else {
        cells.hide();
    }
}

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
0
Dimo
Telerik team
answered on 16 Nov 2011, 10:13 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jacob
Top achievements
Rank 1
answered on 16 Nov 2011, 10:40 AM
I see. However, it's probably an easy fix. In kendo.grid.js there's this snippet:

ROW_SELECTOR = "tbody>tr:not(.k-grouping-row):visible",
CELL_SELECTOR =  ROW_SELECTOR + ">td:not(.k-group-cell)",

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
0
Dimo
Telerik team
answered on 16 Nov 2011, 05:43 PM
Hello Jacob,

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

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Andre
Top achievements
Rank 1
answered on 03 Mar 2012, 01:12 AM
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. 
0
Dimo
Telerik team
answered on 05 Mar 2012, 11:05 AM
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:

$("#grid").kendoGrid({
    editable: {
        mode: "popup",
        template: '<input data-bind="value:UnitPrice" /> <input type="checkbox" data-bind="checked:Discontinued" />'
    }
});

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

Greetings,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Joshua Oguche
Top achievements
Rank 1
answered on 20 Mar 2012, 06:21 PM
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
0
Dimo
Telerik team
answered on 21 Mar 2012, 09:26 AM
Hi Joshua,

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

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
RainerAtSpirit
Top achievements
Rank 1
answered on 13 Apr 2012, 05:37 PM
Hi Dimo,

Looking at the source

_createPopUpEditor: function(model) {
 
<snip>
 
if (editable.template) {
html += (kendo.template(editable.template, settings))(model);
} else {
for (idx = 0, length = that.columns.length; idx < length; idx++) {
column = that.columns[idx];

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
this.options.dataSource.options.schema.model.fields

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


Frohes Schaffen

Rainer
0
Dimo
Telerik team
answered on 16 Apr 2012, 08:28 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Jacob
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Jacob
Top achievements
Rank 1
Andre
Top achievements
Rank 1
Joshua Oguche
Top achievements
Rank 1
RainerAtSpirit
Top achievements
Rank 1
Share this question
or