RadGrid 508 Compliance example

14 posts, 0 answers
  1. Bruce
    Bruce avatar
    33 posts
    Member since:
    Oct 2006

    Posted 17 Nov 2010 Link to this post

    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

  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 23 Nov 2010 Link to this post

    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
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bruce
    Bruce avatar
    33 posts
    Member since:
    Oct 2006

    Posted 23 Nov 2010 Link to this post

    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!

  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 26 Nov 2010 Link to this post

    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
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  6. Bruce
    Bruce avatar
    33 posts
    Member since:
    Oct 2006

    Posted 27 Nov 2010 Link to this post

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

  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 29 Nov 2010 Link to this post

    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
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  8. Bruce
    Bruce avatar
    33 posts
    Member since:
    Oct 2006

    Posted 02 Dec 2010 Link to this post

    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;
     }
  9. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 02 Dec 2010 Link to this post

    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
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  10. Bruce
    Bruce avatar
    33 posts
    Member since:
    Oct 2006

    Posted 02 Dec 2010 Link to this post

    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!
  11. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 02 Dec 2010 Link to this post

    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"
       
    <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
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  12. Bruce
    Bruce avatar
    33 posts
    Member since:
    Oct 2006

    Posted 02 Dec 2010 Link to this post

    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
  13. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 03 Dec 2010 Link to this post

    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
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  14. Bruce
    Bruce avatar
    33 posts
    Member since:
    Oct 2006

    Posted 03 Dec 2010 Link to this post

    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!
  15. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 08 Dec 2010 Link to this post

    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
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017