Grid Column Menu + Reordering

24 posts, 0 answers
  1. W
    W avatar
    1 posts
    Member since:
    Jul 2012

    Posted 13 Jul 2012 Link to this post

    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)?
  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 16 Jul 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 16 Jul 2012 Link to this post

    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>
  5. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 18 Jul 2012 Link to this post

    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!
  6. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 18 Jul 2012 Link to this post

    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}

  7. Sander van Uden (JW)
    Sander van Uden (JW) avatar
    2 posts
    Member since:
    Jul 2009

    Posted 18 Jul 2012 Link to this post

    Hi Nikolay,

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

    Regards, Sander
  8. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 19 Jul 2012 Link to this post

    @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!
  9. Alexander
    Alexander avatar
    19 posts
    Member since:
    Jun 2012

    Posted 16 Aug 2012 Link to this post

    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.
  10. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 17 Aug 2012 Link to this post

    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!
  11. John
    John avatar
    13 posts
    Member since:
    May 2012

    Posted 17 Aug 2012 Link to this post

    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-
  12. Alexander
    Alexander avatar
    19 posts
    Member since:
    Jun 2012

    Posted 17 Aug 2012 Link to this post

    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?
  13. John
    John avatar
    13 posts
    Member since:
    May 2012

    Posted 04 Sep 2012 Link to this post

    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.
  14. Murtaza
    Murtaza avatar
    2 posts
    Member since:
    May 2012

    Posted 10 Sep 2012 Link to this post

    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.
  15. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 12 Sep 2012 Link to this post

    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!
  16. Doogle
    Doogle avatar
    9 posts
    Member since:
    Oct 2012

    Posted 16 Oct 2012 Link to this post

    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.
  17. John
    John avatar
    13 posts
    Member since:
    May 2012

    Posted 16 Oct 2012 Link to this post

    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-
  18. Doogle
    Doogle avatar
    9 posts
    Member since:
    Oct 2012

    Posted 17 Oct 2012 Link to this post

    Love the hack.

    Thanks John.
  19. Jodi
    Jodi avatar
    3 posts
    Member since:
    Sep 2012

    Posted 13 Nov 2012 Link to this post

    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
  20. Robert
    Robert avatar
    19 posts
    Member since:
    Dec 2012

    Posted 09 Jan 2013 Link to this post

    Can a column be removed from the Columns list of column menu. We have ID columns bound to the grid we never want visible.
  21. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 10 Jan 2013 Link to this post

    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!
  22. Robert
    Robert avatar
    19 posts
    Member since:
    Dec 2012

    Posted 10 Jan 2013 Link to this post

    Thank you for the info Nikolay.
  23. Ron DeFreitas
    Ron DeFreitas avatar
    26 posts
    Member since:
    Apr 2010

    Posted 22 Feb 2013 Link to this post

    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


  24. John
    John avatar
    17 posts
    Member since:
    Jan 2013

    Posted 22 Feb 2013 Link to this post

    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-
  25. hedayat
    hedayat avatar
    16 posts
    Member since:
    Feb 2007

    Posted 21 Aug 2013 Link to this post

    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
Back to Top
Kendo UI is VS 2017 Ready