Column Show / Hide issue when menu is set to false

[Nchatz]

Hello, 

 

After the last release (Kendo UI R2 2020 SP1) an issue occurred related with columns "menu" option, the case is if when a column have menu set to false, then you try to hide / show other columns from column menu , it keeps the index of column that have menu to false and shows or hides wrong column.

Please find attached a GIF image representing the issue, also here is a link with code snipped https://dojo.telerik.com/@fedrosa/IquNEFAH

 

Thank you

 

[Alex Hajigeorgieva]

Hi, Nikolas,

Thank you for getting in touch to report this.

The issue is a known one and has already been fixed.

Feedback portal

GitHub issue

We have released it in this internal build that is accessible in your account but we do not host internal builds in our CDNs:

https://www.telerik.com/support/whats-new/kendo-ui/release-history/kendo-ui-2020-2-812-internal-build

The fix is due to be released in the next major release R3 next week as well.

Please accept our apologies for any inconvenience that this may have caused.

Regards,
Alex Hajigeorgieva
Progress Telerik

[Kevin Smith]

Hi Alex,

I tried the internal build and it still doesn't work correctly when you have columnReorder with a sorted column menu:

 

Below is the code that i use to sort my column menu and then a function to show columns next to the column where the user clicked instead of showing the column at the defined location (we have over 60 columns so it becomes a pain if the column is placed somewhere else)

 

I tried the latest build with the following and it doesn't seem to work. Can you have a look and help me out here? we have this code out in production and its having a massive impact on our users.

 

var GridFuncs = {
    autoSortGridColumnMenu: function(e) {
        "use strict";
        GridColumnSelected = e.field;
        var columnsMenuItems = e.container.find(".k-menu").find(".k-columns-item").find("ul");
        if (columnsMenuItems) {
            var menuItems = $(columnsMenuItems).find("li");
            if (menuItems.length > 0) {
                var reprocessedArray = _.sortBy(menuItems, function(x) { return x.innerText });
                var ulContainer = e.container.find(".k-menu").find(".k-columns-item").find("ul");
                $(reprocessedArray).each(function() {
                    ulContainer.append(this);
                });

            }
        }


        var menu = e.container.find(".k-menu").data("kendoMenu");
        menu.bind("activate",
            function(e) {
                if (e.item.is(".k-filter-item")) {
                    // for columns with normal filters
                    if (e.item.find("span.k-dropdown.k-header").length > 0) {
                        e.item.find("span.k-dropdown.k-header").first().focus();

                    }

                    // for columns with multi-select with searchbox on top
                    if (e.item.find(".k-textbox").length > 0) {
                        e.item.find("input").first().focus();
                    }

                }
            });


        // remove Logical "Or" operator from filter menu since we don't support it
        var filterMenu = e.container.find("select:eq(1)").data("kendoDropDownList");
        if (filterMenu) {
            var ds = filterMenu.dataSource;
            ds.remove(ds.at(1));
        }


    },
    sequentialPlaceGridColumn: function(e) {
        "use strict";
        var gridElem = $("#" + e.sender.element.context.id).data("kendoGrid");

        GridColumnAppended = e.column.field;
        //var allColumns = gridElem.columns;
        var colsArranged = [];
        $.each(gridElem.columns,
            function() {
                //if (!this.hidden)
                colsArranged.push(this.field);
            });
        var selectPosition = _.indexOf(colsArranged, GridColumnSelected);
        var toAppendPosition = _.indexOf(colsArranged, GridColumnAppended);
        gridElem.reorderColumn(selectPosition + 1, gridElem.columns[toAppendPosition]);
    }
};

[Alex Hajigeorgieva]

Hi, Kevin,

We had to change the internal workflow of the column menu in order to fix the bug I linked in my previous response.

Unfortunately, the new workflow is not compatible with the solution provided in the linked articles below:

• https://docs.telerik.com/kendo-ui/knowledge-base/grid-sort-displayed-columns-menu-items
• https://docs.telerik.com/kendo-ui/knowledge-base/grid-exclude-column-from-columns-menu

However, we are currently working on providing a built-in feature to sort the items in the column menu.

Kind Regards,

Alex Hajigeorgieva
Progress Telerik

[Kevin Smith]

Hi Alex,

 

Can you give me a ETA on when this will be fixed? we have code out in production and this is causing issues on the usability of the grids.

 

Also is there a way we can get a built in option to show an hidden column next to the column the user clicked on to bring the column menu? on a grid with large number of columns when a user shows a column it goes and displays it in the position it is in the column schema which becomes hard for the user to find. In the code we provided that was the solution we used on our older kendo framework before we upgraded

[Alex Hajigeorgieva]

Hello, Kevin,

The sorting of columns should work without issues as of the next service pack. This issue is part of the items in progress.

We do not have the exact date for the service pack, however it should be around the end of next month.

For the secondary question about scrolling to the column that was made visible, it sounds like a great idea, do you mind if I log it in our Feedback Portal on your behalf?

Regards,
Alex Hajigeorgieva
Progress Telerik

[Kevin Smith]

Hi Alex,

Thanks for the reply. Yes please go ahead and add it to the feedback.

 

The feature is not to scroll to the  column that was shown but to add the column right next to the current column where the user clicked on the column menu to show the hidden column.

[Alex Hajigeorgieva]

Hello, Kevin,

With the current source, to reorder the column shown, you will need to have the menu reordered as well, until the new functionality is provided. If this is the preferred behaviour, here is how you can achieve it:

https://dojo.telerik.com/@bubblemaster/IxUTeJeq/2

           //create a variable to keep the field of the last opened column menu
           var lastOpenedMenuField;

           // update the variable when the menu opens
           columnMenuOpen: function(e){
              lastOpenedMenuField = e.field;
            },
            columnShow: function(e){
              var visibleThs = this.thead.find("[data-field]:visible");
               var idxOfColMenu = $.map(visibleThs, x=>$(x).data("field")).indexOf(lastOpenedMenuField);
              
              if(lastOpenedMenuField !=e.column.field){
                
                this.reorderColumn(idxOfColMenu +1, e.column);
                var columnMenu = this.thead.find("[data-field='"+lastOpenedMenuField+"']").data("kendoColumnMenu");
                 // programmatically reorder the menu
                 columnMenu ._reorderMenuItems();
              }    
            },

I have also created the feedback item on your behalf here:

https://feedback.telerik.com/kendo-jquery-ui/1486965-grid-show-column-next-to-the-current-column

Feel free to add further comments to it as you see fit.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik