When the AriaSupport for the Grid is turned on, an aria-label is added to each column header automatically using the UniqueName of the column. The problem is - UniqueName doesn't support empty spaces - all "labels" must be single words or use Underscores - and the screen readers say "underscore."
So my column of "call_date" results in "Call underscore Date" - which is not useful for visually impaired people.
When the grid has a horizontal scroll bar displayed, we can't scroll the table horizontally using keyboard only. If testing using the Siteimprove Accessibility Checker, we will get the issue "Scrollable element is not keyboard accessible".
The reason is that when the RadGrid is rendered, the horizontal scroll bar is render as a separate <div> out of the data table, and the horizontal scroll bar doesn’t have a tabindex, so there’s no way to put focus on it using keyboard. Can you add tabindex="0" to the horizontal scroll bar?
I want to be able to let a user choose "Landlords", "Tenants", "Owners" and search for a name. The data for the search box comes from different tables.
<asp:SqlDataSource ID="SqlDataSourceTenants" runat="server"
ConnectionString="<%$ ConnectionStrings:ProjectConnectionString %>"
SelectCommand="SELECT Id,TenantEntityName as EntityName FROM TenantEntities"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSourceLandlords" runat="server"
ConnectionString="<%$ ConnectionStrings:ProjectConnectionString %>"
SelectCommand="SELECT Id, LandlordEntityName as EntityName FROM LandlordEntities"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSourceOwners" runat="server"
ConnectionString="<%$ ConnectionStrings:ProjectConnectionString %>"
SelectCommand="SELECT Id,OwnerEntityName As EntityName FROM OwnerEntities"></asp:SqlDataSource>
I would like to set the DatasourceId on the RadSearchBox to one of the above when the SearchContext changes. I have worked out how to get the selected searchcontext text via an Ajax Request.
function OnClientLoad(sender, args) {
var context = sender.get_searchContext();
var $ = $telerik.$;
$(context).on({
"selectedIndexChanged": function (event) {
var searchbox = $find("<%=RadSearchBox1.ClientID%>");
// this is the search context dropdown selectedIndexChanged event handler
var ajaxManager = $find("<%=RadAjaxManager1.ClientID%>");
ajaxManager.ajaxRequest(context.get_selectedItem().get_text());
}
});
}
I cannot work out how to change the datasource at runtime (I get datasource not found when I run the following code).
Protected Sub RadAjaxManager1_OnAjaxRequest(sender As Object, e As AjaxRequestEventArgs)
if not isnothing(radsearchbox1.datasource)
select Case e.Argument
Case "Tenants"
RadSearchBox1.DataSource = sqldatasourcetenants
RadSearchBox1.databind
Case "Landlords"
RadSearchBox1.DataSource = sqldatasourcelandlords
RadSearchBox1.databind
Case "Owners"
RadSearchBox1.DataSource = sqldatasourceowners
RadSearchBox1.databind
End Select
End If
End Sub
In the OnSearch Event I just need to get the type of entity (which I could get from checking the Id of the bound datasource) and the Id of the entity:
Protected Sub RadSearchBox1_OnSearch(sender As Object, e As SearchBoxEventArgs)
If e.DataItem IsNot Nothing Then
Dim dataItem = DirectCast(e.DataItem, Dictionary(Of String, Object))
Dim thisId As String = dataItem("Id").ToString()
Dim thisEntityName As String = dataItem("EntityName").ToString()
' Lookup in database and redirect to the relevant data view / edit page
End If
End Sub
Surely this is a common request and deserves consideration?
Currently we are in the process of securing our web sites. we are experiencing issue on Xhtml Validator in RadEditor where it is not properly loading due to mixed content issue. There is no way to redirect to HTTPS instead of HTTP site. We can reproduce this on Rad Editor Demo site by making site as HTTPS and click on XHTML Validator icon. https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx Could you please add that feature?
Rendering and tabbing through the menus goes well BUT - the following was reported:
- With NVDA/Firefox, while the menu item names (File, Edit, View) are announced, but nothing is announced that lets me know that I can expand them to hear more. Usually the space and enter key are used to toggle menus, but neither of those do anything.
- With NVDA/Chrome, I get the same experience.
- With JAWS/Chrome, I hear some more info: when I’m on File, I hear File alt plus F (then Edit alt plus E, View alt plus V). It seems like the latter two of these open up the menu visually, but I’m not able to navigate to any of the items with my keyboard or hear them with my screen reader.
The BIG issue seems to be the lack of indication that a SubMenu exists - is this a known issue? Am I not enabling something I should be?
Current RadMenu config:
<telerik:RadMenu AriaSettings-Label="Manage a Business Menu" runat="server" ID="m" Width="100%" Skin="Simple" Flow="Horizontal" RenderMode="Lightweight"
EnableAriaSupport="true" CausesValidation="false" EnableOverlay="false">
<KeyboardNavigationSettings CommandKey="Alt" FocusKey="M" />
</telerik:RadMenu>
For the time being you can set the types through the kendoWidget:
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script>
function pageLoad() {
var chart = $find('<%=RadHtmlChart1.ClientID%>');
chart._chartObject.options.series[0].type = "verticalLine";
chart.repaint();
}
</script>
</telerik:RadCodeBlock>
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
<PlotArea>
<Series>
<telerik:LineSeries Name="Product 1">
<SeriesItems>
<telerik:CategorySeriesItem Y="15000" />
<telerik:CategorySeriesItem Y="23000" />
<telerik:CategorySeriesItem Y="10000" />
</SeriesItems>
</telerik:LineSeries>
</Series>
<XAxis>
<Items>
<telerik:AxisItem LabelText="1" />
<telerik:AxisItem LabelText="2" />
<telerik:AxisItem LabelText="3" />
</Items>
</XAxis>
</PlotArea>
<ChartTitle Text="Product sales for 2011">
</ChartTitle>
<Legend>
<Appearance Position="Bottom" />
</Legend>
</telerik:RadHtmlChart>
For the time being the following workaround can be used:
JavaScript:
<script>
function pageLoad() {
var chart = $find("<%=RadHtmlChart1.ClientID%>");
chart._chartObject.options.series[0].labels.background = "yellow";
chart._chartObject.options.series[0].labels.border = {
width: 2,
dashType: "dashDot",
color: "green"
};
chart.repaint();
}
</script>
ASPX:
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
<PlotArea>
<Series>
<telerik:ColumnSeries>
<SeriesItems>
<telerik:CategorySeriesItem Y="10" />
<telerik:CategorySeriesItem Y="30" />
<telerik:CategorySeriesItem Y="20" />
<telerik:CategorySeriesItem Y="25" />
</SeriesItems>
</telerik:ColumnSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
For the time being the property can be set through the underlying Kendo Chart widget. For example:
<script>
function OnLoad(chart) {
var widget = chart.get_kendoWidget();
//also applies for the minor grid lines - replace majorGridLines with minorGridLines
//Numeric series
widget.options.xAxis.majorGridLines.step = 5;
widget.options.yAxis.majorGridLines.step = 5;
//Category series
//widget.options.categoryAxis.majorGridLines.step = 5;
//widget.options.valueAxis.majorGridLines.step = 5;
widget.redraw();
}
</script>
<telerik:RadHtmlChart runat="server" ID="BubbleChart" Width="500" Height="400">
<ClientEvents OnLoad="OnLoad" />
<ChartTitle Text="Market Share Study">
</ChartTitle>
<PlotArea>
<Appearance>
<FillStyle BackgroundColor="White"></FillStyle>
</Appearance>
<XAxis MinValue="0" MaxValue="100" Step="10">
<MinorGridLines Visible="false" />
</XAxis>
<YAxis MinValue="0" MaxValue="100" Step="10">
<MinorGridLines Visible="false" />
</YAxis>
<Series>
<telerik:BubbleSeries>
<Appearance FillStyle-BackgroundColor="#6ab2c9">
</Appearance>
<TooltipsAppearance DataFormatString="Percentage of Market Share: {2}%<br /> Number of products: {0}<br /> Sales: ${1}" />
<SeriesItems>
<telerik:BubbleSeriesItem Size="3" X="5" Y="55" />
<telerik:BubbleSeriesItem Size="12" X="14" Y="80" />
<telerik:BubbleSeriesItem Size="33" X="20" Y="60" />
<telerik:BubbleSeriesItem Size="10" X="18" Y="24" />
<telerik:BubbleSeriesItem Size="42" X="22" Y="32" />
</SeriesItems>
</telerik:BubbleSeries>
</Series>
</PlotArea>
<Legend>
<Appearance Position="Right"></Appearance>
</Legend>
</telerik:RadHtmlChart>
For the time being the function can be set through the kendoWidget:
<telerik:RadHtmlChart runat="server" ID="ColumnChart1" Transitions="true">
<PlotArea>
<Series>
<telerik:ColumnSeries Name="Product 1">
<TooltipsAppearance BackgroundColor="Orange" DataFormatString="{0} sales" />
<SeriesItems>
<telerik:CategorySeriesItem Y="15000" />
<telerik:CategorySeriesItem Y="23000" />
<telerik:CategorySeriesItem Y="10000" />
<telerik:CategorySeriesItem Y="16000" />
</SeriesItems>
</telerik:ColumnSeries>
</Series>
<XAxis AxisCrossingValue="0" Color="Black" MajorTickType="Outside" MinorTickType="Outside"
Reversed="false">
<Items>
<telerik:AxisItem LabelText="1" />
<telerik:AxisItem LabelText="2" />
<telerik:AxisItem LabelText="3" />
<telerik:AxisItem LabelText="4" />
</Items>
<LabelsAppearance DataFormatString="Q{0}" RotationAngle="0" />
<MajorGridLines Color="#EFEFEF" Width="1" />
<MinorGridLines Color="#F7F7F7" Width="1" />
<TitleAppearance Position="Center" RotationAngle="0" Text="Quarters" />
</XAxis>
<YAxis AxisCrossingValue="0" Color="Black" MajorTickSize="1" MajorTickType="Outside"
MaxValue="50000" MinorTickSize="1" MinorTickType="Outside" MinValue="0" Reversed="false"
Step="10000">
<LabelsAppearance DataFormatString="{0} sales" RotationAngle="0" />
<TitleAppearance Position="Center" RotationAngle="0" Text="Sales" />
</YAxis>
</PlotArea>
<ChartTitle Text="Product Sales for 2011">
</ChartTitle>
<Legend>
<Appearance Position="Bottom" />
</Legend>
</telerik:RadHtmlChart>
<script>
function pageLoad() {
$ = $telerik.$;
var kendoWidget = $find("<%=ColumnChart1.ClientID%>").get_kendoWidget();
kendoWidget.options.series[0].labels.position = function (point) {
if (point.value < 20000) {
console.log(1);
return "insideEnd";
} else {
console.log(2);
return "outsideEnd";
}
}
kendoWidget.redraw();
}
</script>
A good improvement in the RadHtmlChart would be to add MaxSize and MinSize properties for the series, which would allow the control the scaling of the bubble chart item. The property can be set through the chartObject:
<script>
function pageLoad() {
var chart = $find("<%=BubbleChart.ClientID%>");
chart.get_kendoWidget().options.series[0].minSize = 1;
chart.get_kendoWidget().options.series[0].maxSize = 10;
chart.get_kendoWidget().redraw();
}
</script>
ASPX:
<telerik:RadHtmlChart runat="server" ID="BubbleChart" Width="500" Height="400">
<PlotArea>
<Series>
<telerik:BubbleSeries>
<Appearance FillStyle-BackgroundColor="#6ab2c9">
</Appearance>
<SeriesItems>
<telerik:BubbleSeriesItem Size="1" X="5" Y="5500" />
<telerik:BubbleSeriesItem Size="5" X="14" Y="12200" />
<telerik:BubbleSeriesItem Size="15" X="20" Y="39000" />
</SeriesItems>
</telerik:BubbleSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
More detailed information regarding these properties can be found in the API reference of the Kendo UI Chart here:
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.maxSize
Expose an additional property in RadGauge that controls the margin for the gaugeArea.
Add border and border appearance options like color, width and type for the RadGauge. Currently the background color of the RadGauge is set to the wrapper of the control. Improve that color so that it fits in with the border and the shape of the control.
For the time being you can use the following workaround:
<script>
var pointerSize = 35;
function pageLoad() {
var gauge = $find("<%=rgEpmScorecard.ClientID%>");
gauge._gaugeObject.options.scale.rangeSize = 25;
gauge.repaint();
}
</script>
<telerik:RadRadialGauge ID="rgEpmScorecard" runat="server" Skin="Metro" Height="99px" Width="100px">
<Pointer Value="50" Color="Black">
<Cap Size="0.5" Color="Black" />
</Pointer>
<Scale MajorUnit="10" Max="100" Labels-Visible="false" StartAngle="-45" EndAngle="225">
<MajorTicks Visible="false" />
<MinorTicks Visible="false" />
<Ranges>
<telerik:GaugeRange Color="#ac1d23" From="0" To="16.67" />
<telerik:GaugeRange Color="#c26522" From="16.7" To="33.33" />
<telerik:GaugeRange Color="#d2b408" From="33.5" To="50" />
<telerik:GaugeRange Color="#b5be25" From="50.04" To="66.66" />
<telerik:GaugeRange Color="#0c833f" From="66.8" To="83.33" />
<telerik:GaugeRange Color="#0b6cb3" From="83.38" To="100" />
</Ranges>
</Scale>
</telerik:RadRadialGauge>
<script>
var dataviz = kendo.dataviz,
draw = dataviz.drawing,
Path = draw.Path,
DEFAULT_LINE_WIDTH = 0.5;
kendo.dataviz.RadialPointer.fn._renderNeedle = function () {
var that = this;
var options = that.options;
var minorTickSize = that.scale.options.minorTicks.size;
var center = that.center;
var needleColor = options.color;
var needlePath = new Path({
fill: { color: needleColor },
stroke: { color: needleColor, width: DEFAULT_LINE_WIDTH }
});
needlePath.moveTo(center.x + that.radius - minorTickSize + pointerSize, center.y)
.lineTo(center.x, center.y - (that.capSize / 2))
.lineTo(center.x, center.y + (that.capSize / 2))
.close();
return needlePath;
}
</script>
Instead of the control expanding vertically to accomodate all entries, they should be positioned on a single line.
similar to these: http://willowsystems.github.io/jSignature/#/demo/ http://www.supersignature.com/ Sure you could do something really cool like a sketchpad, with a background image.