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

Grid Column Menu + Reordering

23 Answers 1129 Views
Grid
This is a migrated thread and some comments may be shown as answers.
W
Top achievements
Rank 1
W asked on 13 Jul 2012, 12:09 PM
I've downloaded the latest version of Kendo Web (kendoui.web.2012.2.710.open-source) and added a grid in my application with the following settings:
autoBind: true,
selectable: true,
groupable: true,
sortable: {
    mode: "multiple",
    allowUnsort: true
},
filterable: true,
scrollable: false,
pageable: true,
navigatable: true,
reorderable: true,
resizeable: true,
columnMenu: true

When I reorder my columns and afterwards click on the Column Menu to remove a column, it seems to remove the incorrect ones.
For example, initially I would have column A, B, C. When I reorder them to C, A, B and then click to remove column 'A', it would remove C (new column on the original position of column A).
Is this a bug or am I overlooking something (or do I need to configure something extra)?

23 Answers, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 16 Jul 2012, 10:34 AM
Hello Werner,

Indeed this is a bug, which will be addressed shortly.

As a token of gratitude for bringing this problem to our attention I have also updated your Telerik points.

Regards,
Nikolay Rusev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dr.YSG
Top achievements
Rank 2
answered on 16 Jul 2012, 03:27 PM
I also tried this new feature. (took me a while to find it under the Filter drop down, perhaps this is something that should not be duplicated on all columns, but a global column option, Filtering though, is a per column option).

What I need is to have a subset of columns visible at startup (6 out of 20) and then the user can either add or remove columns.

But I don't see a per column attribute  in the Columns array to say that this column defaults to visible or not). Is there some way to do that?

Also, I was implementing this myself (thank you for beating me to it). But my popup menu had a check box at the top for SELECT ALL (which was a HTML5 tri-state button that also handled intermediate state). It could also be used to DESELECT ALL. Here is the code in case you want to add this:

function createWindow(data) {
    var templateHTML = $("#ColumnTemplate").html();
    var template = Handlebars.compile(templateHTML);
    var newHTML = template(data);
    $("#ColumnNames").html(newHTML);
    $("#ColumnChooseWindow").kendoWindow({
        actions:["Maximize", "Minimize", "Close"],
        width:"14em",
        height:"25em",
        title:"Choose Columns",
        modal:true
    });
    GridData.columnChooser = $("#ColumnChooseWindow").data("kendoWindow");
}
 
function GridSelectAllColumns(self) {
    $(".Columns-CheckBox").prop('checked', $(self).prop("checked"));
    $(this).prop("indeterminate", false);
}
 
function GridColChanged() {
    if ($(".Columns-CheckBox:checked").length === 0) {
        $("#SelectAllColumns").prop("indeterminate", false);
    } else if ($(".Columns-CheckBox:not(:checked)").length === 0) {
        $("#SelectAllColumns").prop("indeterminate", false);
    } else {
        $("#SelectAllColumns").prop("indeterminate", true);
    }
}


<div>
    <div id="ColumnChooseWindow">
        <div>
            <input type="checkbox" id="SelectAllColumns" onchange="GridSelectAllColumns(this)">
            <label class="thick" for="SelectAllColumns">Select All</label>
        </div>
        <div id="ColumnNames"/>
    </div>
    <div id="ColumnTemplate">
        {{#each results}}
        <div>
            <input id="ColumnsItem-{{id}}" value="{{name}}" class="Columns-CheckBox" type="checkbox"
                   onchange="GridColChanged()"/>
            <label for="ColumnsItem-{{id}}">{{name}}</label>
        </div>
        {{/each}}
    </div>
</div>
0
Nikolay Rusev
Telerik team
answered on 18 Jul 2012, 09:18 AM
Hello Yechezkal,

With Q2 2012 Release of Kendo UI we've introduced API for show/hide columns(i.e showColumn/hideColumn) and a column menu which have options for controlling columns visibility.
http://demos.kendoui.com/web/grid/column-menu.html

Within Grid configuration you can set whether column is visible or not, for example:
columns: [
 { field: "foo", hidden: true },
 { field: "bar", hidden: false /* default one */}
 ...
]


Greetings,
Nikolay Rusev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dr.YSG
Top achievements
Rank 2
answered on 18 Jul 2012, 01:52 PM
The "hidden" attribute is not in your documentation: http://docs.kendoui.com/api/web/grid

You could say it is "HIDDEN" in the docs :-)

Thank you!

{PS, consider putting the Select/deselect all as the top check box in the columnMenu. I gave you the code and it is really pretty simple}

0
Sander van Uden (JW)
Top achievements
Rank 1
answered on 18 Jul 2012, 03:08 PM
Hi Nikolay,

Do you have an example of the API that controls the hidding of the columns?

Regards, Sander
0
Nikolay Rusev
Telerik team
answered on 19 Jul 2012, 10:05 AM
@Yechezkal Indeed we are in process of updating our docs portal.

@Sander The usage of the methods is quite simple - both accepts field name or column index, i.e if grid has following column
{
 ...
 columns: [
 { field: "foo" }, { field: "bar" }
 ]
 ...
}

and the corresponding code for show/hide:
var grid = $("grid selector").data("kendoGrid");
// showing
grid.showColumn("foo");
// or
grid.showColumn(1);  //will show "bar" column
 
// hiding
grid.hideColumn("foo");
// or
grid.hideColumn(1);  //will hide "bar" column


All the best,
Nikolay Rusev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Alexander
Top achievements
Rank 1
answered on 16 Aug 2012, 07:11 PM
Hi, 

Is there an event that fires when a column is hidden via the Column Menu?

This is/would be useful since we attempting to save the state of the grid to local storage or a cookie.
0
Nikolay Rusev
Telerik team
answered on 17 Aug 2012, 06:57 AM
Hello Alexander,

"columnHide"/ "columnShow" are the events triggered when column states changes.

Regards,
Nikolay Rusev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
John
Top achievements
Rank 2
answered on 17 Aug 2012, 03:46 PM
In my columnMenu, I am getting 2 additional columns with the label of undefined.
I'm not sure how that column list is generated or where it comes from.

Any ideas?

-john-
0
Alexander
Top achievements
Rank 1
answered on 17 Aug 2012, 07:09 PM
Thanks for the response,

Showing/hiding columns seems to add additional objects to each column: "attributes", "footerAttributes" and "headerAttributes".

When hiding a column, all three of these are set to include a "style" property of "display: none". That makes sense, except that they are *always* set on grid initialization depending on the value of the column "hidden" property.

This is causing me a problem in the following code:

var myData = []; // JSON array from MVC
 
var defaultColumns = [{ field: "Guid", title: "Guid", hidden: false, attributes: {}, footerAttributes: {}, headerAttributes: {} }]; // ... plus other columns
 
var myColumns = (localStorage.getItem("myColumns") == null) ? defaultColumns : localStorage.getItem("myColumns");
 
var myGrid = $("#grid").kendoGrid({
            columns: myColumns,
            dataSource: {
                data: myData,
                pageSize: 15
            },
            filterable: true,
            groupable: true,
            pageable: {
                info: true,
                refresh: true,
                numeric: true
            },
            reorderable: true,
            scrollable: false,
            resizable: true,
            selectable: "multiple cell",
            sortable: {
                mode: 'single',
                allowUnsort: true
            },
        }).data("kendoGrid");
 
localStorage.setItem("myColumns", myGrid.columns);
 
// ... function to watch for a custom control to hide a field...
myGrid.hideColumn(selectedColumn);
localStorage.setItem("myColumns", myGrid.columns);

What happens is that once I set a field to hidden with .hideColumn(), it adds the value "display: none" into the properties listed above. Then, I reload the page and pull in the columns array from local storage. When the .kendoGrid() method fires, it adds an ADDITIONAL "display: none" into the properties because it saw "hidden: true". On the column.

This is problematic because firing .showColumn() only removes *one* of the "display: none" values. 

Could this be a bug?
0
John
Top achievements
Rank 2
answered on 04 Sep 2012, 03:55 PM
Just a note on this:
There are several "HIDDEN" events from the docs:

columnReorder: function (column) { alert('oldIndex:' + column.oldIndex + ' newIndex: ' + column.newIndex); },
columnResize: function (column) { debugger; alert('oldWidth:' + column.oldWidth + ' newWidth: ' + column.newWidth); },
columnHide: function (column) { alert('hide column'); },
columnShow: function (column) { alert('show column'); },

Here are some events that I found very useful:
        EDIT = "edit",
        SAVE = "save",
        REMOVE = "remove",
        DETAILINIT = "detailInit",
        CHANGE = "change",
        COLUMNHIDE = "columnHide",
        COLUMNSHOW = "columnShow",
        SAVECHANGES = "saveChanges",
        DATABOUND = "dataBound",
        DETAILEXPAND = "detailExpand",
        DETAILCOLLAPSE = "detailCollapse",
        FOCUSED = "k-state-focused",
        FOCUSABLE = "k-focusable",
        SELECTED = "k-state-selected",
        COLUMNRESIZE = "columnResize",
        COLUMNREORDER = "columnReorder",

Hope this helps others.
0
Murtaza
Top achievements
Rank 1
answered on 10 Sep 2012, 05:08 PM
We are faced with the same problem. When re-ordering grid columns and hiding them, incorrect columns gets hidden. How can we get a fix for it?

Thanks,
Taz.
0
Nikolay Rusev
Telerik team
answered on 12 Sep 2012, 07:41 AM
Hello Murtaza,

Did you tried some of the Latest Internal Builds? Seems to be working on our end.

Regards,
Nikolay Rusev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Doogle
Top achievements
Rank 1
answered on 16 Oct 2012, 03:47 PM
We are getting the same problem as john above.

The column menu is showing an extra option entitled "undefined".

If I remove every column from my grid's declaration, it still appears.
0
John
Top achievements
Rank 2
answered on 16 Oct 2012, 05:37 PM
I have a "HACK" workaround to hide it.

On document ready...

$('.k-column-menu').find('input[data-field="undefined"]').parent().addClass('hidden');

I created a hidden css class to display:none;

This is NOT the approved, suggested, or recommended method.

It does work though. :-)

-me-
0
Doogle
Top achievements
Rank 1
answered on 17 Oct 2012, 08:22 PM
Love the hack.

Thanks John.
0
Jodi
Top achievements
Rank 1
answered on 13 Nov 2012, 04:19 PM
I am facing the same problem as Alexandar below where an additional 'display:none' property is being set once I've loaded the columns from local storage.  This means that the grid does not properly display columns where hidden: false because while it shows up in the column menu checked correctly, the columns themselves are still left with the extra 'display: none' and so do not display.  Will there be a fix for this issue any time soon?

Thanks!
Jodi
0
Robert
Top achievements
Rank 1
answered on 09 Jan 2013, 07:05 PM
Can a column be removed from the Columns list of column menu. We have ID columns bound to the grid we never want visible.
0
Nikolay Rusev
Telerik team
answered on 10 Jan 2013, 07:19 AM
Hello Robert,

There is a menu setting which controls whether the column should be listed in the menu.

Regards,
Nikolay Rusev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Robert
Top achievements
Rank 1
answered on 10 Jan 2013, 06:18 PM
Thank you for the info Nikolay.
0
Ron DeFreitas
Top achievements
Rank 2
answered on 22 Feb 2013, 08:24 PM
I've having a random error (which can be reproduced on the column menu demo page: http://demos.kendoui.com/web/grid/column-menu.html ) wherein after a number of clicks toggling columns, it will randomly change to only hiding the header columns and not the data columns.

Attached is a screenshot indicating the error on the demo page.  I was able to reproduce this by randomly clicking items in the column menu in IE 8/9, Firefox, Chrome, and Safari


0
John
Top achievements
Rank 2
answered on 22 Feb 2013, 08:56 PM
Ron,

I encountered that error too.  The easiest fix is to bind to that event (columnShow, columnHide) and force a refresh.
I'm not sure the actual cause of it, but that is a quick fix, but perf implications may be a concern.

Hope this helps a little.

-John-
0
hedayat
Top achievements
Rank 1
answered on 21 Aug 2013, 12:10 PM
Would you please provide a real example related to your code snippet. I want to show all the Grid's Column name in the modal to provide Hide/Show facility. It is not right way to add  ColumnMenu feature to all Column. I gonna add a button out of the Grid. when user click on it all the Grid's column will be appear in the Modal, and User will be able to Hide/show columns.

Thanks
Tags
Grid
Asked by
W
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Dr.YSG
Top achievements
Rank 2
Sander van Uden (JW)
Top achievements
Rank 1
Alexander
Top achievements
Rank 1
John
Top achievements
Rank 2
Murtaza
Top achievements
Rank 1
Doogle
Top achievements
Rank 1
Jodi
Top achievements
Rank 1
Robert
Top achievements
Rank 1
Ron DeFreitas
Top achievements
Rank 2
John
Top achievements
Rank 2
hedayat
Top achievements
Rank 1
Share this question
or