RadTreeview child node check using double click

16 posts, 0 answers
  1. mn moule
    mn moule avatar
    5 posts
    Member since:
    Oct 2009

    Posted 15 Sep 2010 Link to this post

    Hi,

    I have a RadTreeView control with checkboxes enabled.I have set the checkChildNodes property to true. so when i check/uncheck on parent node all the child nodes under it gets checked/unchecked.

    Now my requirement is all the child nodes should get checked only when i double click on parent node and if i just make a single click only individual nodes should get checked ? how to make it possible any ideas or sample code would be appreciated. please reply asap.

    Thanks in advance.
  2. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 15 Sep 2010 Link to this post

    Hi mn moule,

    I've created a sample project to fit your scenario. You can find it in the attached .zip file.

    At first I've subscribed to the OnClientNodeChecking event and cancel it so that the only way to check/uncheck a node will be by clicking once on the node's text:

    function nodeChecking(sender, args) {
               args.set_cancel(true);
           }

    Here's the code for single and double-click on a node:

    function clientDoubleClickHandler(sender, args) {
               var currentNode = args.get_node();
               var allNodes = currentNode.get_allNodes();
               if (currentNode.get_checked()) {
                   for (var i = 0; i < allNodes.length; i++) {
                       allNodes[i].set_checked(false);
                       currentNode.set_checked(false);
                   }
               }
               else {
                   for (var i = 0; i < allNodes.length; i++) {
                       allNodes[i].set_checked(true);
                       currentNode.set_checked(true);
                   }
               }
           }
           function clientNodeClickingHandler(sender, args) {
               var currentNode = args.get_node();
               if (currentNode.get_allNodes().length == 0) {
                   if (currentNode.get_checked()) {
                       currentNode.set_checked(false);
                   }
                   else {
                       currentNode.set_checked(true);
                   }
               }
           }

    Please let me know if you have more questions.

    Regards,
    Veronica Milcheva
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. mn moule
    mn moule avatar
    5 posts
    Member since:
    Oct 2009

    Posted 16 Sep 2010 Link to this post

    One more thing all my parent nodes will load the child ondemand. so for the first time when i dblclick on the parentnode only it is checked and  all its child nodes remains unchecked. but from the second time it works as expected. how to overcome this on first time.
  5. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 21 Sep 2010 Link to this post

    Hello mn moule,

    What ExpandMode do you use for the Load On Demand functionality?

    I suggest you using TreeNodeExpandMode.ServerSideCallBack as it does not cause a postback:

    protected void Page_Load(object sender, EventArgs e)
       {
           if (!Page.IsPostBack)
           {
               RadTreeNode newNode = new RadTreeNode("Root");
               newNode.ExpandMode = TreeNodeExpandMode.ServerSideCallBack;
               RadTreeView1.Nodes.Add(newNode);
           }
       }
       protected void RadTreeView1_NodeExpand(object sender, RadTreeNodeEventArgs e)
       {
           RadTreeNode node = e.Node as RadTreeNode;
           for (int i = 0; i < 100; i++)
           {
               node.Nodes.Add(new RadTreeNode("Child Node" + i));
           }   
       }

    In my example I create 100 children on expand of the root node. All is done asyncronously from the client without postback. The client-side code remains the same.

    Again find the full code in the attached .zip file. 

    Please let me know if you have some questions.

    All the best,
    Veronica Milcheva
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. HL
    HL avatar
    55 posts
    Member since:
    Dec 2009

    Posted 12 Oct 2010 Link to this post

    hi Veronica:
        I started to use the treeview. What I want to do is to put some logic server side code to single click node event as well as the double click node event . when double click node, I want to edit node text. when I single click node, I want to add the node id as well as other information to DB. the issue is that the single click node event always fire when I double click node. how I can distinge these two events?

    Thanks
    Helena
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 13 Oct 2010 Link to this post

    Hello,


    I belive atatching the OnClientDoubleClick event will work for you. You can invoke an ajaxRequest() to server from the client event handler and perform the required action in AjaxManager_AjaxRequest event.


    Thanks,
    Princy.
  8. Nahid
    Nahid avatar
    31 posts
    Member since:
    Aug 2010

    Posted 20 Jan 2011 Link to this post

    Hello Princy,
    I need OnClientDoubleClick event to save data in DB and page will be refreash without postback. would you help me with some source code or demo project .


    Thanks
    Nahid
  9. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 21 Jan 2011 Link to this post

    Hello Nahid,

    The following code snippet shows how to achieve this.

    ASPX:
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="treeview1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="treeview1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
    </telerik:RadAjaxManager>
     
    <telerik:RadTreeView ID="treeview1" runat="server" OnClientDoubleClick="OnClientDoubleClick">
        <Nodes>
            <telerik:RadTreeNode Text="Books">
                <Nodes>
                    <telerik:RadTreeNode Text="Arts" />
                    <telerik:RadTreeNode Text="Biographies" />
                    <telerik:RadTreeNode Text="Children's Books" />
                    </Nodes>
            </telerik:RadTreeNode>
       </Nodes>
    </telerik:RadTreeView>

    Java Script:
    <script type="text/javascript">
        function OnClientDoubleClick(sender, args) {
           var data = args.get_node()._getData().text;
           $find("<%=RadAjaxManager1.ClientID%>").ajaxRequest(data);
         }
    </script>

    C#:
    protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
       {
           string data = e.Argument;
           //store the data to db
       }

    Thanks,
    Princy.
  10. Nahid
    Nahid avatar
    31 posts
    Member since:
    Aug 2010

    Posted 14 Feb 2011 Link to this post

    Hello Princy,
    Thank you very much for you answer. Its very helpful...

    Thanks
    Nahid
  11. Gaurav
    Gaurav avatar
    9 posts
    Member since:
    Feb 2011

    Posted 08 Mar 2011 Link to this post

    Hi,
    I have a RadTreeView control with checkboxes enabled. On click on check box, checked and unchecked functionality is going well. I want to do, if a user click on related node text (ie. telerik:RadTreeNode), on the same time related check box must check/unchecked.

    Thanks
  12. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 09 Mar 2011 Link to this post

    Hello Gaurav,

    In order to achieve this you can use the client-side OnClientNodeClicked event and use the check() method of the tree node:

    ASPX:
    <telerik:RadTreeView runat="server" ID="RadTreeView2"
               CheckBoxes="true" OnClientNodeClicked="ClientNodeClicked">
              <Nodes>
                     .  .   .  .
              </Nodes>
    </telerik:RadTreeView>

    Java Script:
    <script type="text/javascript">
          function ClientNodeClicked(sender, args) {
            args.get_node().check();
        }
    </script>

    Thanks,
    Princy.
  13. Andres
    Andres avatar
    6 posts
    Member since:
    Sep 2011

    Posted 09 Dec 2011 Link to this post

    Hello Princy,
    I need OnClientNodeChecked event to unchek data in tree and page will be refreash without postback. would you help me with some source code or demo project.
    This is the javascript code, but how should I use the UpdatePanel control or the RadAjaxManager control ?

    I've tried both but neither worked.

    function onClientNodeChecked(sender, e) {      
            var node = e.get_node();
                if (node.get_checked()) {
                sender._postBackOnCheck = false;
            }        
              
            setTimeout(function() { sender._postBackOnCheck = true; }, 100); 
        }

    Thanks.
  14. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 12 Dec 2011 Link to this post

    Hi Andres,

    If you want to refresh a certain update panel you could use the following (assuming the panel's ID is UpdatePanel1):

    unction onClientNodeChecked(sender, args){
        __doPostBack('UpdatePanel1','');           
    }

    If you use RadAjaxManager, you can use:
    $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest("content");
    You can read more about RadAjaxManager and how to use it here

    All the best,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  15. Massimiliano
    Massimiliano avatar
    184 posts
    Member since:
    Oct 2012

    Posted 08 Dec 2013 Link to this post

    I read through all the topic and need a little suggestion.
    I want to disable the "selecting" of the nodes, having the checbox active, so to avoid confusion between selected/checkd.
    Also I would like that upon checking a node, a couple of other controls gets updated (displaying details about the node(s) checked).
    I obtained the first part with this:

    // RadTreeView disable node selection
    function TreeViewNodeClicking(sender, args) {
        currentNode = args.get_node();
        currentNode.set_checked(!currentNode.get_checked());
        args.set_cancel(true);
    }

    And call the function in the onClientNodeClicking of the RadTreeView. It works and when you click on a node name it doesn't select it but instead checks/unchecks the box. The problem is that the server side OnNodeCheck event is only fired when you actually click on the checkbox and not when node checking it's triggered by this javascript.
    Any hint on how to trigger the OnNodeCheck event even when checking/unchecking the nodes from JS?
  16. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 09 Dec 2013 Link to this post

    Hello Massimiliano,

    Try using the _checkNode function of RadTreeView. This function is used internally and will trigger both the client and server Checking events. Here's how the modified code should look like:
    function TreeViewNodeClicking(sender, args) {
        currentNode = args.get_node();
        sender._checkNode(new Event("click"), currentNode);
        args.set_cancel(true);
    }


    Regards,
    Bozhidar
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  17. Massimiliano
    Massimiliano avatar
    184 posts
    Member since:
    Oct 2012

    Posted 09 Dec 2013 Link to this post

    You are the boss Bozhidar! ;)
    This works like a charm.. hope it will survive next versions since it's an "internal" function :)

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