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!!

Answer 1

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