Aspnet Core Grid is not loading when using Filterable configuration with dynamic columns

[Pasha]

I am getting loading error when using aspnet Core grid with dynamic columns and Filterable option. The grid is loading fine when the Filterable option is not configured. Also, events are not working properly. I am using 2024.4.1112 version.

Here is sample code

 @(
     Html.Kendo().Grid<dynamic>()
     .Name(Model.GridId)
     .Columns(columns =>
     {
         foreach (var col in Model.Columns)
         {
             var kendoColumn = columns.Bound(col.PropertyName);
             kendoColumn.Title(col.Title);
             kendoColumn.Width(col.Width);
             kendoColumn.Filterable(col.Filterable);
             if (!string.IsNullOrEmpty(col.Format))
             {
                 kendoColumn.Format(col.Format);
             }
             if (!string.IsNullOrEmpty(col.Template))
             {
                 kendoColumn.ClientTemplate(col.Template);
             }
             if (col.DataType == "boolean")
             {
                 kendoColumn.HtmlAttributes(new { style = "text-align:center" });
             }
         }
     })
     .Pageable(p =>
     {
         p.ButtonCount(10);
         p.PageSizes(true);
         p.Refresh(true);
     })
     .Filterable(f => f.Mode(GridFilterMode.Menu))
     .Sortable()
     .ColumnMenu(c =>c.Filterable(true))
     .Reorderable(r => r.Columns(true))
     .Resizable(r => r.Columns(true))
     .DataSource(dataSource => dataSource
     .Ajax()
     .Read(read => read.Action("Entity", "History", new { entityName = Model.EntityName, pkValue = Model.PrimaryKeyValue, entityType = Model.EntityType, pkName = Model.PrimaryKeyName }))
     )
     .Events(e => e.Change("ob-select"))
     )

[Mihaela]

Hello Pasha,

I tested the case and noticed that the data types of the dynamic Grid columns are not recognized correctly. As a result, the filterable setting fails. Having this in mind, I would recommend setting the data type of the column in the Bound() method, as per the example below:

// Model
public class GridColumnViewModel
{
        public string PropertyName { get; set; }
        public string Title { get; set; }
        public int Width { get; set; }
        public bool Filterable { get; set; }
        public string Format { get; set; }
        public string Template { get; set; }
        public Type DataType { get; set; }
}

//Controller
public IActionResult Index()
{
            var model = new UserViewModel()
            {
                GridId = "grid1",
                Columns = new List<GridColumnViewModel>()
                {
                    new GridColumnViewModel() {
                        PropertyName = "OrderID",
                        Title = "Order ID",
                        Width = 100,
                        Filterable = true,
                        DataType = typeof(int)
                    },
                    new GridColumnViewModel() {
                        PropertyName = "Freight",
                        Title = "Freight",
                        Width = 100,
                        Filterable = true,
                        DataType = typeof(decimal)
                    },
                    ...
                }
            };
            return View(model);
}

//View
@model UserViewModel

@(
    Html.Kendo().Grid<dynamic>()
    .Name(Model.GridId)
    .Columns(columns =>
    {
        foreach (var col in Model.Columns)
        {
            var kendoColumn = columns.Bound(col.DataType, col.PropertyName);
            kendoColumn.Title(col.Title);
            kendoColumn.Width(col.Width);
            kendoColumn.Filterable(col.Filterable);
            if (!string.IsNullOrEmpty(col.Format))
            {
                kendoColumn.Format(col.Format);
            }
            if (!string.IsNullOrEmpty(col.Template))
            {
                kendoColumn.ClientTemplate(col.Template);
            }
            if (col.DataType.ToString() == "System.Boolean")
            {
                kendoColumn.HtmlAttributes(new { style = "text-align:center" });
            }
        }
    })
     .Pageable(p =>
    {
        p.ButtonCount(10);
        p.PageSizes(true);
        p.Refresh(true);
    })
    .Filterable(f => f.Mode(GridFilterMode.Menu))
    ...
)

I hope that helps.

Regards,
Mihaela
Progress Telerik