MVC Grid helper omits HtmlAttributes classes or k-table-td

[Jay]

I am using the MVC helpers from telerik.ui.for.aspnetmvc.2023.2.829.commercial. When I do 

            @(Html.Kendo().Grid(Model.ServerColumnValues)
                .Name("NoKTableTd")
                .Selectable(select => select.Enabled(true).Type(GridSelectionType.Cell))
                .DataSource(dataSource => dataSource
                  .Server()
                  .Model(model => model.Id(p => p.Value1))
                )
                .Columns(columns =>
                {
                    columns.Bound(c => c.Value1).Width("200px").HtmlAttributes(new { Class = "ct" });
                    columns.Bound(c => c.Text).Width("200px").HtmlAttributes(new { Class = "rt" });
                })
                .Scrollable(scrolling => scrolling.Virtual(false).Enabled(true))
                .Sortable()
                .Pageable(paging => paging.Enabled(true)
                    .PageSizes(false)
                    .Input(false)
                    .Info(true)
                    .Numeric(false)
                    .PreviousNext(false)
                    .Messages(m => m.Display("Total Records: {2}")))
                .Groupable(grouping => grouping.Enabled(false))
                .Resizable(resize => resize.Columns(false))
            )

the grid cells are rendered without a k-table-td class:

<tr class="k-table-row k-alt k-table-alt-row k-master-row" role="row">
    <td class="ct" role="gridcell">1</td>
    <td class="rt" role="gridcell">These grid cells do not have a k-table-td class</td>
</tr>

When I do

            @(Html.Kendo().Grid(Model.AjaxColumnValues)
                .Name("NoHtmlAttributesClass")
                .Selectable(select => select.Enabled(true).Type(GridSelectionType.Cell))
                .DataSource(dataSource => dataSource
                  .Ajax()
                  .PageSize(250)
                  .ServerOperation(false)
                  .Read(read => read.Action("_IndexData", "Home", null))
                )
                .Columns(columns =>
                {
                    columns.Bound(c => c.Value1).Width("200px").HtmlAttributes(new { Class = "ct" });
                    columns.Bound(c => c.Text).Width("200px").HtmlAttributes(new { Class = "rt" });
                })
                .Scrollable(scrolling => scrolling.Virtual(false).Enabled(true))
                .Sortable()
                .Pageable(paging => paging.Enabled(true)
                    .PageSizes(false)
                    .Input(false)
                    .Info(true)
                    .Numeric(false)
                    .PreviousNext(false)
                    .Messages(m => m.Display("Total Records: {2}")))
                .Groupable(grouping => grouping.Enabled(false))
                .Resizable(resize => resize.Columns(false))
            )

the grid cells are rendered without the classes specified in their HtmlAttributes:

<tr class="k-table-row k-master-row" data-uid="fe1fd9d6-7894-4421-b257-80c6732bd2f0" role="row">
    <td class="k-table-td" role="gridcell">0</td>
    <td class="k-table-td" role="gridcell">These grid cells do not have their HtmlAttributes class</td>
</tr>

This case seems related to 

        function decorateCellWithClass(html) {
            var element = html;
            var classes = element.match(/class=["][^"]+/g);
            if (classes) {
                var cssClasses = classes[0].split('\"').pop();
                element = element.replace(cssClasses, cssClasses + " k-table-td");
            } else {
                element = element.replace("<td","<td class='k-table-td'");
            }

            return element;
        }

where the incoming html is 

"<td Class=\"ct\">"

and so the regex doesn't match. I've attached an example program which demonstrates both issues. I can certainly open this up as a support ticket if that is desired.

[Jay]

I guess I should note it also happens with telerik.ui.for.aspnetmvc.2023.2.718.commercial but did not happen with telerik.ui.for.aspnetmvc.2021.3.1109.commercial.

[Ivan Danchev]

Hello Jay,

After the CSP optimiztions we made to the Grid, the HtmlAttributes option can be used with the a js handler. For an example on how to set the HtmlAttributes by using a handler, refer to this comment in our Github issue: https://github.com/telerik/kendo-ui-core/issues/7174#issuecomment-1473687487

Regards,
Ivan Danchev
Progress Telerik

[Jay]

Hi Ivan. I modified the Index.cshtml to include the following after the text/css section:

<script type="text/javascript">
    function classCt(data) {
        return { class: "ct" };
    }
    function classRt(data) {
        return { class: "rt" };
    }
</script>

and modified each grid Columns section to be the following:

                .Columns(columns =>
                {
                    columns.Bound(c => c.Value1).Width("200px").HtmlAttributes("classCt");
                    columns.Bound(c => c.Text).Width("200px").HtmlAttributes("classRt");
                })

The second grid from my original post now renders correctly with both the class I set and the k-table-td class. However, now the first grid renders only with the k-table-td class and not the class I set.

I've attached the updated Index.cshtml in a zip so you can drop it in to the project I attached originally to see the problem.

[Ivan Danchev]

Jay,

This is because the first Grid has Server binding configured. Changing the following option:

.DataSource(dataSource => dataSource
    .Server()
    .Model(model => model.Id(p => p.Value1))
)

to:

.DataSource(dataSource => dataSource
    .Ajax()
    .Model(model => model.Id(p => p.Value1))
)

will result in the classes rendered properly.