Questions on UI for ASP.NET AJAX Forum

2 answers

82 views

508: No audible cue that a sort has been performed on collumn sort in Radgrid

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

Grid

answered on 17 Jul 2017

3 answers

75 views

Radgrid stops paging, sorting as soon as i enable Ajax (Ajax Settings)

Hello Friends,

Thank You all in advance. I have a simple User Control with Radgrid - paging /Sorting enabled. Everything works fine without Ajax (Ajaxifying), but when I enable Ajax, it stops working i.e paging/sorting etc. Following is my Ajax code. I have RadAjaxManager in my MasterPage, So I m using Proxy in my userControls.

<telerik:RadAjaxManagerProxy ID="AjaxManagerProxy1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="rgUploadedDocs">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rgUploadedDocs"LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

Following is my full aspx page. Its very simple with one rad grid and one file upload.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UploadDocument.ascx.cs" Inherits="UserControls_UploadDocument" %>

<%@ Register Src="~/UserControls/FormField.ascx" TagName="FormField" TagPrefix="uc" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>

<span id="uploadMessage" runat="server" visible="true" class="formLabelAuto"

>The documents shown below are uploaded from this page only. You have to navigate to the specific page to view the documents on that page.</

span>

<br />

<script type="text/javascript">

function showHideOtherText() {

document.getElementById('<%= txtDescription.ClientID %>').value = '';

var selectElem = document.getElementById('<%= ddlUploadDocumentType.ClientID %>');

var selectText = selectElem.options[selectElem.selectedIndex].text;

if (selectText.toUpperCase() == 'OTHER') {

document.getElementById('<%= txtDescription.ClientID %>').removeAttribute('disabled');

}

else {

document.getElementById('<%= txtDescription.ClientID %>').setAttribute('disabled');

}

</script>

<div style="text-align:center">

<telerik:RadAjaxManagerProxy ID="AjaxManagerProxy1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="rgUploadedDocs">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rgUploadedDocs"LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="50"

BackColor="#E0E0E0" InitialDelayTime="500">

<asp:Image ID="imgLoading" Style="margin-top: 100px" runat="server" ImageUrl="~/Images/Loading.gif"

BorderWidth="0px" AlternateText="Loading..." />

</telerik:RadAjaxLoadingPanel>

<telerik:RadGrid RenderMode="Lightweight" ID="rgUploadedDocs" runat="server" Width="100%" Enabled ="true"

FilterItemStyle-BackColor="#e6e6e6" FilterItemStyle-BorderStyle="Solid" OnNeedDataSource="rgUploadedDocs_NeedDataSource"

OnItemDataBound="rgUploadedDocs_ItemDataBound" OnItemCommand="rgUploadedDocs_ItemCommand" CssClass="gridViewSmallFont">

<HeaderStyle CssClass="gridViewHeader" />

<PagerStyle Mode="NextPrevAndNumeric" />

<ItemStyle CssClass="gridViewRow" />

<AlternatingItemStyle CssClass="gridViewAltRow" />

<SelectedItemStyle CssClass="gridViewSelected" />

<MasterTableView AllowSorting="true" PageSize="10" AllowPaging="True" Width="100%" AutoGenerateColumns="false" CommandItemDisplay="None" DataKeyNames="DOCUMENT_ID"

NoMasterRecordsText="No uploaded documents found." AllowFilteringByColumn="false" AllowMultiColumnSorting="true" ShowHeadersWhenNoRecords="true">

<CommandItemSettings ShowAddNewRecordButton="false" ShowRefreshButton="false" />

<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="Osolete" 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>

<br />

<table border="0" style="border-collapse: collapse; border-spacing: 0" role="presentation">

<tr>

<td> </td>

<td>

<asp:FileUpload id="filUploadFile" runat="server" Width="400px" size="100" />

</td>

</tr>

<tr><td> </td><td> </td></tr>

<tr runat="server" id="trUploadDocumentType">

<td style="text-align:right"><span class="formLabelAuto">Document Type:</span></td>

<td style="text-align:left"><asp:DropDownList runat="server" ID="ddlUploadDocumentType" CssClass="formField220" OnClientClick="showHideOtherText();"></asp:DropDownList></td>

</tr>

<tr><td colspan="2"> </td></tr>

<tr><td colspan="2"><asp:ValidationSummary ID="vsUpdateDocument" runat="server" DisplayMode="SingleParagraph" ValidationGroup="valUpdateDocument" /></td></tr>

<tr style="vertical-align:top">

<td>

<span class="formLabelSmall">Description</span>

</td>

<td>

<asp:TextBox ID="txtDescription" runat="server" Rows="5" CssClass="formFieldLarge" TextMode="MultiLine" MaxLength="500" />

</td>

</tr>

</table>

<br />

<asp:Button id="UploadButton" Text="Upload file" OnClick="UploadButton_Click" runat="server" CssClass="buttonBox"

ValidationGroup="valUpdateDocument" />

<p><b><asp:Label ID="lblStatusMsg" runat="server" Width="100%" Style="word-wrap: normal; word-break: break-all;"/></b></p>

</div>

Grid

answered on 17 Jul 2017

5 answers

418 views

Radbutton radio & CssClass

I need the selected radio button to have a different cssclass than the unselected in the group. How would I do this. I tried this but the cssclass doesn't work at all - it works if I apply it to the RadButton but not on each state. In other words I want the selected radio to be green and unselected to be red:

 <telerik:RadButton ID="rbStandard" runat="server" ToggleType="Radio"
               GroupName="Radgrp" ButtonType="ToggleButton" AutoPostBack="false">
    <ToggleStates>

<telerik:RadButtonToggleState Text="Standard" CssClass="ComicRed" />

     <telerik:RadButtonToggleState Text="Standard" CssClass="ComicGreen" />

</ToggleStates>
</telerik:RadButton>

<telerik:RadButton ID="rbLite" runat="server" ToggleType="Radio"
               GroupName="Radgrp" ButtonType="ToggleButton" AutoPostBack="false">
    <ToggleStates>

<telerik:RadButtonToggleState Text="Lite" CssClass="ComicRed" />

     <telerik:RadButtonToggleState Text="Lite" CssClass="ComicGreen" />

</ToggleStates>
</telerik:RadButton>

Button

answered on 17 Jul 2017

1 answer

145 views

RadTreeView doesn't expand

RadTreeView was working fine when using Visual studio 2012, But it doesn't expand if we use Visual Studio 2015 in the same development PC.

Would anyone knows why this happen and how should we solve this issue?

Thank you!

TreeView

answered on 17 Jul 2017

1 answer

281 views

RadDiagram with images programatically

Hi,

I'm trying to create a diagram with images programatically, I followed the demo http://demos.telerik.com/aspnet-ajax/diagram/examples/serverside/defaultcs.aspx and its ok. The problem is that the image only shows in the first shape.

The code is

<telerik:RadDiagram runat="server" ID="diagrama" >

<LayoutSettings Type="Tree" Subtype="Right"/>

<ShapeDefaultsSettings Type="Circle"/>

</telerik:RadDiagram>

And .Net

for (int i = 0; i < 4; i++)

{

DiagramShape nodo = new DiagramShape();

nodo.Id = i.ToString();

String contenido = "<label>" + i.ToString() + "</Label>";

contenido += "<img src='FacturaPagada.png' />";

nodo.ContentSettings.Html = contenido;

diagrama.ShapesCollection.Add(nodo);

}

Diagram

answered on 17 Jul 2017

1 answer

211 views

Kendo Scheduler Custom time slot creation issue

i want to create custom time slot in kendo day scheduler. For example i want to create the time slot of 15 min duration from 9:00 am to 1:00 pm and after that i want to create time slot of 30 minutes duration from 1:00 pm to 5:00 pm. i am getting time slots from DB and i want to create slots as it is as its coming from DB.how can i Override the default slot creation functionality of kendo calendar.By defining "majorTick" i am getting all slots with same time duration but i want to customize this duration according to the time coming from DB with each row. Any suggestion/idea to achieve this functionality.

General Discussions

answered on 17 Jul 2017

1 answer

123 views

error on a link

Hi,

the link below is not found.

I have this on a page with a radgrid skin Telerik.

http://aspnet-skins.telerikstatic.com/ajaxz/2017.2.711/Telerik/Grid/sprite.png

Grid

answered on 17 Jul 2017

0 answers

171 views

Telerik TabStrip integrated with bootstrap column size

I have a ASP.NET webform project and want to add bootstrap. But I meet a problem for the RadTabStrip's RadTab with col-xs-6(bootstrap). The RadTabStrip's RadTabs are dynamically created by code. I also set the "col-xs-6 btn btn-primary" to RadTab's attriibute of "class". I wish I can see two columns RadTab per row in the size of xs(col-xs-6). But I still failed in the RadTab's color and arrange. Does somebody know how to solve this problem？

<telerik:RadTabStrip RenderMode="Lightweight" runat="server" ID="RadTabStripMenu" MultiPageID="RadMultiPageMenu" SelectedIndex="0" OnTabClick="RadTabStripMenu_TabClick">

for (int index = 0; index < dt.Rows.Count; index++)

{

string intOrderNo = dt.Rows[index]["intOrderNo"].ToString().Trim();

string chMenuItem = dt.Rows[index]["chMenuItem"].ToString().Trim();

string chDescritp = dt.Rows[index]["chMenuName"].ToString().Trim();

short tabIndex = Convert.ToInt16(chMenuItem.Substring(2, 3));

RadTab radTabItem = new RadTab();

radTabItem.Text = chDescritp;

radTabItem.Value = tabIndex.ToString();

radTabItem.PageViewID = "RadPageViewMenu" + tabIndex.ToString();

radTabItem.Font.Size = new FontUnit(FontSize.Large);

radTabItem.CssClass = "TabItem";

radTabItem.Attributes.Add("class", "col-xs-6 btn btn-primary");

RadTabStripMenu.Tabs.Add(radTabItem);

RadTabStripMenu.DataBind();//add 20170504

}

TabStrip

asked on 17 Jul 2017

3 answers

152 views

Radslidingpane title text cut off after upgrade to latest controls

The vertical titles appear to be a fixed height after the upgrade to the latest version of the controls. This behavior is on IE. FF. and chrome. See attached images of before and after.

Splitter

answered on 17 Jul 2017

0 answers

186 views

Skins not working

I need help making skins work. I want to use the skin black on radbuttons and radgrid. Every time I set skin to black I get a run time error."Telerik.Web.UI.RadWindow with ID='confirmWindow' was unable to find embedded skin with name 'Black'. Please, make sure that you spelled teh skin name correctly, or if you want to use a custom skin, set EnableEmbeddedSkins=false"

I have added the reference to the bin folder. I have tried a lot of different things to make this work and still not accomplishing it. Please help.

General Discussions

asked on 17 Jul 2017