A strategy for building a Section 508/WCAG Telerik radGrid page

By -

Accessibility and translations can often result in a medusa head for code. On one hand you want a feature rich grid but you are constrained by Section 508.  Managing and tracking resource mnemonic across a large project becomes a nightmare (and very very boring code typing for developers which usually impacts quality control).  Another pain with a large site is consistency of presentation.

 

What if I claim that all you need to do is toss the code below into a page and be done with coding!

 

The Web Page Content:

   1: <telerik:RadGrid runat="server" ID="AccountSummaryGrid" DataSourceID="AccountSummaryDb" AccessKey="X">
   2:     <MasterTableView AutoGenerateColumns="false" DataKeyNames="AccountName">
   3:         <Columns>
   4:             <telerik:GridBoundColumn DataField="AccountName" UniqueName="Grid_AccountName">
   5:             </telerik:GridBoundColumn>
   6:             <telerik:GridBoundColumn DataField="Description" UniqueName="Grid_AccountDescription">
   7:             </telerik:GridBoundColumn>
   8:             <telerik:GridBoundColumn DataField="Balance" UniqueName="Grid_AccountBalance">
   9:             </telerik:GridBoundColumn>
  10:             <telerik:GridBoundColumn DataField="CreditLimit" UniqueName="Grid_AccountCreditLimit">
  11:             </telerik:GridBoundColumn>
  12:             <telerik:GridBoundColumn DataField="OwnershipType" UniqueName="Grid_OwnershipType">
  13:             </telerik:GridBoundColumn>
  14:         </Columns>
  15:     </MasterTableView>
  16: </telerik:RadGrid>

With the page behind code being a horrible:

   1: protected void Page_Load(object sender, EventArgs e)
   2: { 
   3:     RadGridUtilities.ApplyDefaultSettings(AccountSummaryGrid);
   4: }

There are many tricks (and enhancement not shown), but the first item is to give the user the option to put the site into Accessibility Mode. If you give that option then only the pages while in Accessibility Mode must comply with Section 508. You can be as feature rich as you want elsewhere!!

 

This is what the one C# statement above does.

  • Provide web site defaults to the grid (every grid…), you want the defaults changed – it occurs in one spot only not in 100 pages!
  • Provide translation that is based off of the Control.Id (SO no more “Button1” but descriptive “ButtonToRetrieveStatement”
  • Modify the grid for what you want to do for accessibility.

There are a few items that I excluded (like automatically creating Resx entries for every phrase dynamically and self-auditing for 508 compliance) so the code is clearer. 

/// <summary>
/// Applies the default settings to the page. If user customization is implemented
/// the settings here would come from their preferences stored in a Session object.
/// </summary>
/// <param name="grid">a radGrid control</param>
/// <param name="onGetOnly">Determines if the settings are down on every postback or only on first GET</param>
public static void ApplyDefaultSettings(RadGrid grid, bool onGetOnly)
{
    // Uniquenames should have an underscore (_) in it. grid_ is the recommended prefix so that
    //localization may identify items used in grids
    char[] sepUnique = { '_', ' ' };

    // Items requiring     
    grid.ItemCreated += grid_ItemCreatedAddRowScope;

    // Get translations. For items that Telerik may have translated use fallback version. 
    grid.MasterTableView.Caption = ResourceTranslation.TranslateField(string.Format(CultureInfo.CurrentCulture, "%ContentPage%{0}_Caption%", grid.ID));
    grid.MasterTableView.CommandItemSettings.AddNewRecordText = ResourceTranslation.TranslateField("%MasterPage%Grid_AddNewRecordText%", grid.MasterTableView.CommandItemSettings.AddNewRecordText);
    grid.MasterTableView.CommandItemSettings.ExportToCsvText = ResourceTranslation.TranslateField("%MasterPage%Grid_ExportToCsvText%", grid.MasterTableView.CommandItemSettings.ExportToCsvText);
    grid.MasterTableView.CommandItemSettings.ExportToExcelText = ResourceTranslation.TranslateField("%MasterPage%Grid_ExportToExcelText%", grid.MasterTableView.CommandItemSettings.ExportToExcelText);
    grid.MasterTableView.CommandItemSettings.ExportToPdfText = ResourceTranslation.TranslateField("%MasterPage%Grid_ExportToPdfText%", grid.MasterTableView.CommandItemSettings.ExportToPdfText);
    grid.MasterTableView.CommandItemSettings.ExportToWordText = ResourceTranslation.TranslateField("%MasterPage%Grid_ExportToWordText%", grid.MasterTableView.CommandItemSettings.ExportToWordText);
    grid.MasterTableView.CommandItemSettings.RefreshText = ResourceTranslation.TranslateField("%MasterPage%Grid_RefreshText%", grid.MasterTableView.CommandItemSettings.RefreshText);
    grid.MasterTableView.CssClass = ResourceTranslation.TranslateField("%MasterPage%Grid_CssClass%", grid.MasterTableView.CssClass);
    grid.MasterTableView.Summary = ResourceTranslation.TranslateField(string.Format(CultureInfo.CurrentCulture, "%ContentPage%{0}_Summary%", grid.ID));

    // This section would be used if images are to be customized for languages (unlikely)
    //    grid.MasterTableView.CommandItemSettings.AddNewRecordImageUrl = ResourceTranslation.TranslateField(grid.MasterTableView.CommandItemSettings.AddNewRecordImageUrl);
    //    grid.MasterTableView.CommandItemSettings.ExportToCsvImageUrl = ResourceTranslation.TranslateField(grid.MasterTableView.CommandItemSettings.ExportToCsvImageUrl);
    //    grid.MasterTableView.CommandItemSettings.ExportToExcelImageUrl = ResourceTranslation.TranslateField(grid.MasterTableView.CommandItemSettings.ExportToExcelImageUrl);
    //    grid.MasterTableView.CommandItemSettings.ExportToPdfImageUrl = ResourceTranslation.TranslateField(grid.MasterTableView.CommandItemSettings.ExportToPdfImageUrl);
    //    grid.MasterTableView.CommandItemSettings.ExportToWordImageUrl = ResourceTranslation.TranslateField(grid.MasterTableView.CommandItemSettings.ExportToWordImageUrl);
    
    // Site specific options. 
    // If User Options are allowed, the user's setting would be assigned instead.
    grid.AllowPaging = true;
    grid.AllowSorting = true;
    grid.ExportSettings.FileName = grid.ID;
    grid.ExportSettings.IgnorePaging = true;
    grid.ExportSettings.OpenInNewWindow = true;
    grid.ExportSettings.Pdf.Author = "Lassesen Consulting, LLC";
    grid.ExportSettings.Pdf.PageTitle = grid.MasterTableView.Caption;
    grid.ExportSettings.Pdf.Subject = grid.ID;
    grid.MasterTableView.AllowPaging = true;
    grid.MasterTableView.AllowSorting = true;
    grid.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.TopAndBottom;
    grid.MasterTableView.CommandItemSettings.ShowExportToCsvButton = true;
    grid.MasterTableView.CommandItemSettings.ShowExportToExcelButton = true;
    grid.MasterTableView.CommandItemSettings.ShowExportToPdfButton = true;
    grid.MasterTableView.CommandItemSettings.ShowExportToWordButton = true;
    grid.MasterTableView.PagerStyle.Mode = GridPagerMode.NextPrevNumericAndAdvanced;
    grid.PageSize = 60;

    // Changes for accessibility on a Grid Level
    // Remember hanidcap can be cognitive or physical -- so trim lots
    // of features
    if (Section508.UserSetting)
    {
        grid.AllowCustomPaging = false;
        grid.AllowFilteringByColumn = false;
        grid.AllowMultiRowEdit = false;
        grid.AllowMultiRowSelection = false;
        grid.MasterTableView.AllowPaging = false;
        grid.MasterTableView.AllowSorting = false;
        grid.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.None;
        grid.MasterTableView.CommandItemSettings.ShowExportToCsvButton = false;
        grid.MasterTableView.CommandItemSettings.ShowExportToExcelButton = false;
        grid.MasterTableView.CommandItemSettings.ShowExportToPdfButton = false;
        grid.MasterTableView.CommandItemSettings.ShowExportToWordButton = false;
        grid.MasterTableView.ShowGroupFooter = false;
        grid.ShowGroupPanel = false;
        grid.ShowStatusBar = false;
    }

    int colNo = 0;
    foreach (GridColumn col in grid.MasterTableView.Columns)
    {
        // uniquekeys are assumed to be compounded with an underscore
        //separator. Only last part is used as HeaderAbbr
        var translationkey = col.UniqueName;
        var parts = col.UniqueName.Split(sepUnique, System.StringSplitOptions.RemoveEmptyEntries);
        col.HeaderAbbr = parts[parts.Length - 1];
        // CHANGES for Accessibilty at a Column Level
        if (Section508.UserSetting)
        {
            col.AutoPostBackOnFilter = false;
            col.Groupable = false;
            col.HeaderButtonType = GridHeaderButtonType.PushButton;
            col.Resizable = false;
        }
        string tooltipMnemonic = string.Empty;
        //Determine if sortable and adopt appropriate tooltip
        if (grid.AllowSorting)
        {            
            if (! string.IsNullOrEmpty(col.SortExpression))
            {
                tooltipMnemonic = "Sort";
            }
            tooltipMnemonic =string.Format(CultureInfo.CurrentCulture, "%ContentPage%{0}_{1}Tooltip%", translationkey,tooltipMnemonic);
            col.HeaderTooltip = ResourceTranslation.TranslateField(tooltipMnemonic);
        }
        col.HeaderText = ResourceTranslation.TranslateField(string.Format(CultureInfo.CurrentCulture, "%ContentPage%{0}%", translationkey));
    }
}

 

The first item of importance is the event handler that is added

grid.ItemCreated += grid_ItemCreatedAddRowScope;

 

Grids require at least one <td scope=”row”> for Section 508 which is not natively provided by Telerik, so we must add it while the item is being created. This is done with the code below. The columns are those that are in the DataKeyNames, which makes it almost happens by designed-accident.

   1: /// <summary>
   2: /// Routine to add scope="row" to the grid for 508 compliance. The items are those specified in
   3: /// DataKeyNames
   4: /// </summary>
   5: /// <param name="sender">a telerik radgrid control</param>
   6: /// <param name="e"></param>
   7: static void grid_ItemCreatedAddRowScope(object sender, GridItemEventArgs e)
   8: {
   9:     if (e.Item is GridDataItem)
  10:     {
  11:         GridDataItem dataItem = e.Item as GridDataItem;
  12:         foreach (string key in dataItem.OwnerTableView.DataKeyNames)
  13:         {
  14:             foreach (GridColumn col in dataItem.OwnerTableView.Columns)
  15:             {
  16:                 if (col.IsBoundToFieldName(key))
  17:                 {
  18:                     TableCell cell = dataItem[col.UniqueName];
  19:                     cell.Attributes["scope"] = "row";
  20:                 }
  21:             }
  22:         }
  23:     }
  24: }

The other item is the ResourceTranslation.TranslateField which is a widget between the code and the usual handling of resources. It allows me to identify if a resource is missing as well as do some fancy stuff like “lookup the term and if you do not find it, then use what Telerik provides”;

 

That’s it.

Comments

Post a Comment

Popular posts from this blog

Yet once more into the breech (of altered programming logic)

By -
Once upon a time, long long ago, I wrote 8-bit programs in Tiny-C with absolute addressing being the only reality.  Then we had Borland Turbo-C with relative addresses and the joys of relative assembly jumps. Enter Windows and the joys of locking and unlocking memory blocks that you must allocated and manage yourself. Then came Visual Basic which evolved into .Net CLR and decreasing awareness of what is happening under the hood.   With VS2010 including F# and enhanced parallelism in .Net4, we actually have to go retro a bit – back to the world of having to understand the hardware. CPU speeds are no longer increasing – I have an old laptop from six+ years ago that ran at 3.2 GHz. This year I updated one of my machines off-the-shelf from Costco.com, an I7-920 with 4 cores and hyper-threading (8 CPUs appears in Task Manager) and 12 GB of DDR3 RAM. This week I ordered from Costco a Phenom II X6 (Yes – 6 REAL CORES) for one of my daughters.  This CPU will (according to YouTube demos) o
Read more

Simple WP7 Mango App for Background Tasks, Toast, and Tiles: Code Explanation

By -
Image
This is a continuation of this post , explaining how the sample app works. Caution : This sample isn’t meant as an example of best patterns and practices. If you see something in the code you would never do, then don’t. Solution File Organization The app has three Visual Studio Projects: the app, the agent, and the shared code library between them. One of the great things about Mango is that now the built-in Visual Studio Unit test functionality is available. By separating out the meat of the work into the SampleShared project, I can also focus my unit testing there. SampleApp1 The app has a MainPage, a ViewModel, and the WMAppManifest.xml file modified to note my ExtendedTask of BackgroundServiceAgent. The Agent is extremely simple with a call to the shared library, an update to the Tile, and a call to pop up Toast. The meat of the work is in the SampleShared library. The AgentMgr manages the background agent : add, remove, find, run now. It is only called f
Read more

How to convert SVG data to a Png Image file Using InkScape

By -
Image
Introduction The project required the need to put the visual pie chart on a web page on the client and in a Pdf file created on the server. I eventually choose to use a Telerik Kendo DataViz Chart control on the client, and use a PNG file on the server for the Pdf file. This blog post will explain the process and code to convert the client-side pie chart Svg data to a Png file, and provide a download to the working code. Prerequisites You need to have a trial version of the Telerik Kendo library installed in order to make the sample code work. You also need InkScape installed. InkScape is the application that does the actual conversion. You will need to change the Web.config appSetting of “ExeDirectoryForInkscape” to represent your own installation location. Any SVG Data Will Work The pie chart was created using the Telerik Kendo DataViz chart control. While I name a specific control, as long as you have access to the SVG data, the same conversion process on the server will
Read more