Telerik Forums
UI for ASP.NET AJAX Forum
4 answers
152 views

I've got a Master Grid, with a NestedViewTemplate that has a sub grid in it. I want this sub grid to databind when a row in the Master Grid is expanded. The sub grid's binding method needs the data key from the Master Grid row to bind. I'm having trouble connecting this key to the sub grid, its always 0. I've reviewed the documention for NestedViewTemplates and NestedViewSettings but must still be doing something wrong. The docs for the NestViewTemplates refer to the working demo but it uses a Label to stash the Master Table row key rather than the NestedViewSettings which I'm trying to use. I've have been able to bind the sub grid table using various techniques such as stashing the Master Table row key in the label or using NeedsDataSource. These other methods won't work for me as they want to bind sub grid data for all rows of the master grid when the page is loaded and this is too slow.

 

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
     <telerik:RadScriptManager ID="BudgetAdjustmentScriptManager" runat="server" EnablePartialRendering="true"></telerik:RadScriptManager>

         <telerik:RadGrid ID="BudgetAdjustmentRadGrid" runat="server" Width="100%" AllowPaging="True" AllowSorting="true" AutoGenerateColumns="False" PageSize="20" DataSourceID="BugetAdjustmentRadGrid_ObjectDataSource" 
            AlternatingItemStyle-BackColor="#e6e6e6" ShowFooter="True">
            <MasterTableView CommandItemDisplay="Top" Width="100%" DataKeyNames="budget_adjustment_master_id" ShowGroupFooter="true" Name="Master">
                <Columns>
                    <telerik:GridEditCommandColumn ButtonType="FontIconButton" UniqueName="Edit"></telerik:GridEditCommandColumn>
                    <telerik:GridBoundColumn DataField="name" HeaderText="Name" UniqueName="name" MaxLength="50" ></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="number" HeaderText="Number" UniqueName="number" readonly="true"></telerik:GridBoundColumn>
                </Columns>
                <NestedViewSettings DataSourceID="BudgetAdjustmentItem_ObjectDataSource">
                      <ParentTableRelation>
                        <telerik:GridRelationFields DetailKeyField="budget_adjustment_master_id" MasterKeyField="budget_adjustment_master_id"  />
                      </ParentTableRelation>
                </NestedViewSettings>
                <NestedViewTemplate>
                    <asp:Panel ID="InnerContainer" runat="server" CssClass="viewWrap" Visible="True">
                        <telerik:RadGrid ID="BudgetAdjustmentItemRadGrid" runat="server" DataSourceID="BudgetAdjustmentDetail_ObjectDataSource" AllowPaging="true" AllowSorting="true" AutoGenerateColumns="false" >
                                <MasterTableView DataKeyNames="budget_adjustment_master_id, budget_adjustment_detail_id" HierarchyLoadMode="ServerOnDemand" PageSize="10" CommandItemDisplay="Top">
                                <Columns>
                                    <telerik:GridEditCommandColumn ButtonType="FontIconButton" UniqueName="Edit"></telerik:GridEditCommandColumn>
                                    <telerik:GridBoundColumn DataField="budget_adjustment_detail_id" HeaderText="ID" SortExpression="budget_adjustment_detail_id" UniqueName="budget_adjustment_detail_id" ReadOnly="true"></telerik:GridBoundColumn> 
                                    <telerik:GridBoundColumn DataField="budget_adjustment_operation" HeaderText="Operation" SortExpression="budget_adjustment_operation" UniqueName="budget_adjustment_operation" ReadOnly="true"></telerik:GridBoundColumn> 
                                    </Columns>
                            </MasterTableView>
                        </telerik:RadGrid>

                    </asp:Panel>
                </NestedViewTemplate>
            </MasterTableView>
        </telerik:RadGrid>
                        <asp:ObjectDataSource ID="BudgetAdjustmentDetail_ObjectDataSource" runat="server" TypeName="BudgetAdjustmentDetailDAL" SelectMethod="Get" SortParameterName="sort_expression" >
                            <SelectParameters>
                                <asp:Parameter Name="budget_adjustment_master_id" Type="Int32" />
                                <asp:Parameter Name="project_node_master_id" DefaultValue="25" Type="Int32" />
                            </SelectParameters>
                        </asp:ObjectDataSource>
    <asp:ObjectDataSource ID="BudgetAdjustmentItem_ObjectDataSource" runat="server" TypeName="BudgetAdjustmentMasterDAL" SelectMethod="Get">
        <SelectParameters>
            <asp:Parameter Name="budget_adjustment_master_id" Type="Int32" />
        </SelectParameters>
    </asp:ObjectDataSource>
    <asp:ObjectDataSource ID="BugetAdjustmentRadGrid_ObjectDataSource" runat="server" TypeName="BudgetAdjustmentMasterDAL" SelectMethod="Get" SortParameterName="sort_expression">
        <SelectParameters>
            <asp:Parameter Name="project_node_master_id" DefaultValue="33" Type="Int32" />
        </SelectParameters>
    </asp:ObjectDataSource>
</asp:Content>

Konstantin Dikov
Telerik team
 answered on 18 Jul 2017
1 answer
127 views

With Telerik 2017 R2 version, the toolbar hided the drowdown menu when Toobar Mode property was not "default" (e.g. floating or pagetop,..). How to bring the dropdown menu to  front ?(maybe a bug of this version)

 

 

Rumen
Telerik team
 answered on 18 Jul 2017
4 answers
59 views

OK in short, I have one grid that, based on row selection, populates another grid. I would like filtering on the first grid to "reset"/"clear" the second grid, and obviously filter the first grid. The problem I'm seeing is that only one event will fire - if I make the filter happen first, the filter works but the .fireCommand() event doesn't fire. If I make the .fireCommand() event first, the event is fired but the filter doesn't happen. Code for the filter function below.

 

function NameChanged(sender) {
    var firstGrid = $find("<%= rgUsers.ClientID %>").get_masterTableView();
    var secondGrid = $find("<%= rgAccess.ClientID %>").get_masterTableView();
 
    if (sender.get_value() == "") {
        tableView.filter("gbcFullName", sender.get_value(), "NoFilter");
    }
    else {
        tableView.filter("gbcFullName", sender.get_value(), "Contains");
    }
 
    secondGrid.fireCommand("Clear", "");                                       
}
J
Top achievements
Rank 1
 answered on 18 Jul 2017
7 answers
4.1K+ views
I am querying my database and returning a dataset of ClientIdentifier objects to bind to a RadGrid.  Each ClientIdentifier object has a boolean property IsDefault.

I am binding the dataset to the RadGrid using the NeedDataSource event.  I am not including displaying the IsDefault property in the RadGrid.  I am displaying a GridClientSelectColumn instead.

What I would like to do is select the row in the RadGrid that corresponds to the ClientIdentifier object with IsDefault = true programmatically when the grid is first loaded.  After the RadGrid is loaded, the user can then select whatever item they want in the RadGrid.

Here is my RadGrid declaration:
<telerik:RadGrid ID="radGridClientIdentifiers2" runat="server" AutoGenerateColumns="false"
    OnUpdateCommand="radGridClientIdentifiers2_UpdateCommand"
    OnDeleteCommand="radGridClientIdentifiers2_DeleteCommand" OnInsertCommand="radGridClientIdentifiers2_InsertCommand" OnItemCreated="radGridClientIdentifiers2_ItemCreated" OnDataBound="radGridClientIdentifiers2_DataBound"
    OnNeedDataSource="radGridClientIdentifiers2_NeedDataSource">
    <MasterTableView DataKeyNames="ID" CommandItemDisplay="Top">
        <Columns>
            <telerik:GridEditCommandColumn ButtonType="PushButton" UniqueName="EditCommandColumn" />
            <telerik:GridBoundColumn HeaderText="Number" DataField="Identifier" />
            <telerik:GridDropDownColumn HeaderText="Type" EnableEmptyListItem="true" DataField="IdentifierTypeID" ListTextField="Description" ListValueField="ID" DataSourceID="objectDataSourceClientIdentifierTypes" />
            <telerik:GridButtonColumn UniqueName="DeleteColumn" ButtonType="ImageButton" CommandName="Delete" />
            <telerik:GridClientSelectColumn UniqueName="SelectColumn" HeaderText="Default" />
        </Columns>
        <EditFormSettings EditFormType="Template">
            <FormTemplate>
                <telerik:RadTextBox ID="radTextBox" Label="Number:" Text='<%# Bind("Identifier") %>' runat="server">
                </telerik:RadTextBox>
                <telerik:RadComboBox ID="radComboBox" runat="server" Label="Type:" SelectedValue='<%# Bind("IdentifierTypeID") %>' DataSourceID="objectDataSourceClientIdentifierTypes" DataTextField="Description" DataValueField="ID" />
                <telerik:RadButton ID="radButtonInsert" runat="server" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>' CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' />
                <telerik:RadButton ID="radButtonCancel" runat="server" Text="Cancel" CausesValidation="false" CommandName="Cancel" />
            </FormTemplate>
        </EditFormSettings>
    </MasterTableView>
    <ClientSettings>
        <Selecting AllowRowSelect="true" />
    </ClientSettings>
</telerik:RadGrid>

How can I go about doing this?  I've been playing around with the RadGrid's DataBound event with little luck.  I'm not sure that's even the right event to use.




Marin Bratanov
Telerik team
 answered on 18 Jul 2017
2 answers
138 views

So, I have a hierarchical Radgrid bound to two LinqToSQL Datasources, and I'm trying to get Updates working on the second level table. Inserts work perfectly but when attempting to update a row, I get an "Object Reference not set to an instance of an object" exception, but it doesn't cause any error to be displayed on the page. I can only see the error through Visual Studio while debugging. See ASPX code below. I have no code doing anything in the codebehind so far.

05.<asp:UpdatePanel ID="upGrid" runat="server" ChildrenAsTriggers="true">
06.<ContentTemplate>
07.<telerik:RadGrid ID="masterGrid" runat="server"
08.AutoGenerateColumns="False"
09.DataSourceID="linqDepots"
10.OnUpdateCommand="masterGrid_UpdateCommand">
11.<ClientSettings>
12.<Selecting AllowRowSelect="true" />
13.</ClientSettings>
14.<GroupingSettings CollapseAllTooltip="Collapse all groups" />
15.<MasterTableView DataSourceID="linqDepots" DataKeyNames="dID,dCode">
16.<Columns>
17.<telerik:GridBoundColumn DataField="dID" ForceExtractValue="Always" Visible="false"></telerik:GridBoundColumn>
18.<telerik:GridBoundColumn DataField="dCode" FilterControlAltText="Filter dCode column" HeaderText="Depot Code" ReadOnly="True" SortExpression="Depot Code" UniqueName="dCode">
19.</telerik:GridBoundColumn>
20.<telerik:GridBoundColumn DataField="dName" FilterControlAltText="Filter dName column" HeaderText="Depot Name" ReadOnly="True" SortExpression="Depot Friendly Name" UniqueName="dName">
21.</telerik:GridBoundColumn>
22.<telerik:GridBoundColumn DataField="IncidentCount" HeaderText="Incidents"></telerik:GridBoundColumn>
23.</Columns>
24.<DetailTables>
25.<telerik:GridTableView Name="Incident" runat="server" DataSourceID="linqIncidents" CommandItemDisplay="Top"  AllowAutomaticInserts="true" AllowAutomaticUpdates="true" DataKeyNames="iID">
26.<ParentTableRelation><telerik:GridRelationFields DetailKeyField="fk1_dID" MasterKeyField="dID" /></ParentTableRelation>
27.<Columns>
28.<telerik:GridEditCommandColumn Display="true" EditText="Update"></telerik:GridEditCommandColumn>
29.<telerik:GridBoundColumn DataField="iID" Visible="false" ReadOnly="true"></telerik:GridBoundColumn>
30.<telerik:GridBoundColumn HeaderText="Acc Ref" DataField="AccRef" SortExpression="iID" UniqueName="AccRef" ReadOnly="true">
31.<FilterTemplate>
32.<telerik:RadComboBox ID="ddlFilterID" runat="server" Width="50px" DataSourceID="LinqiID" DataTextField="iID" DataValueField="iID" OnClientSelectedIndexChanged="SelectedRefIndexChanged" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("AccRef").CurrentFilterValue %>' AppendDataBoundItems="true">
33.<Items><telerik:RadComboBoxItem Text="All" Value="" /></Items>
34.</telerik:RadComboBox>
35.<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
36.<script type="text/javascript"> function SelectedRefIndexChanged(sender, args) { var tableView = $find(" <%# ((GridItem)Container).OwnerTableView.ClientID %>"); tableView.filter("AccRef", args.get_item().get_value(), "EqualTo"); } </script>
37.</telerik:RadScriptBlock>
38.</FilterTemplate>
39.</telerik:GridBoundColumn>
40.<telerik:GridDateTimeColumn DataField="iDate" DataType="System.DateTime" AllowFiltering="false" ItemStyle-HorizontalAlign="Center" FilterControlAltText="Filter iDate column" HeaderText="Date" SortExpression="iDate" UniqueName="iDate" DataFormatString="{0:d}"></telerik:GridDateTimeColumn>
41.<telerik:GridDropDownColumn DataField="fk2_dID" DataSourceID="linqDrivers" HeaderText="Driver" ListTextField="dName" ListValueField="dID"></telerik:GridDropDownColumn>
42.<telerik:GridDropDownColumn DataField="fk3_cID" DataSourceID="linqVehicle" HeaderText="Vehicle" ListTextField="cReg" ListValueField="cID"></telerik:GridDropDownColumn>
43.<telerik:GridCheckBoxColumn AllowFiltering="False" DataField="iNotificationForm" HeaderText="Notification Form" SortExpression="iNotificationForm"/>
44.<telerik:GridCheckBoxColumn AllowFiltering="False" DataField="iInterviewForm" HeaderText="Interview Form" SortExpression="iInterviewForm"/>
45.<telerik:GridCheckBoxColumn AllowFiltering="False" DataField="iAccidentForm" HeaderText="Accident Form" SortExpression="iAccidentForm"/>
46.<telerik:GridBoundColumn AllowFiltering="False" DataField="iEstimate" HeaderText="Estimate" SortExpression="iEstimate" DataType="System.Decimal" DataFormatString="{0:c}" FilterControlAltText="Filter iEstimate column" UniqueName="iEstimate"/>
47.<telerik:GridBoundColumn AllowFiltering="False" DataField="iClarkesCost" HeaderText="Cost" SortExpression="iClarkesCost" DataType="System.Decimal" DataFormatString="{0:c}"/>
48.<telerik:GridCheckBoxColumn AllowFiltering="False" DataField="iPaid" HeaderText="Paid" SortExpression="iPaid"/>
49.<telerik:GridBoundColumn AllowFiltering="False" DataField="iDescription" HeaderText="Description" SortExpression="iDescription"/>
50.<telerik:GridBoundColumn DataField="iLocation" HeaderText="Location" SortExpression="iLocation"/>
51.<telerik:GridCheckBoxColumn DataField="iDriverAware" Visible="false" HeaderText="Driver Aware"></telerik:GridCheckBoxColumn>
52.<telerik:GridBoundColumn DataField="DriverAwareStr" HeaderText="Driver Aware" SortExpression="iDriverAware" ReadOnly="true"/>
53.<telerik:GridCheckBoxColumn DataField="iDriverFault" Visible="false" HeaderText="Driver at Fault"></telerik:GridCheckBoxColumn>
54.<telerik:GridBoundColumn DataField="DriverFaultStr" HeaderText="Driver at Fault" SortExpression="iDriverFault" ReadOnly="true"/>
55.<telerik:GridBoundColumn DataField="iAJGRef" HeaderText="AJG Ref" SortExpression="iAJGRef" FilterControlAltText="Filter iAJGRef column" UniqueName="iAJGRef" ReadOnly="True" />
56.</Columns>
57.</telerik:GridTableView>
58.</DetailTables>
59.</MasterTableView>
60.</telerik:RadGrid>
61.<asp:LinqDataSource ID="linqDepots" runat="server" ContextTypeName="Forms_BI.RetorqueLinqDataContext" Where="dID != 0"
62.EntityTypeName="" TableName="Depots"></asp:LinqDataSource>
63.<asp:LinqDataSource ID="linqIncidents" runat="server" ContextTypeName="Forms_BI.RetorqueLinqDataContext"
64.EntityTypeName=""
65.TableName="Incidents" Where="fk1_dID == @fk1_dID"
66.EnableInsert="True" EnableUpdate="true" OnUpdating="linqIncidents_Updating">
67.<WhereParameters>
68.<asp:Parameter Name="fk1_dID" Type="Int32" />
69.</WhereParameters>
70.</asp:LinqDataSource>
71.<asp:LinqDataSource ID="linqDrivers" runat="server" ContextTypeName="Forms_BI.RetorqueLinqDataContext" EntityTypeName="" TableName="Drivers"></asp:LinqDataSource>
72.<asp:LinqDataSource ID="linqVehicle" runat="server" ContextTypeName="Forms_BI.RetorqueLinqDataContext" EntityTypeName="" TableName="Cabs"></asp:LinqDataSource>
73.</ContentTemplate>
74.</asp:UpdatePanel>
Marin Bratanov
Telerik team
 answered on 18 Jul 2017
1 answer
165 views

After upgrading from Telerik.Web.UI 2015.1.400.40 to 2017.2.621.45 the tooltip is not displayed any more.

The tooltip is on an click event from a button placed in a radgrid, the tooltip event fires and the code exceutes without any exception just as it did with the 2015 version, but the tooltip does not display on screen. The object to be displayed is a user control.

 

Peter Milchev
Telerik team
 answered on 18 Jul 2017
1 answer
132 views

I have an Entity Framework 6 fluent model in which there is a many to many relationship between an Employee and Teams. The EF model represents the teams that an employee is a member of by an ICollection.

I'm trying to list employees and their associated teams in a declarative hierarchical grid in which the parent table displays an Employee's details and the detail/hierarchical table displays the teams. I'm trying to figure out if it possible to use the ICollection<Teams> to display the list of teams in the detail grid. I tried numerous ways with various datasourceIds, DataKeynames etc. - and also looked at demos/sample

 

Outline of code is below:

 

public partial class Employees
    {
      
        public int EmployeeId { get; set; }
        public string EmployeeFirstName { get; set; }
        public string EmployeeLastName { get; set; }
     
        public virtual ICollection<Teams> Teams{ get; set; }
    }

 public partial class Teams
    {
        [
        public int TeamId{ get; set; }
        public string TeamName{ get; set; }
         public virtual ICollection<Employees> Employees { get; set; }
    }

<ef:EntityDataSource ID="EntityDataSource1" runat="server" ContextTypeName="EF6Model" EntitySetName="Employees" Include="Teams"></ef:EntityDataSource>

 <telerik:RadGrid ID="RadGrid1" >
  <MasterTableView DataSourceID="EntityDataSource1" DataKeyNames="EmployeeId" >
                    <Columns>
                        <telerik:GridBoundColumn HeaderText="First Name" DataField="EmployeeFirstName">
                        </telerik:GridBoundColumn>

         ...................Employee A data here.......
 
                    </Columns>
                    <DetailTables>
                        <telerik:GridTableView>

                          .................Team 1 that Employe A is a member of here...............

                          .................Team 2 that Employe A is a member of here...............

    .................Team 1 that Employe A is a member of here...............

                        </telerik:GridTableView>
                    </DetailTables>
                </MasterTableView>
</telerik:RadGrid>

Calsh
Top achievements
Rank 1
 answered on 18 Jul 2017
0 answers
129 views

I have a telerik:RadSearchBox that has EnableAutoComplete="true" and its datasource is connected to a web service.

The web service requires a token that is set in the web.config file.

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        Dim wsSearchResults As New ws_PBP_SearchResults.ws_PBP_SearchResultsSoapClient
        Dim dsPropName As System.Data.DataSet
        dsPropName = wsSearchResults.PropNameSearch(sKey:=ConfigurationManager.AppSettings.Item("AccessTokenPrivate"))
        Dim dt_PropName As DataTable = dsPropName.Tables("TableName")
        RadSearchBox1.DataSource = dt_PropName
        RadSearchBox1.DataBind()

End Sub

Is there a better way to populate the telerik:RadSearchBox datasource such as using <WebServiceSettings .... /> and have the ability to pass the web service a token?

Thanks in advance.

Kevin
Top achievements
Rank 1
 asked on 17 Jul 2017
0 answers
31 views

Hello All,

    I have a simple radgrid in my user Control. I have enabled paging and its working. But the problem is when user selects particular page, its now showing the border around it or not high lighting the page no. I want users to know which page they are on by either showing the border around selected page number or high lighting the page number. 

    Is there a setting for this..? Following is my small radgrid code. 

<telerik:RadGrid RenderMode="Lightweight" ID="rgUploadedDocs" runat="server" Width="100%"
         OnNeedDataSource="rgUploadedDocs_NeedDataSource"
         OnItemDataBound="rgUploadedDocs_ItemDataBound" OnItemCommand="rgUploadedDocs_ItemCommand" EnableViewState="true" OnPageIndexChanged="rgUploadedDocs_PageIndexChanged">
        <HeaderStyle CssClass="gridViewHeader" />
        <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true" />
        <ItemStyle CssClass="gridViewRow" />
        <AlternatingItemStyle CssClass="gridViewAltRow" />
        <SelectedItemStyle CssClass="gridViewSelected" />
        <MasterTableView AllowSorting="true" AllowNaturalSort="false" PageSize="10" AllowPaging="True" Width="100%" AutoGenerateColumns="false"  DataKeyNames="DOCUMENT_ID"
             NoMasterRecordsText="No uploaded documents found." AllowFilteringByColumn="false" ShowHeadersWhenNoRecords="true">
        <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true" />
        <SortExpressions>
          <telerik:GridSortExpression FieldName="LAST_MODIFIED_DATE_TIME" SortOrder="Descending" />
        </SortExpressions>      
        <Columns>
            <telerik:GridTemplateColumn HeaderText="Document Type" SortExpression="Name" AllowFiltering="false">
                <ItemTemplate>
                    <asp:Label runat="server" ID="lblDocumentType"></asp:Label>
                </ItemTemplate>
            </telerik:GridTemplateColumn
            <telerik:GridBoundColumn  UniqueName="FileName" DataField="FILE_NAME" HeaderText="File Name" AllowFiltering="false">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="UploadDate" DataField="LAST_MODIFIED_DATE_TIME" HeaderText="Upload Date" DataFormatString="{0:d}" AllowFiltering="false">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="UserName" DataField="Username" HeaderText="Username" AllowFiltering="false">
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn HeaderText="Obsolete" SortExpression="IS_OBSOLETE" AllowFiltering="false">
                <ItemTemplate>
                    <asp:CheckBox ID="rdchkObsolete" runat="server" ToolTip="Obsolete" AutoPostBack="true" OnCheckedChanged="rdchkObsolete_CheckedChanged"/>
                </ItemTemplate>
            </telerik:GridTemplateColumn
            <telerik:GridTemplateColumn AllowFiltering="false">
                <ItemTemplate>
                    <asp:ImageButton ID="imgView" ImageUrl="~/Images/search.png" runat="server" ToolTip="View" CommandName="Edit" AlternateText="View" />
                </ItemTemplate>
            </telerik:GridTemplateColumn
            <telerik:GridTemplateColumn AllowFiltering="false">
                <ItemTemplate>
                    <asp:ImageButton ID="imgCancel" ImageUrl="~/Images/cancel.png" runat="server" CommandName="Delete" ToolTip="Delete"
                        CommandArgument='<%# DataBinder.Eval(Container.DataItem, "DOCUMENT_ID") %>' AlternateText="Delete" />
                </ItemTemplate>
            </telerik:GridTemplateColumn
        </Columns>
        </MasterTableView>
    </telerik:RadGrid>

 

Devang
Top achievements
Rank 1
 asked on 17 Jul 2017
2 answers
68 views
Hi,

We implement sort function for radgrid column, however, when we used Jaws to test screen reader functionality, we found that when a screen reader user click the sortable column header links to sort the data in the table, there is no audible cue that the data has been sorted. JAWS merely announces "Enter" to correspond with the command that the screen reader user pressed and then is silent. Screen reader users have no way of knowing that the data in the table has been successfully sorted.

Below is our 508 team opinion and suggestion:
"For more robust functionality, like sortable data tables, it's necessary to assess if a screen reader user can perceive, operate and understand the sorting. In other words, users should perceive that a sort CAN be performed, operate the sort, and understand what (if any) sort HAS been performed.
 
 Implement the following changes to address the issues with the sortable column links.
 
 1. Use three separate images to indicate the status of the sortable column header:
 a. Column not sorted (image displayed by default when page loads OR if a different column is sorted). The alt text for this image should indicate how the data will be sorted the first time the user selects the link - e.g. alt="Choose to Sort Ascending" or alt="Choose to Sort Descending".
 b. Column sorted ascending. The alt text for this image should be alt="Currently Sorted Ascending Choose to Sort Descending".
 c. Column sorted descending. The alt text for this image should be alt="Current Sorted Descending Choose to Sort Ascending".
 
 2. Group the column heading text and image in the same <a> tag so they are both read together.
 
 3. Because the <th> cell will not simply contain the visual text displayed as the column heading, additional steps need to be taken to provide abbreviated column header text to be announced to the screen reader user as they navigate the data table using table reading commands. To do this define an abbr attribute within each <th> tag. The abbr attribute text for each TH cell should just be the visible heading text at the top of the column (e.g. "Select", "State", "County", etc.)"


Is it doable or is there any other solution to address this issue?

Thanks,
Wei
Good
Top achievements
Rank 1
 answered on 17 Jul 2017
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?