How to provide the Header Text for first column, while using the NestedViewTemplate in RadGrid ?

1 Answer 16 Views
Grid
Kannan
Top achievements
Rank 1
Kannan asked on 29 Sep 2021, 05:11 PM

I need to give the header text for the first column, while using the NestedViewTemplate in RadGrid.

I am getting 508 compliance error as "Empty Table Header", for the first column. I have attached screenshot, which is not having Header Text.

1 Answer, 1 is accepted

Sort by
0
Doncho
Telerik team
answered on 04 Oct 2021, 01:00 PM

Hello Kannan,

There is no text in the header cell of the Expand/Collapse column, which is causing the error you get. 

In fact, there are multiple resources and discussions on the topic of whether the missing text in a table cell is actually an accessibility issue and how to fix that:

In case passing the 508 compliance evaluation is required, you can use some custom JavaScript to add text in the respective table cell. You can make the text invisible and use an aria-label for adding some accessibility information:

$telerik.$(document).ready(function () {
    var headerCell = $telerik.$('.RadGrid .rgHeader.rgExpandCol');
    headerCell.text("-");
    headerCell.css("color", "transparent");
    headerCell.attr("aria-label", "ExpandColumn");
})
I hope this information will prove helpful. Please let me know if any questions come up.

Kind regards,
Doncho
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Kannan
Top achievements
Rank 1
Answers by
Doncho
Telerik team
Share this question
or