RadGrid 508 Compliance example

[Bruce]

I have a Rad Grid that includes:
1. Column filters
2. A grid
3. "Pagers" at the bottom with "VCR" controls, links to select specific page numbers, etc.

In order to be 508 compliant the Web page needs to be able to do the following w/o using a mouse:
1. Set a filter on a column
2. Tabbing from the last "filter" should go to the grid (the default seems to tab from the last filter column to the "pager" at the bottom of the form)
3. Provide "text" for the pager "buttons" (I saw some code for this, but could not get the VCR images to display)

I'm looking for a working example so that I could cut and paste the code into my code to make it work properly.

Thanks!

Bruce

[Dimo]

Hello Bruce,

In order to be able to filter without the mouse, you need to use the following:

ASPX

<telerik:RadGrid>
    <ClientSettings>
        <ClientEvents OnFilterMenuShowing="focusFilterMenu" />
    </ClientSettings>
</telerik:RadGrid>

Javascript:

function focusFilterMenu(sender, args)
{
    window.setTimeout(function(){args.get_menu().get_items().getItem(0).blur();args.get_menu().get_items().getItem(0).focus();}, 1);
}

This will focus the filtering menu's first item and activate the keyboard navigation.


>> "Tabbing from the last "filter" should go to the grid"

What do you mean by "grid" ? If you want to activate the first data row for keyboard navigation, you can use a keyboard shortcut, which will work at all times:

http://demos.telerik.com/aspnet-ajax/grid/examples/client/keyboardnavigation/defaultcs.aspx


In order to add text to the pager buttons, use the corresponding properties:

<PagerStyle NextPageText="next" FirstPageText="first" PrevPageText="prev" LastPageText="last" />

http://www.telerik.com/help/aspnet-ajax/grdpageritem.html

Regards,
Dimo
the Telerik team

[Bruce]

Thanks - that helps a bit.  But I still have some problems:
1. If a filer column is for a date, I can press the "enter key" to open the calendar.  But the "tab" keys do work (as they do in FormView where "ClientEvents-opPopupOpening" is specfied)
2. By "Tabbing from the last "filter" should go to the grid" I mean that, when I've tabbed to the last filter column and I have a pager below the grid, pressing the "tab" key takes me to the "pager" and not a link (e.g., for editing) in the first row of the grid.  Is there a keyboard shortcut that I can use to go to a "tabbable" field in the first data row of a grid?
3. If my grid has a "client select column, how do I provide a "tool tip" (or other info) so that the user can get a "message" that indicates what is in the corresponding row.

 

Thanks!

[Dimo]

Hi Bruce,

1. You can use the calendar popup with the keybord if you set EnableKeyboardNavigation="true" to the RadCalendar that the filtering picker(s) use.

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridFilteringItem)
    {
        ((e.Item as GridFilteringItem)["ColumnUniqueName"].Controls[0] as RadDatePicker).SharedCalendar.EnableKeyboardNavigation = true;
    }
}

2. Is there a keyboard shortcut that I can use to go to a "tabbable" field in the first data row of a grid?

No, but you can add an appropriate TabIndex programmatically to all tabbable controls in the data items. Use the RadGrid ItemCreated event for this.

http://www.telerik.com/help/aspnet-ajax/grdaccessingcellsandrows.html


3. Again, you can insert additional information or set control properties programmatically. This time, since the customization will depend on the datasource, you have to use the RadGrid's ItemDataBound event, because at that time you have the data cells filled with content from the datasource. Accessing cells and their values is done by using the column's UniqueName, as demonstrated in the above code snippet and the help article.

Regards,
Dimo
the Telerik team

[Bruce]

1.

I added the code

    if(e.Item is GridFilteringItem)
    {
        ((e.Item as GridFilteringItem)["ColumnUniqueName"].Controls[0] as RadDatePicker).SharedCalendar.EnableKeyboardNavigation = true;
    }

but get the error:

'Telerik.Web.UI.RadCalendar' does not contain a definition for 'EnableKeyboardNavigation' and no extension method 'EnableKeyboardNavigation' accepting a first argument of type 'Telerik.Web.UI.RadCalendar' could be found (are you missing a using directive or an assembly reference?)
My dll is 2010.2.713.35 7/12/2010

What DLL do I need?

------------------------------------------------------------------------------------------------------------------------------------------------------

2. My aspx page has the code 

<telerik:RadGrid id="RdGrid" runat="server"
     OnItemCreated="RdGrid_ItemCreated"
     OnItemDataBound="RdGrid_ItemDataBound"
     ...
     TabIndex="50"
>
   <PagerTemplate>
    <asp:Panel ID="PagerPanelNotLimit" Style="padding: 6px; line-height: 24px" runat="server"
      TabIndex="100"
    >
    ...
    </asp:Panel>
   </PagerTemplate>
   <PagerStyle Mode="NumericPages" PageButtonCount="10" />
    <CommandItemTemplate >
    ...
   </CommandItemTemplate>
   <Columns>
      <telerik:GridClientSelectColumn HeaderText = "" UniqueName="ClientSelectColumn" text="XXXX"  />
    ...

My cs page has

protected void RdGrid_ItemCreated(object source, GridItemEventArgs e)
 {
    if (e.Item is GridDataItem)
    {
        GridDataItem dataItem = e.Item as GridDataItem;
        //dataItem.TabIndex = 60; // Also tried this
        TableCell cell = dataItem["ClientSelectColumn"]; //where dataItem is object of type GridDataItem 
        cell.TabIndex = 60;
    }
 }
 protected void RdGrid_ItemDataBound(object source, GridItemEventArgs e)
 {
    if (e.Item is GridDataItem)
    {
      GridDataItem dataItem = e.Item as GridDataItem;
      //dataItem.TabIndex = 70; // Also tried this
      TableCell cell = dataItem["ClientSelectColumn"]; //where dataItem is object of type GridDataItem 
      cell.TabIndex = 70;
    }
 }

The tab order is:  last filter column-->Pager Template--> Client select column

I need the tab order to be: last filter column--> Client select column-->Pager Template

------------------------------------------------------------------------------------------------------------------------------------------------------

3.

Thanks - I set up

 if (e.Item is GridDataItem)
 {
     GridDataItem dataItem = e.Item as GridDataItem;
     TableCell cell = dataItem["ClientSelectColumn"]; //where dataItem is object of type GridDataItem 
     cell.ToolTip = "tool tip...........";
 }

[Dimo]

Hello Bruce,

1. You should use any official RadControls version, which is newer than yours - i.e. 2010.2.826 or later.

2. Set TabIndex to the checkboxes inside the cells, not the cells themselves.

Best wishes,
Dimo
the Telerik team

[Bruce]

For #2, I tried the code below, but get the same result. Is there some other way to specify the "checkbox"? Do I need to set the tabindex for the column headers?  If so, how do I do it?

Thanks!

 protected void RdGrid_ItemCreated(object source, GridItemEventArgs e)
 {
     Telerik.Web.UI.GridDataItem item;
     if (e.Item is GridDataItem)
     {
         item = (Telerik.Web.UI.GridDataItem)e.Item;
         item["ClientSelectColumn"].TabIndex = 60;
     }
     if (e.Item is GridPagerItem)
     {
         GridPagerItem gridPager = e.Item as GridPagerItem;
         gridPager.TabIndex = 150;
         Control numericPagerControl = gridPager.GetNumericPager();
         Control placeHolder = gridPager.FindControl("NumericPagerPlaceHolder");
         placeHolder.Controls.Add(numericPagerControl);
     }
    // headerItem["ProductName"].TabIndex = 55;
 }

[Dimo]

Hi Bruce,

item["ClientSelectColumn"].TabIndex = 60;

The above sets Tablndex to the table cell. Set it to the checkbox inside the cell by obtaining a reference to it (e.g. cell.Controls[0] etc).

Greetings,
Dimo
the Telerik team

[Bruce]

Could you please provide an example of code that sets some property of a control in cell?  I tried

         CheckBox chkClientSelectColumn = (e.Item as GridDataItem)["ClientSelectColumn"].Controls[0] as CheckBox;
         chkClientSelectColumn.TabIndex = 60;

and that did not work.

Thanks!

[Dimo]

Hello Bruce,

That code should work. Can you see the TabIndex applied in the resulting HTML output? Can you provide a demo?

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 4;
        int rowsNum = 3;
        string colName = "Column";

        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }

        for (int i = 1; i <= rowsNum; i++)
        {
            dr = dt.NewRow();

            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
            }
            dt.Rows.Add(dr);
        }

        (sender as RadGrid).DataSource = dt;
    }

    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            ((e.Item as GridDataItem)["mySelCol"].Controls[0] as CheckBox).TabIndex = 60;
        }
    }

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>RadControls for ASP.NET AJAX</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    AllowMultiRowSelection="true"
    OnNeedDataSource="RadGrid_NeedDataSource"
    OnItemCreated="RadGrid1_ItemCreated">
    <MasterTableView>
        <Columns>
            <telerik:GridClientSelectColumn UniqueName="mySelCol" />
        </Columns>
    </MasterTableView>
    <ClientSettings>
        <Selecting AllowRowSelect="true" />
    </ClientSettings>
</telerik:RadGrid>

</form>
</body>
</html>

Kind regards,
Dimo
the Telerik team

[Bruce]

The "TabIndex" appears to be in the HTML source.

You can view a demo at
http://www.chesdata.com/telerik/productsform.aspx

You can see the aspx page at

http://www.chesdata.com/telerik/productsform.aspx.txt
You can see the cs page atr

http://www.chesdata.com/telerik/productsform.aspx.cs.txt
Bruce

[Dimo]

Hi Bruce,

It seems that the browser (IE) behavior is not correct, because it gives precedence to <a> elements with no tabindex over <input> elements with tabindex. Below is a simple test code, which you can use to observe this. All <a> elements should either have a negative tabindex (in order to be excluded from the tab sequence) or have the largest positive tabindex (in order to be tabbed last).

<table>
<tr>
<td><input type="checkbox" value="1" tabindex="1" /></td>
<td><input type="text" value="1" tabindex="2" /></td>
<td><input type="checkbox" value="1" tabindex="3" /></td>
<td><a href="#" tabindex="4">a href</a></td>
</tr>
<tr>
<td><input type="checkbox" value="1" tabindex="1" /></td>
<td><input type="text" value="1" tabindex="2" /></td>
<td><input type="checkbox" value="1" tabindex="3" /></td>
<td><a href="#" tabindex="4">a href</a></td>
</tr>
<tr>
<td><input type="checkbox" value="1" tabindex="1" /></td>
<td><input type="text" value="1" tabindex="2" /></td>
<td><input type="checkbox" value="1" tabindex="3" /></td>
<td><a href="#" tabindex="4">a href</a></td>
</tr>
</table>

Greetings,
Dimo
the Telerik team

[Bruce]

IE and Firefox have the same problem. I think it's becuase the "tabindex" for the "grid" gets "assigned" to a "div" tag.  I think if I can set the "tabindex" for both the "column headers" and the "filter controls" that I can get it to work properly.  How do I do that?

Thanks!

[Dimo]

Hello Bruce,

On my test page Firefox behaves as expected with regard to set TabIndex attirbutes.

In order to set TabIndex to any control within the RadGrid, you can subscribe to the ItemCreated event and then use one of the following expressions to obtain a reference to a control in the current item (header item or filtering item):

1) myItem.FindControl("...control...id...")

or

2)

(myItem["...ColumnUniqueName..."].Controls[0] as LinkButton) - for the header item
(myItem["...ColumnUniqueName..."].Controls[0] as TextBox) - for the filtering item

myItem is e.Item cast to the current item type. Option 2 is easier to use in your case.


http://www.telerik.com/help/aspnet-ajax/grdaccessingcellsandrows.html


Regards,
Dimo
the Telerik team