ColumnMenu doesnt work properly when using Template columns in the same Grid

[Greg]

I've had this issue for years with the Telerik grid when trying to use the built in ColumnMenu in the same grid as template columns. I want to make a template column for a custom button. The column and button work fine, however if the template column is not the last column in the grid it causes the ColumnMenu items to all be off by one. ie: you click one of the columns to hide it in the ColumnMenu and it will hide the one above it in the list instead. It's like the column menu doesnt know to account for the template columns.

The only workaround I've found is to place the template column as the last column in the grid or to make a bound column and set its title to a blank and set sorting/paging both false, however this still then leaves a blank entry in the column menu and is not desirable. Am I missing something when using template columns and the ColumnMenu in the same grid?

Code for my template column:

columns.Template("<button type=\"button\" class=\"btn btn-grid\" data-id=\"#=Id#\"><i class=\"fas fa-fw fa-pencil-alt\"></i></button>");

 

Heres is some code of a grid (I chopped a lot of code out of this grid to simplify it and verified this still has the issue), all of my grids across many projects share this issue. This grid is using version 2020.2.617 and the bootstrap theme.

@(Html.Kendo().Grid<TagGridViewModel>().Name("gridTags")
.Columns(columns =>
{
columns.Template("<button type=\"button\" class=\"btn btn-grid\" data-id=\"#=Id#\"><i class=\"fas fa-fw fa-pencil-alt\"></i></button>");
columns.Bound(c => c.TagId).Filterable(f => f.Cell(cell => cell.ShowOperators(false).SuggestionOperator(FilterType.Contains).MinLength(2))).ClientTemplate($"<a class=\"grid-link\" href=\"{Url.Action("Details", "Tags")}/#=Id#\">#:{nameof(TagGridViewModel.TagId)}#</a>");
columns.Bound(c => c.AddDate).Filterable(false);
columns.Bound(c => c.UpdateDate).Title("Updated").Filterable(false).ClientTemplate($"#={nameof(TagGridViewModel.UpdateDateDisplay)}#");
})
.ColumnMenu(true)
.DataSource(dataSource => dataSource.Ajax().PageSize(25)
.ServerOperation(false)
.Read(read => read.Action("DetailsTagsGridRead", "Clients", new { clientId = Model.Location.ClientId, locationId = Model.Location.Id }))
.Events(events => events.Error("gridError"))
)
)

[Aleksandar]

Hi Greg,

I added the indicated column template as a column, that is not at the end and enabled ColumnMenus:

@(Html.Kendo().Grid <TelerikAspNetCoreApp248.Models.OrderViewModel>()
            .Name("grid")
            .ColumnMenu(true)
            .Columns(columns =>
            {
                columns.Bound(p => p.OrderID);
                columns.Bound(p => p.Freight);
                columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
                columns.Template("<button type=\"button\" class=\"btn btn-grid\" data-id=\"#=OrderID#\"><i class=\"fas fa-fw fa-pencil-alt\"></i></button>");
                columns.Bound(p => p.ShipName);
                columns.Bound(p => p.ShipCity);
            })
            .Pageable()
            .Sortable()
            .Scrollable()
            .Filterable()
            .HtmlAttributes(new { style = "height:550px;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .ServerOperation(false)
                .Read(read => read.Action("Orders_Read", "Grid"))
                )
        )

Upon testing the reported behavior I am able to hide columns before or after the templated columns, as you can see in this screencast. Am I missing something? Should I change anything else in the configuration or the steps taken in order to reproduce the behavior?

UPDATE:

The reported behavior was a known issue where the ColumnMenu in the Grid does not hide/unhide the correct column when a column with no title is placed first. The issue was fixed with R3 of 2020. The screencast in the initial answer demonstrates the behavior with v2021.2.511 where the issue is missing. Attached is a sample application using Telerik UI for ASP.NET Core v2021.2.511 where the template column is also placed first and the correct column is hidden/shown when using the ColumnMenu.

Regards,
Aleksandar
Progress Telerik

[Greg]

Hi Aleksander, I updated the question with complete code of a grid that still has the issue. Please let me know if I can provide anything else, been trying to solve this one for years with no luck, must be some quirk in the way I'm using the grid.

[Aleksandar]

Specifying the version you use pointed me in the right direction. The issue reported was a known Bug fixed with R3 of 2020. I suggest updating to the latest version or a version after the indicated one in order to benefit from the fix.

[Greg]

Confirmed, when upgrading to 2021.2.511 this bug is fixed.