We are trying to make our website accessible using Wave and one thing we are struggling with is TreeViews with checkboxes enabled. Sometimes the checkbox is rendered as a span element and sometimes as an input element. In the second case Wave is recognizing an error for each node as the input element is not associated with its neighbouring text. You can see this on your own website: https://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/checkboxes/defaultcs.aspx. For the server side tree the checkboxes are rendered as inputs and there is no label associated with it.
This behaviour doesn't change when I set EnableAriaSupport="true".
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.
http://screencast.com/t/CySy2iAoiG4n
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")
}
}
I think that TreeView incorrectly handles the case of a drop beneath a node that is expanded. When a node (with or without children) is _not_ expanded, then dropping directly beneath (meaning lower down on the page) that node indicates that the node should be made the next sibling of the node. - A + B ------ <- Drop indicator means that dropping here will cause the dropped node to be the next sibling of B, which makes sense. - C This case makes perfect sense. However, when the node is expanded, the drop indicator doesn't change it's behavior, and I think it should. - A + B ------ <--- Dropping here will cause the dropped node to be the next sibling of B, but this is not visually where it will appear in the tree. - B.1 - B.2 <--- This is where the node will appear after drop. - C This is counter-intuitive to most people. People think that dropping between B and B.1 would make the dropped item to become a child of B and a prior sibling of B.1. But instead, it has the same effect as if the B node wasn't expanded and adds the new dropped node as the next sibling of B. Note that in this case, the newly dropped node doesn't show up where it was dropped. When a node doesn't appear in the tree where it was dropped, people assume that that's a bug. To see the issue, go here: http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/draganddropnodes/defaultcs.aspx In the "RadTreeView1" treeview, try to drag the "Deleted Items" item to be the last item in the list (but not a child of "Search Folders"). If you drag toward the bottom of the tree, after you drag down past "Unread Mail", you see the drop indicator that shows that you can drop to make it be the next sibling of "Unread Mail". If you keep dragging down, you _don't_ see an indicator that you can drop to make the next sibling of "Search Folders". However, if you drag between "Search Folders" and "Form Follow Up", then you _will_ see an indicator that shows that the item will be made the next sibling of "Search Folders". And if you drop there, it will indeed be made the next sibling of "Search Folders", but of course it will appear at the bottom of the tree (not where you dropped it). The kendo TreeView has the same behavior as the RadTreeView. However, I have found some TreeViews that handle it in the way I would prefer. See http://mbraak.github.io/jqTree/ for an example.
On IPAD, for treeview rootnode when expanded. It calls the client side event, fetches the records from the service and do the databinding as exected. But after completing all the binding ClientNodeCollapsing event is fired which causes the node to collapse. Same control works fine on desktop.
<
div
>
wrong:
<
telerik:RadPanelBar
RenderMode
=
"Classic"
Skin
=
"Windows7"
runat
=
"server"
ID
=
"RadPanelBar1"
Width
=
"100%"
Height
=
"100%"
>
<
Items
>
<
telerik:RadPanelItem
Text
=
"Custom"
Expanded
=
"true"
>
<
ContentTemplate
>
<
telerik:RadTreeView
RenderMode
=
"Classic"
Skin
=
"Windows7"
ID
=
"radTreeView"
runat
=
"server"
>
<
Nodes
>
<
telerik:RadTreeNode
Text
=
"Custom"
>
<
Nodes
>
</
Nodes
>
</
telerik:RadTreeNode
>
<
telerik:RadTreeNode
Text
=
"Custom"
>
<
Nodes
>
</
Nodes
>
</
telerik:RadTreeNode
>
<
telerik:RadTreeNode
Text
=
"Custom"
>
<
Nodes
>
</
Nodes
>
</
telerik:RadTreeNode
>
</
Nodes
>
</
telerik:RadTreeView
>
</
ContentTemplate
>
</
telerik:RadPanelItem
>
</
Items
>
</
telerik:RadPanelBar
>
</
div
>
<
div
>
OK:
<
telerik:RadTreeView
ID
=
"radTreeView2"
RenderMode
=
"Classic"
Skin
=
"Windows7"
runat
=
"server"
>
<
Nodes
>
<
telerik:RadTreeNode
Text
=
"Custom"
>
<
Nodes
>
</
Nodes
>
</
telerik:RadTreeNode
>
<
telerik:RadTreeNode
Text
=
"Custom"
>
<
Nodes
>
</
Nodes
>
</
telerik:RadTreeNode
>
<
telerik:RadTreeNode
Text
=
"Custom"
>
<
Nodes
>
</
Nodes
>
</
telerik:RadTreeNode
>
</
Nodes
>
</
telerik:RadTreeView
>
</
div
>
The RadTreeView adds a CSS class to selected nodes "rtSelected". Is it possible to fire an event then, since you know when you are adding that class? If I were to do a jQuery each on the <li> elements and subscribe to changes in the attribute "Class" I could probably mimic similar behavior. I have noticed this feature has been desired for several years. The work-arounds suggested by your staff are basically to capture onKeyPressing event and check for a newly selected node after a setTimeout. This works but is more like a hammer to kill a fly. Thank you Sean
Hello, Please add support to bind to System.Dynamic.DynamicObject: https://msdn.microsoft.com/en-us/library/system.dynamic.dynamicobject%28v=vs.110%29.aspx?f=255&MSPPError=-2147217396 Regards, Douw
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 when disabling a RadTreeNode on server/client side the complete node gets disabled with the CheckBox. We had a use case where we would like the node to stay functional (collapsable/expandable/clickable/hover-effect) but only the checkbox to become disabled. As this can't be achieved with the RadTreeView we had to build a work-around for that. Most likely people in need of this feature make a new HTML-variable to store/transmit/apply the state of the checkbox since the manipulation of the Checkboxes gets lost in a postback. This would have to be implemented as a server/client-feature as it is with the enabled/disabled-state of the RadTreeNode. Kind regards
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);
The ClientNodeClicking and server-side NodeClick events are triggered when tap-to-scroll the Treeview in Android (taphold event). Steps to reproduce: 1. Open http://demos.telerik.com/aspnet-ajax/treeview/examples/overview/defaultcs.aspx in mobile Chrome of Android device (or in Chrome emulator) 2. Tap over a node to Scroll the Treeview Result - the tapped node gets selected Expected - the Treeview detect the tap from holdtap events and the node is not selected when scrolling occurs
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" ... >