Using Update Panels with the Treeview

[Robert]

I have a specific question, though one which might benefit others getting started with your treeview control.  Here's the main part of a web page I'm building:
http://mwtech.com/downloads/public/StockMuckEditor_Capture.JPG

The treeview on the left is used to navigate down to a specific record.  Once a bottommost node is reached the record's index is looked up and the associated data is displayed on the right.

In this way, the functionality is very uni-directional, except for one thing: If the user changes the text in the Description textbox then the associated node in the treeview must also be updated.

Initially I've implemented just one AJAX Update Panel, surrounding everything.  But my client has reported that on their slower network, he can see IE6 repopulating hundreds of items in the tree everytime an item on the right side is altered.  So this got me thinking that perhaps I should add a second Update Panel encompassing all of the controls on the right.

If you were building such a form and wanted to minimize network traffic, where would you add Update Panels?

Robert W.

[Simon]

Hi rmdw,

Please consider the following configuration.

Put only one RadAjaxManager on your page, no need of UpdatePanels. Configure the RadAjaxManager so that RadTreeView is the initiator of the AJAX requests and the Panel on the right, which contains all additional controls, as the updated control:

        <telerik:RadAjaxManager
            ID="RadAjaxManager1"
            runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadTreeView1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

In this way only postbacks done by the TreeView will be ajaxified and only the Panel on the right will be updated (previously both were updated as they resided in one UpdatePanel).

On the other hand, you can use RadAjaxManager to make AJAX requests to the server whenever required. For example, when you change the text of the Description field, use JavaScript and the client-side ajaxRequest function of RadAjaxManager to do an AJAX request, sending the changed Node's Description and Value.

In case, the TreeView is stored in a database, you can use the Value to find the Node and update its Descrpition in the database. This you can do in the AjaxRequest server-side event handler.

Finally, the Node will be updated both at the client and at the server without any additional data transmition except the changed Field value and Value of the Node - no controls will be updated at the client, hence the peformance of the page will not degrade.

Below are a few articles which may be of help, too:

• AJAX Manager
• AJAX Manager Client-Side API
• Pass more than one argument

Please let me know if something has been unclear or you need additional guidance.

Kind regards,
Simon
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Robert]

Simon,

Thank you for this.  I will investigate.

A point though: I realize that it's in your best interest to promote all of your products but there are some of us who prefer to minimize the number of 3rd Party Controls.  Why?  Because successive versions of Visual Studio tend to break things.  Thus, the more 3rd Party Controls being used, the more chances that something will break.

Your TreeView is excellent and I have publicly raved about it countless times on ASP.Net and elsewhere.  But I'm going to try to get by using just it.  From a cost perspective, I realize that this is now a moot point considering your new pricing model.  I don't like that model but am forced into it because your treeview is clearly so much better than what Microsoft puts out.  C'est la vie.

Robert

[Simon]

Hi rmdw,

I understand your concerns and I want to clarify that the reason I recommended the RadAjaxManager control is that it delivers out-of-the-box the functionality that is needed to polish your case. That is, to increase the page AJAX performance by transmitting minimum amounts of data between the client and the server.

Nevertheless, you can implement another approach - without RadAjaxManager - which will be almost completely the same as the 'RadAjaxManager' one.

You can wrap the Panel in an UpdatePanel which has one Trigger: RadTreeView with the NodeClick Event. Only, instead of updating the TreeView by analogy, you can use the XmlHttpRequest object manually to do the same as I described in my previous post - update the TreeView using its client-side API (to reflect the changes on the client) and do an AJAX callback to the server with the XmlHttpRequest object in order to update the TreeView to the database as well (to reflect the changes on the server).

Below is sample code that may help for your better understanding of the approach in case something has been unclear.

            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Panel ID="Panel1" runat="server">
                        ...
                    </asp:Panel>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="RadTreeView1" EventName="NodeClick" />
                </Triggers>
            </asp:UpdatePanel>
            <telerik:RadTreeView ID="RadTreeView1" runat="server"
                OnNodeClick="RadTreeView1_NodeClick">
                ...
            </telerik:RadTreeView>

And here is the JavaScript function that will be called when the Description on the right, for example, is changed:

        function descriptionChanged(description)
        {
            //Get the client-side object of RadTreeView1..
            //Update the selected Node's description..

            //Utilize the XmlHttpRequest object..
            //Send the Node's Value and new Description to the server
            //(where they should be updated to the database)..
        }

 
I hope this is useful.

All the best,
Simon
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center