Show dynamic columns in my kendo grid keeping one column fixed.

See more:

Kendo

I want to show dynamic columns in my Kendo Grid keeping one column fixed. I have a complex model in my application, here are the two models below.

public class Product
{
public string ProductId { get; set; }

public int ProductQty { get; set; }

public double ProductPrice { get; set; }
}

public class ProductLocation
{
public string Location { get; set; }

public List<product> products { get; set; }
}

I am passing my model ProductLocation to View where my Kendo Grid is, I have populated my Model in my controller.

Below is my Kendo Grid, I have passed my Model to it, and I have used a foreach loop so that I can iterate for showing my dynamic column (Product), but I was unable to achieve my objective. I need the Product columns will generate dynamically keeping the Location column fixed. The Product column may change according to location, so I need dynamic generation of columns in my Kendo Grid

@(Html.Kendo().Grid<mynamespace.productlocation>()
.Name("ProductDataGrid")
.Columns(columns =>
{
columns.Bound(x => x.Location ).Width(25).HtmlAttributes(new { title = " #= Location # " }); //Tooltip

//foreach (var prod in Model)
//{
// columns.Group(group => group
// .Title(eqp.EqpType)
// .Columns(info =>
// {
// //info.Bound(prod.ProductId).Title("AVL").Width(15);
// //info.Bound(prod.ProductQty).Title("DMG").Width(15);
// //info.Bound(prod.ProductPrice).Title("RSV").Width(15);

// })
// .HeaderHtmlAttributes(new { style = "text-align:center" })
//);
//}
})
.Selectable()
.AutoBind(false)
.Pageable()
.Scrollable(builder => builder.Enabled(true).Height("100%"))
.DataSource(dataSource => dataSource.Ajax()
.PageSize(10)
.Read(read => read.Action("MyActionMethod", "MyController"))

)

.Navigatable()
.Pageable(p => p
.PageSizes(true)
.Refresh(true)
.ButtonCount(10)
)
)

Please suggest any solution for it so that i can generate the Product column in dynamic way.

Thanks.

What I have tried:

I have tried what i have written in my question.