Formatting data server-side

[Marcus]

Hi,

We've just bought the UI for ASP.NET Core components and have started using the Grid component in our ASP.NET Core 2.1 project. From what I understand, unlike the ASP.NET MVC grid, the ASP.NET Core grid is not a true server-side component and the Html and TagHelpers are basically just wrappers for the Kendo UI for jQuery client-side javascript based component, right?

If that's the case then what is the best way to implement server-side formatting/rendering of certain data in the columns of the grid? Until now we've used normal html tables and put our custom TagHelpers and text formatting functions calls directly in the cells of those tables (in the .cshtml files). For example we have a custom class that wraps an integer and converts that value to minutes and various other things.

I've noticed there is the ClientTemplate of the columns in the grid but you can't put TagHelpers or .ToString() methods in those templates since they are just evaluated in javascript on the client.

Is there a way to use the MVC grid in Core projects?

/Marcus

 

[Boyan Dimitrov]

Hello Marcus,

Indeed the ASP.NET Core and TagHelpers are just wrappers around the Kendo UI widgets and they do not have server-side rendering or binding. However most of the editor widgets (such as NumericTextBox, DatePicker, MaskedTextBox) do have a culture property. I guess you can try to set the culture property of the  DatePicker editor for example based on the culture on the server. The Kendo UI DatePicker  will be initialized on the client-side, but with a specific culture (based on the server culture). 

 

Regards,
Boyan Dimitrov
Progress Telerik

[Marcus]

I'm sorry, but I don't see how localization or culture have anything to do with my question. The question is how to get the results (plain-text or html strings) from our server-side functions into the grid columns/cells?

For example if we currently have statements in our razor view like this: @Model.SomeField.SomeFormattingFunction() or <some-taghelper someattribute=""></some-taghelper>

How can we use this in the grid, if at all possible? We certainly don't want to write duplicate javascript functions that simulate the server-side code (which can be quite advanced).

 

[Angel Petrov]

Hello,

As long as formatting goes there are a couple of ways one can achieve this.

1. Add a format for the property that the grid mode uses

[Display(Name = "Unit price")]
        [DataType(DataType.Currency)]
        [DisplayFormat(DataFormatString ="{0:C3}")]
        [Range(0, int.MaxValue)]
        public decimal UnitPrice
        {
            get;
            set;
        }

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("Grid")
    .Columns(columns =>
    {
            columns.Bound(p => p.UnitPrice).Width(180);
            ...
    })

 

2. The colum has a format property that can also format the value according to a standart .NET format.

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("Grid")
    .Columns(columns =>
    {
            columns.Bound(p => p.UnitPrice).Format("{0:C3}").Width(180);
         ...
    })

 

3. Use a clienttemplate and inside it call the kendo.format function and pass to it the desired format and data for the item.

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("Grid")
    .Columns(columns =>
    {
            columns.Bound(p => p.UnitPrice).ClientTemplate("#:kendo.format('{0:C3}', data.UnitPrice)#").Width(180);
            
    })

Using the ClientTemplate approach can allow you to implement format functionality using custom JavaScript if needed.

 

4. Another approach would be to format the dates, numbers and etc. on the server and bind the grid to string values. However this approach I would not recommend if editing will be enabled as it requires altering the model. For example if in the above examples the UnitPrice field is changed to string you can do something like this.

public ActionResult Products_Read([DataSourceRequest] DataSourceRequest request)
        {
            DataSourceResult result = productService.Read().ToDataSourceResult(request);
            List<ProductViewModel> products = result.Data as List<ProductViewModel>;
            for (int i = 0; i < products.Count; i++)
            {
                products[i].UnitPrice= // implement formatting
            }
            return Json(result);
        }

The last options the only way to format the values on the server as the grid for ASP.NET Core is bound on the client, thus the formatting should be applied there.

Regards,
Angel Petrov
Progress Telerik

[Marcus]

Thanks for the answer. However, we have already tried option 1 and 2 but it doesn't work with our custom formatting. On our custom datatype we have implemented IFormattable which works fine with standard razor tag helpers if we put the DisplayFormat attribute on the property, but your Grid-component doesn't seem to regard this interface at all (doesn't seem to call the custom .ToString(string format, IFormatProvider formatProvider) method on our datatype).

Since option 3 means we have to duplicate our server-side code in javascript, it's not a solution for us.

So that leaves us with option 4, which we also tried and it works, but like you said it has consequences if we want to do something more than just displaying the data.

Guess we will have to use something else than the Grid component in this case unfortunately.

[Angel Petrov]

Hello Marcus,

I am sorry to hear that the provided suggestions can not be of help. Currently I can not think of any alternative approach that is elegant as a solution. If the server-side formatting logic does not have a client-side equivalent it seems not possible to format the values as before.

Regards,
Angel Petrov
Progress Telerik