Converting a Kendo MVC to Kendo Asp.NET Core Grid - client template columns

[Jessica]

Hi

I'm converting some code from Kendo MVC to Kendo aspnet core, and I've found something different, this used to work in the .cshtml

 @(Html.Kendo().Grid<AppointmentDateModel>()
          .Name("grid")
          .Columns(columns =>
          {
              columns.Template(c => { }).ClientTemplate("<div>#= TemplateString #</div>");
          })
    )

But it won't compile for Kendo asp.net core, it looks like ClientTemplate() has to be on a bound column (GridBoundColumnBuilder), rather than a template column (GridTemplateColumnBuilder).

Is there a standard way to code this, I don't have a column to bind to?

Thanks,

 

[Alexander]

Hi Jessica,

Thank you for reaching out and for taking the time to share the relevant configuration that is currently used on your end.

I noticed that there is no Telerik UI for the ASP.NET Core license associated with your account which limits our support services. In this regard, I would recommend renewing or obtaining a new license in order to benefit from all the latest bug fixes, features, and support services that the product provides. More information regarding the support plans can be found here:

• Support Plans

Regardless, the reason for the sporadic behavior regarding the compile-time error within your Razor view would most notably arise due to the fact that the .Template() API configuration option does not expose a functional expression overload. But rather only a string overload should be utilized instead:

.Columns(col =>
{  
    col.Template("#=ElementNumber#").Title("Element Number");
})

In addition, in the Telerik UI for ASP.NET Core suite, in particular, the usage of the .ClientTemplate() can be utilized for a column that is bound. For example:

.Columns(columns =>
{
    columns.Bound(c => c.Name).ClientTemplate("Template value");
})

With that being said, regarding the configuration of our components - the actual usage of the components of the UI for ASP.NET Core and UI for ASP.NET MVC does not differ substantially. In rare cases when there are specifics in the configuration for a given component, it will be outlined in the following resources:

• Server-Side API - https://docs.telerik.com/aspnet-core/api/grid

• Online Demos - https://demos.telerik.com/aspnet-core

• Documentation - https://docs.telerik.com/aspnet-core/introduction

I hope this information helps during your endeavors.

Kind Regards,
Alexander
Progress Telerik

[Jessica]

Thank you for alerting me to the license expiration, I have had that corrected and the licensing is now up to date.

The original question still stands, with .net framework it was possible to create a client template on a template column.  With .net core it has to be a bound column.  There is no column to bind for this example, how can this be achieved?

 

[Alexander]

Hi Jessica,

The ASP.NET Core framework has a bit different mechanics compared to the ASP.NET MVC. In the Core framework the Grid DataSource configuration does not support the server binding as in MVC.

In the context of column templates, they are no longer rendered on the server, thus indeed client-side templates can be exploited for bound columns only.

If the desired approach is to add a non-bound column, a potential suggestion would be to reconstruct the grid by using the .setOptions() and add the required column using the following layer of logic:

<script>
    $(document).ready(function(){
        var grid = $("#grid").data("kendoGrid");
        var columns = grid.columns;
        
        columns.push({
            title: "Empty Column",
            width: "100px",
            template: "#=OrderID# - #=ShipName#"
        })

        grid.setOptions({
            columns: columns
        });
    })
</script>    

 Here is a Telerik REPL that further illustrates the aforementioned approach:

• Telerik REPL for ASP.NET Core Example