Use both Template and ClientTemplate for a Kendo Grid column

Question

I'm using a kendo grid in ASP.NET MVC and I want to apply some color rules to the cells of certain columns. For that I have tried HtmlAttributes (using a class seemed to be the simplest way to do it) and ClientTemplate, but both were not working. Moreover, I create a number of columns depending on variables in the ViewModel.

I was about to declare a tab of booleans meaning if each columns has to be visible (so that it appears to seem static). I can't use columns.Bound() dynamically, but then I am able to dynamically add columns with columns.Template() in a for loop.

Html.Kendo().Grid<ViewModelPilotageRetroPlanningOpeDetail>() //Bind the grid to ViewBag.Products
        .Name("pilotageRetroPlanningListeOpesDivabc")
        .BindTo(Model.ListeOpes)
        .Columns(columns =>
        {
             columns.Bound(ope => ope.NbTachesRetard).Title("Nb tâches en retard").Template(@<text> @if (item.NbTachesRetard != 0)
             {
                 <span class="retards"> @item.NbTachesRetard </span>
             }
             else
             {
                 <span class="pasDeRetards"> @item.NbTachesRetard </span>
             }
             </text>);


            for (int i = 0; i < Model.NombreJalonsUtilises; i++)
            {
            var index = i;
            columns.Template(@<text> @item.ListeStatutJalon.ElementAt(index).ToString() </text>).Title("J" + (i + 1).ToString()).Width(25);
             }
        }

It works and display the columns as wanted enter image description here

Now I need to display images instead of the numbers, and I would need to use a ClientTemplate to associate cells to img tags

My question is : Is it possible to use both Template and ClientTemplate to add a class based on the value given by @item.ListeStatutJalon.ElementAt(index) ? Because when I add ClientTemplate, the values of the template is not appearing in the cells.

Answer 1

.Template() is used with server binding . ClientTemplate() is used with client/ajax binding . It is possible to use a mixed binding approach as well. In this case, the Grid will be initially server-bound and will render its initial data from the server. For subsequent data operations (eg paging), the widget will use already loaded data. Here is how to configure the Grid for the latter:

http://demos.telerik.com/aspnet-mvc/grid/local-data-binding