How to avoid whole page postback when uncheck the node of radtreeview with Updatepanel

[Andres]

I have a radtreeview inside an UpdatePanel in the bottom there are 3 LinkButton each one inside an UpdatePanel. Each time you uncheck a node the radtreeview do a postback and refreshes the entire page. What I want to achieve is that when you uncheck a node does not refresh the entire page. So I want the buttons are not refresh and if it is possible not to refresh the radtreeview when do the postback. This is the code I use to do that but not working because it refreshes the whole page.

function OnClientNodeChecking(sender, args) {  
        
        if (!args.get_node().get_checked())
        {
            var treeView = $find("<%=trTaxonomy.ClientID%>");  
            treeView.trackChanges();
            args.get_node().set_checked(true);  
            args.set_cancel(true);  
            treeView.commitChanges();
            alert(args.get_node().get_checked());
                        
         }
         if (args.get_node().get_checked())         
         {
            args.set_cancel(true);
         }
      }  
      
      function onNodeChecked(sender, e) {      
        var node = e.get_node();        
        if (node.get_checked()) {
            sender._postBackOnCheck = false;
        }
        
        setTimeout(function() { sender._postBackOnCheck = true; }, 100);
    }             
</script>

    <asp:ScriptManager ID="ManageLinesScriptManager" runat="server">

    </asp:ScriptManager>

     

     

    <table style="height: 100%; Width:100%;">

        <tr style="Width:100%; height:90%;">

            <td>

                <div style="overflow:auto; height:100%; width:100%;">

                    <asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="True">

                        <ContentTemplate>

                            <telerik:RadTreeView CheckBoxes="true"

                                AllowNodeEditing="true"

                                ID="trTaxonomy"

                                runat="server"                       

                                OnNodeExpand="trTaxonomy_NodeExpand"

                                OnClientContextMenuShowing="menuShowing"

                                OnClientContextMenuItemClicked="itemClicked"

                                OnNodeEdit="trTaxonomy_NodeEdit"

                                OnClientNodeEditStart="EditNode"

                                OnNodeCheck="trTaxonomy_NodeCheck"

                                OnClientNodeChecked="onNodeChecked" style="overflow:visible">

                                <ContextMenus>

                                    <telerik:RadTreeViewContextMenu ID="RadTreeViewContextMenuAdd" runat="server"

                                        EnableEmbeddedScripts="true">

                                        <Items>

                                            <telerik:RadMenuItem Text="Add" Value="1" />

                                        </Items>

                                    </telerik:RadTreeViewContextMenu>

                                    <telerik:RadTreeViewContextMenu ID="RadTreeViewContextMenuDelete" runat="server"

                                        EnableEmbeddedScripts="true">

                                        <Items>

                                            <telerik:RadMenuItem Text="Delete" Value="2" />

                                        </Items>

                                    </telerik:RadTreeViewContextMenu>

                                </ContextMenus>

                            </telerik:RadTreeView>

                        </ContentTemplate>

                    </asp:UpdatePanel>

                     

                </div>

            </td>

        </tr>

        <tr style="Width:100%; height:10%; vertical-align:middle" align="center">

            <td valign="middle">

                    <table align="center" style="vertical-align:middle;" >

                        <tr valign="middle">

                            <td valign="middle">

                                <div class="Content">

                                    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="True">

                                        <ContentTemplate>

                                            <asp:LinkButton ID="btnOk" runat="server" CssClass="InlineButton" Text="Save"  OnClick="btnOK_Click" Height="10px" />

                                        </ContentTemplate>   

                                    </asp:UpdatePanel>   

                                </div>

                            </td>

                            <td valign="middle">

                                <div class="Content">

                                    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="True">

                                        <ContentTemplate>

                                            <asp:LinkButton ID="btnSaveClose" runat="server" CssClass="InlineButton" Text="Save & Close"  Width="90px" OnClick="btnSaveClose_Click" Height="10px" />

                                        </ContentTemplate>   

                                    </asp:UpdatePanel>    

                                </div>

                            </td>

                            <td valign="middle">

                                <div class="Content">

                                    <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="True">

                                        <ContentTemplate>

                                            <asp:LinkButton ID="btnCancel" runat="server" CssClass="InlineButton" Text="Cancel" OnClientClick="ShowWarning(); return false;" Height="10px"/>                       

                                        </ContentTemplate>   

                                    </asp:UpdatePanel>   

                                </div>

                            </td>

                        </tr>

                    </table>

                </td>

            </tr>

        </table>

[Bozhidar]

Hi Andres,

I wasn't able to reproduce your problem. You are cancelling the uncheking of the checkbox, so it can't cause a postback.
Could you provide a full example of your project, and tell me exactly what you want to achieve.

Greetings,
Bozhidar
the Telerik team

[Andres]

Basically, I have inserted a RadTreeView in a standard AJAX UpdatePanel, then I have created an handler for the  OnClientNodeChecked = "onNodeChecked" event. However, when this event fires, the entire page is posted back. What is the problem?

This code is canceling the postback when you check a node, when you uncheck a node the postback is done.

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

I will see to send you a little project. Thanks !.