kendo grid - dynamic column with cell format from database

Question

I have a SQL Table result.

ProductNumber ProductNumberColorClass OrderNumber OrderNumberColorClass

I am trying to use Kendo to render this information. Basically i need the output as

ProductNumber OrderNumber

Data value and Apply Css class( ProductNumberColorClass )

Basically this is a report with a lot of columns. The user can select only the columns that he wants to see.

I am able to render the grid using the examples from the web site. I am not able to apply.

My application is Asp.net mvc application

Update

I will try your feedback. This is my code. Basically i wanted to avoid coding for each column as the list is big around 50 . the report can be customized so the user can hide some columns. .So i used a loop. however in this scenario, the clienttemplate is not work. I am not very sure, if it is a code issue too.

If you can find what is wrong in my code it will help me learn about the issue too.

meanwhileI am going to manually type the columns and add a attribute as visible

@(Html.Kendo().Grid <DataTransferObjects.ViewModels.UserReportDataModel>()
    .Name("Grid")
    .HtmlAttributes(new { style = "height: 550px;" })
    .Pageable(pageable => pageable
        .Input(true)
        .Numeric(false)
     )
    .Sortable()
    .Scrollable(
        scr => scr.Height(430)
    )
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
         .Read(read => read.Action("GetReportData", "ShortTermPlanner").Data("AdditionnalParameters"))
        .PageSize(20)
        .ServerOperation(false)
     )
    .Columns(columns =>
    {
        var colIndex = 0;
        foreach (var col in Model.lstHeaderInformation)
        {
            if (col.SqlColumnName == "ProductNumber")
            {
                columns.Bound(col.SqlColumnName)
                        .Title(col.ColumnHeader)
                        .Filterable(false)
                        .Visible(col.IsVisible)
                        .Width(1190)
                        .ClientTemplate("<div style='background-color:red; text-align:center;width:70px'> #= ProductNumber # </div>");                                                                   

            }
            else
            {

                columns.Bound(col.SqlColumnName)
                            .Title(col.ColumnHeader)
                            .Filterable(true)
                            .Visible(true)
                            .Width(300)
                            .Locked(true)
                            .HtmlAttributes(new { @class = "selectedRow" });
            }
        }
    })
       .Resizable(resize => resize.Columns(true))
       .Reorderable(reorder => reorder.Columns(true))


)

Update 2 Adding the clienttemplate and specifying the column information worked. Thanks

However i am curious, is there a better way where i can loop through a 3 table which defines the column name, title and class that needed to be displayed and applied to my report.

what i am looking is

MY Report -- Select * from Report My header table Select colname, title, class from reportcoldefinication

so now for each matching colname from reportcoldefinication and Report. add a col to the grid with the class applied.

Siddhant Patra Siddhant Patra · Accepted Answer · 2017-03-26T08:29:44

You can use the template functionality for columns in the Kendo grid.
columns.Template(@<div class= '#=ProductNumberColorClass #'> #= ProductNumber#<div/>)

Have implemented one in the example in the below link. Its implemented using JQuery but you can use the razor syntax for kendo for achieving the same. http://dojo.telerik.com/ukIma/3

kendo grid - dynamic column with cell format from database

1 Answers