Setting scope attribute on GridTableCell?

7 posts, 1 answers
  1. Scott
    Scott avatar
    4 posts
    Member since:
    Jan 2009

    Posted 30 Apr 2009 Link to this post

    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


  2. Answer
    Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 05 May 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jeff
    Jeff avatar
    51 posts
    Member since:
    Aug 2007

    Posted 14 Jul 2009 Link to this post

    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





  5. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 15 Jul 2009 Link to this post

    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.
  6. Jeff
    Jeff avatar
    51 posts
    Member since:
    Aug 2007

    Posted 16 Jul 2009 Link to this post

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

    Thanks,
    Jeff


  7. Ken Lassesen
    Ken Lassesen avatar
    37 posts
    Member since:
    Nov 2008

    Posted 18 Feb 2010 Link to this post

    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";  
                    }  
                }  
            }  
        }  

     

     

  8. Jeff
    Jeff avatar
    51 posts
    Member since:
    Aug 2007

    Posted 19 Feb 2010 Link to this post

    Thanks for the code, Ken. Very useful.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017