RadTreeView Accessibility

5 posts, 0 answers
  1. Alan
    Alan avatar
    4 posts
    Member since:
    Mar 2015

    Posted 10 Mar 2015 Link to this post

    I have a RadTreeView which has parent nodes which can be expanded to show its child nodes. These child nodes should then be able to be selected using checkboxes, but the parent nodes shouldn't. My issue is an accessibility one, as I wish to have the checkboxes associated with their text through a label, but the RadTreeView uses a <span> tag. The child nodes are populated when the parent node is expanded via the RadTreeView1_NodeExpand() method.

    I believe the issue revolves around the parent/child situation as when creating a RadTreeView previously with no child nodes and a DataBind() I was able to declare a <NodeTemplate> which used checkboxes/labels, however this template does not seem to be used when adding the nodes via code behind using the Add() method with parents and children.

    Is there a way I can add child nodes that adhere to a template I specify?

    Here is my code, I have attached screenshots as well showing the association errors via WAVE.

    No parent/children aspx:
    <telerik:RadTreeView ID="RadTreeView1" runat="server" Skin="Skin_Telerik"
                CheckBoxes="false" MultipleSelect="true" SingleExpandPath="False"
                DataTextField="IDWithTitle" EnableEmbeddedSkins="false" DataFieldID="CategoryID"
                DataValueField="CategoryID" OnClientNodeClicked="ClientNodeClicked" Style="font-size:medium; white-space: normal;">
                <NodeTemplate>
                    <asp:CheckBox runat="server" id="chkCategory" CssClass="rtChk" 
                Text='<%# String.Format("{0}: {1}", DataBinder.Eval(Container.DataItem, "CategoryID"), DataBinder.Eval(Container.DataItem, "Title")) %>' />
                    <asp:HiddenField runat="server" ID="categoryID" Value='<%#DataBinder.Eval(Container.DataItem, "CategoryID")%>' />
                </NodeTemplate>
    </telerik:RadTreeView>

    No parent/children VB:
        RadTreeView1.DataSource = oList
        RadTreeView1.DataBind()


    Parent/children aspx: 
    <telerik:radtreeview id="RadTreeView1" AccessKey="M" TabIndex="1" runat="server" skin="Skin_Telerik" checkboxes="true"
                        multipleselect="true" singleexpandpath="False" datatextfield="Title" da enableembeddedskins="false"  
                        datafieldid="ID" datafieldparentid="ParentId" datavaluefield="ID" onclientnodeclicked="ClientNodeClicked" 
                        onnodeexpand="RadTreeView1_NodeExpand" Style="white-space: normal;" CheckChildNodes="true" Font-Size="Medium"/>

    Parent/children VB:


    Any help would be much appreciated!

    Alan
  2. Alan
    Alan avatar
    4 posts
    Member since:
    Mar 2015

    Posted 10 Mar 2015 in reply to Alan Link to this post

    Parent/children VB:     
         oNode = new RadTreeNode()

         oNode.Value = [ID]
         oNode.Text = [Title]
         oNode.Checkable = [Checkable]

         e.Node.Nodes.Add(oNode)
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 13 Mar 2015 Link to this post

    Hello Alan,

    I am not quite sure that I had fully understand the encountered issue. Could you specify if the issue is that you are unable to add child nodes programmatically (from code-behind) or the template in not applied on those items? As I can see the referenced code snippet for programmatically adding of the child nodes - you set them as checkable,  while you use the Template of the nodes for this purpose.

    In addition, once a node is added to the collection, you should call the DataBind() on it, so that the template could be correctly applied. In addition, the items should have the same structure as the evaluated items from the datasource for the proper visualization of the node.

    Regards,
    Nencho
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Alan
    Alan avatar
    4 posts
    Member since:
    Mar 2015

    Posted 17 Mar 2015 in reply to Nencho Link to this post

    Hi Nencho

    Thanks for your reply. The issue I'm having is that I'm not able to apply a template when adding nodes programmatically in code-behind. This template needs to show a checkbox with its text as a label to satisfy usability standards (the checkboxes = true attribute just uses a span tag which is not satisfactory).

    I'm currently looking at implementing ITemplate and that allows me to apply a template to nodes added programmatically through code-behind, however I am unable to set unique attributes for each node. Is this the route I should be taking? Would you be able to help me to set the attributes for each node?

    Here is the link I've used: http://www.telerik.com/help/aspnet-ajax/panelbar-add-templates-runtime.html

    Many thanks

    Alan
  6. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 20 Mar 2015 Link to this post

    Hello Alan,

    The approach you intended to follow is the correct one. You can dynamically instantiate the template of the Nodes as demonstrated in the help article below (I am not quite sure, why you had referenced the PanelBar Templates article):

    http://www.telerik.com/help/aspnet-ajax/treeview-templates-runtime.html

    In addition, you can handle the DataBiinding event of the controls, instantiated in the template and access the Node which is currently bound. You can use the node to add the needed attributes.

    Regards,
    Nencho
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017