Setting scope attribute on GridTableCell?

[Scott]

Hello,
I would like to add the scope attribute to a GridTableCell. I know this can be done for a GridTableHeaderCell. Essentially, what I want to be generated is:

<td scope="row">stuff</td>

for the leftmost table cell. In my BindColumnValues method I have tried the following:

GridDataItem dt = (GridDataItem)e.Item;
GridTableHeaderCell rowHeader = (GridTableHeaderCell)dt["DocumentNumber"];
rowHeader.Scope = TableHeaderScope.Row;

but, of course, this generates an exception ("Unable to cast object of type 'Telerik.Web.UI.GridTableCell' to type 'Telerik.Web.UI.GridTableHeaderCell'.")

Is there a way to do this? Am I missing something obvious?

Thanks,
Scott

[Sebastian]

Hello Scott,

You can set the scope attribute for the grid items cells using the Attributes collection of the corresponding table cell. This operation can take place inside the ItemCreated server event handler of th grid, for example:

    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem dataItem = e.Item as GridDataItem;
            TableCell cell = dataItem["<MyColumnUniqueName"];
            cell.Attributes["scope"] = "row";
        }
    }

or from within your BindColumnValues method executed from the same handler. I hope this is applicable approach for your situation.

Best regards,

Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jeff]

Hello,

I have the same need. The solution provided almost works but has one major flaw- the cell is still a <td> not a <th>.

Here's what the output looks like:

<td scope="row">

I need:

<th scope="row">

Is there a way to tell RadGrid to change the type of tag to make my tables more 508 and search engine friendly?

Thanks,
Jeff

[Sebastian]

Hello Jeff,

Changing the data rows in the grid to header rows cannot be supported because this will conflict with the rendering model of the control and its built-in features. I hope that you understand our position on this subject and the approach posted previously is feasible for you.

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jeff]

I was reading the W3C standards and apparently <td scope="row"> is acceptable. So, that works for me.

Thanks,
Jeff

[Ken Lassesen]

The following code can actually simplify the process for many. If marks all cells that are based on the DataKeyNames as scope="row". In general that is the 508 intent, to identify a unique combination of columns that qualifies the data. I have this in a utility library and just add it as needed (instead of copy and paste across hunderds of pages).

 

/// <summary>
/// Routine to add scope="row" to the grid for 508 compliance. The items are those specified in
/// DataKeyNames
/// </summary>
/// <param name="sender">a telerik radgrid control</param>
/// <param name="e"></param>
static void grid_ItemCreatedAddRowScope(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem dataItem = e.Item as GridDataItem;
        foreach (string key in dataItem.OwnerTableView.DataKeyNames)
        {
            foreach (GridColumn col in dataItem.OwnerTableView.Columns)
            {
                if (col.IsBoundToFieldName(key))
                {
                    TableCell cell = dataItem[col.UniqueName];
                    cell.Attributes["scope"] = "row";
                }
            }
        }
    }
}

 

 

[Jeff]

Thanks for the code, Ken. Very useful.