Add dynamic columns in Kendo Grid MVC

Question

We are trying to add dynamic columns in between static columns in kendo grid. I tried a lot of examples online but nothing worked for me.

We have the following setup

public class Columns { public int Id { get; set; } public int Column1 { get; set; } public string Column2 { get; set; } public string Column3 { get; set; } public IReadOnlyCollection<DynamicColumns> DynamicColumns { get; set; } } public class DynamicColumns { public string ColumnName { get; set; } public string ColumnValue { get; set; } }

The grid is being initialized but now we want to add mulitple dynamic columns in the grid.

 @(Html.Kendo().Grid(Model) .Name("Grid") .Columns(columns => { columns.Bound(e => e.Column1) .Width("175px") .Title(Localizer["Column1Name"].Value) .Filterable(false); columns.Bound(e => e.Column2) .Width("200px") .Title(Localizer["Column2Name"].Value) .Filterable(f => f.Multi(true)); //Between Column2 and Column3, we want to add the dynamic columns, I have tried a lot of examples online but was not successfull. columns.Bound(e => e.Column3) .Width("125px") .Title(Localizer["Column3Name"].Value) .Format("{0:dd MMM yyyy}"); .Mobile() .Sortable(s => s.AllowUnsort(false)) .DataSource(ds => ds .Ajax() .ServerOperation(false) .PageSize(Model.PageSizes.ToArray()[0]) ) )

Example data set.

 [{ ID: 10 Column1: "C1" Column2: "John", Column3: "Doe", DynamicColumns: { { Name: "Dynamic Col 1", Value: "Dynamic Val 1",}, { Name: "Dynamic Col 2", Value: "Dynamic Val 2",}, { Name: "Dynamic Col 3", Value: "Dynamic Val 3",}, } }, { ID: 20 Column1: "C2" Column2: "Peter", Column3: "Pan", DynamicColumns: { { Name: "Dynamic Col 2", Value: "Dynamic Val 2",}, { Name: "Dynamic Col 3", Value: "Dynamic Val 3",}, { Name: "Dynamic Col 4", Value: "Dynamic Val 4",}, } }, { ID: 30 Column1: "C3" Column2: "Mike", Column3: "Kit", DynamicColumns: { { Name: "Dynamic Col 6", Value: "Dynamic Val 6",}, } }];

The grid output we are looking for is as below.

Please let us know if you have any suggestions.

Thank you!!

I updated my answer with a link to Telerik, i think you can also do it that way — Lee Stevens
– Lee Stevens, Commented Feb 19, 2021 at 3:03

Lee Stevens · Accepted Answer · 2021-02-19 21:16:30Z

It is possible i do it with a report i generate:

@(Html.Kendo().Grid<TaskReportLine>() .Name("TaskReportGrid") .Columns(columns => { foreach (var property in Model.Report.Properties.OrderBy(x => x.Order)) { var reportProperty = property.Property; if (!property.Enabled) continue; columns .Bound($"{reportProperty.Name}") .Title(reportProperty.Title) .Width(reportProperty.Width) .Format(reportProperty.Format) .ClientTemplate(reportProperty.ClientTemplate) .ClientFooterTemplate(reportProperty.ClientFooterTemplate) .ClientGroupHeaderTemplate(reportProperty.ClientGroupHeaderTemplate) .ClientGroupFooterTemplate(reportProperty.ClientGroupFooterTemplate) .Hidden(reportProperty.Hidden); } }))

I have a class with a List of properties, and i enabled disabled them as required to make it dynamic

public class Report { public virtual ICollection<ReportProperty> Properties { get; set; } } public class ReportProperty { /// <summary> /// (Property) Name /// </summary> [Required] public string Name { get; set; } /// <summary> /// Title (Displayed Text) /// </summary> [Required] public string Title { get; set; } /// <summary> /// Size /// </summary> public int Width { get; set; } = 100; // Removed extra fields just and example /// <summary> /// Enabled /// </summary> [Required] public bool Enabled { get; set; } = false; }

You could also look at this: https://demos.telerik.com/aspnet-core/grid/columnsettings

Thank you for your reply. I did try both ways, @(Html.Kendo().Grid<ViewModel>(), it is complaining that i don't have those dyamic columns on the ViewModel. On the above example you added @(Html.Kendo().Grid<TaskReportLine>(), i was curious did know before hand all the properties that you might use. The Kendo link you added also has all properties already defined on the view model
@oopTiger, yes sorry. the class has all possible properties. Then in the VM i disable any Properties i don't want to show i updated the answer to include the if (!property.Enabled) continue; in the col foreach.
Thank you so much, we will not know all the properties before hand, these are values entered by users and when they select include on the grid we show it, i did not find any way to add dynamic columns without having to add all the properties first.

Collectives™ on Stack Overflow

Add dynamic columns in Kendo Grid MVC

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related