Ajax Property Binding in HtmlAttributes

[Jared]

Hi, I'm updating our version of the Kendo Grid from 2021 (don't recall the exact version) to 2023.1.117 and, among other changes, it seems that the following syntax for binding the Description property to data_description is no longer valid:

 columns.Bound(w => w.Description).Width(100).Title("Description")
            .HtmlAttributes(new { @class = "someClass", data_description = "#=Description#" });

Similar to what is shown at the bottom of this thread:

https://www.telerik.com/forums/creating-data-bound-html-attributes-in-mvc-grid-cells

This was working prior to this update, but I can't find any documentation on the change within the site and the grid example shown here:

https://demos.telerik.com/aspnet-mvc/grid

seems to indicate that it should still work this way, though that example may be outdated.

Note that the same Description property, referenced the same way (#-Description#) still works inside of a ClientTemplate.

[Jared]

I found this in the release history for version 2023.1.314 

https://github.com/telerik/kendo-ui-core/issues/7174

Which indicates that the previous method of formatting will no longer work with the same syntax and introduces a new overload for handling it.

This is very unfortunate given the number of places we're using this in our application that will need to be updated. Also that I'll have to either grab a 2022 version or figure out how to work with the new file structure in the more up to date 2023 versions in order to get the new overload.

[Eyup]

Yes, you are correct. As mentioned in the referenced github issue, since R1 2023 version, as per the CSP compliance initiative, we had to remove the kendo templates from the source of our components, as they are not compatible with the unsafe-eval directive.

In order to achieve the desired behavior, I would recommend using a function handler. Here is an example:

// column configuration
columns.Bound(p => p.OrderDate).HtmlAttributes("attributesHandler");

//handler
function attributesHandler(data) {
  return { title: `Order Date: ${kendo.toString(data.OrderDate, 'dd-MM-yyyy')} ` }
}

The data parameter represents the current dataItem, so feel free to use it for the desired conditions in the handler. In this specific case, it should be similar to this:

function attributesHandler(data) {
  return { class: `data.SalesYOY_Color` }
}

An alternative solution is to use a javascript approach to apply the attribute.

This can happen by leveraging the .Events(e=>e.DataBound("handler")) event handler provided by the Grid:
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/databound

Here is an example:

function onDataBound(e) {
    var grid = e.sender;
    var gridRows = grid.tbody.find("tr");

    gridRows.each(function (e) {
        var dataItem = grid.dataItem($(this));
        var salesValue = dataItem.Sales_YTD;
        var FreightValue = dataItem.Freight;
        var salesCell = $(this).find("td").eq(1);
        if (salesValue > 100) {
            $(this).addClass("alert alert-success");
        }
        else {
            $(this).addClass("alert alert-warning");
        }
    });
}

 

Excuse us for the inconvenience this change has caused you. I have updated your Telerik Points as a token of gratitude for your efforts and understanding.