CODEWITHSUNDEEP
asp.net-mvckendo-uikendo-gridkendo-asp.net-mvc
Balázs
Balázs

Reputation: 2929

Kendo Grid (ASP.NET MVC) - Set column titles of a DataTable-bound grid

I have a kendo grid that is built by using the ASP.NET MVC helpers. The grid is bound to a DataTable. If I bind my grid to this DataTable, the kendo helper uses the ColumnName property of each DataColumn to set the title of the column and the field property of the backing object.

The problem is that the column names do and must contain spaces, but if I set a column name to such a value, kendo throws a template error, because the field name cannot contain spaces as that would not be a valid javascript identifier. I tried setting the Caption property of the DataColumns but that does not seem to work. The bigger part of the problem is that creating a JS mapper function that would rename each column on the fly (or any workaround using hard-coded values for that matter) is not an option, because my DataTable is the result of an SQL pivot operation, so the column names are not at all predictable and therefore no mapping can be done beforehand.

How can I tell Kendo to use different titles for each column from their respective backing fields?

Upvotes: 1

Views: 1707

Answers (1)

dimodi
dimodi

Reputation: 4139

If you iterate the columns in the Grid declaration in the View, you will be able to set custom titles. Check this example and use column.Title("...");

https://github.com/telerik/ui-for-aspnet-mvc-examples/blob/master/grid/binding-to-datatable/KendoUIMVC5/Views/Home/Index.cshtml

.Columns(columns =>
{
    foreach (System.Data.DataColumn column in Model.Columns)
    {
        var c = columns.Bound(column.ColumnName);
        if (column.ColumnName == "UnitPrice")
        {
            c.ClientFooterTemplate("sum:#:sum#").ClientGroupFooterTemplate("sum:#:sum#");
        }
        else if (column.ColumnName == "UnitsInStock")
        {
            c.ClientFooterTemplate("max:#:max#").ClientGroupFooterTemplate("avg:#:average#");
        }
    }
    columns.Command(cmd=>cmd.Edit());
})

Upvotes: 1

Related Questions