kendo mvc grid dynamic columns binding with format and other data for each column

[James]

hi,

we need to have a kendo ui mvc grid with dynamic columns binding, also each column has a specific format and name.

i've created a view model like so

    public class ReportGridColumnsViewModel
    {
        public DataTable GridColumns { get; set; }
        public Dictionary<string, ColumnProperty> ColumnData{ get; set; }
    }
}

the question is, how i do pass this view model from controller method, how do i use ToDataSourceResult with that, i do i not:

below wont work, because gridData is ReportGridColumnsViewModel, not IQueriable

        public virtual ActionResult GridData([DataSourceRequest]DataSourceRequest request, ReportGridViewModel viewModel)
        {
            var gridData = _transformer.GetGridData(viewModel, SessionUser);
            Session["KendoTradeAckGrid"] = gridData;
            return Json(gridData.ToDataSourceResult(request));
        }

we are using ajax as data source in grid.

thanks,

Inna

[Dimo]

Hi Inna,

Sending column configuration data together with the Grid data is not possible, because the column settings are applied during Grid initialization, which occurs before the data is requested. There is a possibility to use autogenerated columns, but then no special column settings can be used.

One possible option is to obtain the column settings via an Ajax request, then use them to create the Grid using client-side syntax. Afterwards, you will only need to serve the data.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid

Another option is to do the following:

- initialize the Grid using server-side syntax,
- request the column settings via an Ajax request
- apply the column settings (and any model settings) with the setOptions() method
- bind the Grid by executing the Grid dataSource's read() method

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setOptions

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#fields-dataSource

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource

Regards,
Dimo
Telerik