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

1 Answer 77 Views
Grid
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
Jay asked on 30 Aug 2023, 03:52 PM

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
Top achievements
Rank 2
Iron
Iron
Veteran
commented on 30 Aug 2023, 06:21 PM

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.

1 Answer, 1 is accepted

Sort by
0
Accepted
Ivan Danchev
Telerik team
answered on 04 Sep 2023, 03:31 PM

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

Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.

Jay
Top achievements
Rank 2
Iron
Iron
Veteran
commented on 05 Sep 2023, 01:09 PM

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
Telerik team
commented on 08 Sep 2023, 01:30 PM

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.

 

Tags
Grid
Asked by
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
Answers by
Ivan Danchev
Telerik team
Share this question
or