RadTreeview child node check using double click

[mn moule]

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.

[Veronica]

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

[mn moule]

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.

[Veronica]

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

[HL]

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

[Princy]

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.

[Nahid]

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

[Princy]

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.

[Nahid]

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

Thanks
Nahid

[Gaurav]

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

[Princy]

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.

[Andres]

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.

[Bozhidar]

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

[Massimiliano]

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?

[Bozhidar]

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

[Massimiliano]

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