WAVE tool indicates errors in RadTreeView when CheckBoxes are enabled for the Control:
I have enabled aria settings for the treeview control, but when I am trying to navigate via key board it announces some thing like {level} {selected value/text} {checked/not checked} or {selected value/text} {checked/not checked} {level},
I don't want {checked/not checked}, to be announced.
Reproduction:
<telerik:RadTreeView runat="server" RenderMode="Lightweight" ID="RadTreeView2" EnableDragAndDrop="true" EnableDragAndDropBetweenNodes="true">
Workaround from admin: Use the following OnClientLoad client-side event handler for the RadTreeView
function OnClientLoad(sender) {
if ($telerik.isTouchDevice && Telerik.Web.Platform.android) {
$telerik.$(sender.get_element()).off("scroll")
}
}
Reproduction:
Subscribe to Node Click event and set EnableDragAndDrop=true.
Temporary Workaround: Placing the following script below the ScriptManager:
var $ = $telerik.$,
$T = Telerik.Web.UI,
$J = Sys.Serialization.JavaScriptSerializer,
CLICK = $telerik.isTouchDevice ? "touchend" : "click",
MOUSEDOWN = $telerik.isTouchDevice ? "touchstart" : "mousedown",
MOUSEMOVE = $telerik.isTouchDevice ? "touchmove" : "mousemove",
MOUSEUP = $telerik.isTouchDevice ? "touchend" : "mouseup",
DOMActivate = "DOMActivate",
treeviewRegEx;
Telerik.Web.UI.RadTreeView.prototype._click = function (e) {
if (this._eventMap.skipElement(e, "rtIn"))
return;
if (this._preventClick) {
// Dragging and dropping over the same node produces unwanted click
this._preventClick = false;
return;
}
var node = this._extractNodeFromDomElement(e.eventMapTarget);
if ($telerik.isTouchDevice) {
if (!this._treeTouchScroll._dragCanceled) {
clearTimeout(this.longTouchID);
this.longTouchID = 0;
}
/*if (this._scrolledInMobileDevice) {
this._scrolledInMobileDevice = false;
return;
}
else */ if (this._dragging) {
return;
}
}
if (this._raiseCancelEvent("nodeClicking", node, e)) {
e.preventDefault();
return;
}
if (!node.get_isEnabled()) {
this._raiseEvent("nodeClicked", node, e);
e.preventDefault();
return;
}
var ctrlKey = e.ctrlKey || e.rawEvent && e.rawEvent.metaKey;
this._hideContextMenus();
if (this.get_multipleSelect() && (ctrlKey || e.shiftKey || $telerik.isTouchDevice)) {
if ($telerik.isTouchDevice) {
if (node && node.get_isEnabled() && !this._touchDragEnd) {
node.set_selected(!node.get_selected());
}
this._touchDragEnd = false;
}
if (ctrlKey) {
node.set_selected(!node.get_selected());
}
else if (e.shiftKey) {
this._handleShiftSelection(node);
}
this._raiseEvent("nodeClicked", node, e);
return;
}
else {
if (this.get_allowNodeEditing() && node.get_selected() && node.get_allowEdit()) {
this._clearSelectedNodes();
node.set_selected(true);
this._startEdit(node, e);
e.preventDefault();
e.stopPropagation();
}
else {
this._clearSelectedNodes();
node.set_selected(true);
}
}
this._raiseEvent("nodeClicked", node, e);
this._postClickCommand(node);
}
function fixGridSchedulerComboBoxDropDownList() {
// https://www.telerik.com/support/kb/aspnet-ajax/details/cannot-scroll-telerik-control-in-ios-11.3---the-page-scrolls-instead
var fixed = $telerik.$(".RadTreeView.RadTouchExtender");
fixed.on('touchmove', function (e) {
e.preventDefault();
});
}
Sys.Application.add_load(fixGridSchedulerComboBoxDropDownList);
Workaround: function OnClientLoad(sender, args) { sender._isEditableElementInTemplate = function (target) { return target && $(target).closest(".rtTemplate").length > 0 && (target.tagName.toUpperCase() == 'INPUT' || target.tagName.toUpperCase() == 'TEXTAREA' || (target.isContentEditable)); } } <telerik:RadTreeView OnClientLoad="OnClientLoad" ID="RadTreeView1" runat="server" ... >
It would be nice to have the ability to check/uncheck a range of consecutive check boxes in a tree view, for example by clicking the starting check box and shit-clicking the ending check box. I would like to check a range of nodes as shown in the attachment, without checking one at a time.
At the moment it is not possible to rebind the RadTreeView on the client if the datasource is changed when treeview is bound to a ClientDataSource or WebService. Scenarios: - Changed nodes on the server (database) cannot be refreshed on the client. - TreeView is populated based on a custom parameter value.