Single Click expand + expanding issue

[Martin]

Hi,

I have two issues:

I have a RadTreeview in which all nodes are loaded on deman using ExpandMode=Webservice. THis works well. ALso, when a Node is clicked, information is loaded to the content pane using an ajax request. 

Question 1: I want to implement single click expand for treenodes. I tried to achieve this using node.toggle() in the OnClientNodeClicked eventhandler of the treeview but it both expands and collapses again (probably interferring with the loadondemand stuff). How can I solve this? It works when the nodes children has already been loaded. It works when I remove the ajaxrequest in the end of the "OnClientNodeClicked" function...So it has to have something to do with updating the controls in the content pane. All controls are in the same RadAjaxPanel.

QUestion 2: WHen I have updated data in the content pane I press "Save" and perform post-back. In that postback (in a UserControl) I trigger an Event which the treeview pane receives. I updated the "SelectedNode.Text" value serverside and this works. Since it is possible that the selected nodes children have been modified I also need to refresh the child nodes. I tried to achieve this using serverside collapse and expand in the same method as in which I change the displaytext of the node but it does not work.The expanded=false works, it collapses the node, but expanded=true does not expand it...

Please help

Martin

[Boyan Dimitrov]

Hello Martin,

Providing a sample code that reproduces the described issues would be very helpful.
I prepared a sample project based on the provided scenario. By clicking on the RadTreeView it changes  RadTextBox Text property to the clicked node value. Please note that in order ajax request to work properly it will require this configuration:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
           <AjaxSettings>
               <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                   <UpdatedControls>
                       <telerik:AjaxUpdatedControl ControlID="RadTextBox1" />
                   </UpdatedControls>
               </telerik:AjaxSetting>
           </AjaxSettings>
       </telerik:RadAjaxManager>

As for your second issue would you please elaborate the scenario you are trying to achieve because it is not quite clear from the current explanation.

Regards,
Boyan Dimitrov
the Telerik team

[Martin]

I still have not managed to solve this.

I have the entire page wrapped in an ajaxpanel just for troubleshooting. I have a treeview with webservice expanded nodes. On collapse, I clear the child nodes of the collapsed node. On ClientClick of each node, I perform an ajaxrequest which hides/shows appropriate panels (on which I have user controls). That also works. But still single click expand does not work. It expands and then collapses again. My ClientClicked event handler looks like this:

function OnNodeClicked(sender, args) {

               var node = args.get_node();

               node.toggle();

               var arguments = "NodeClick;" + node.get_attributes().getAttribute('NodeType') + ';' + node.get_value() + ";" + node.get_attributes().getAttribute('ModuleType'); //ModuleType is used when available for loading module settings...
               $find('<%=RadAjaxManager1.ClientID %>').ajaxRequest(arguments); //was arguments parameter
           }

Then removing the ajaxrequest, single click expand and collapse (toggle) works perfect. Since the entire page is in an radajaxpanel, should there ever be any ajax issues? All my scripts are in radscriptblock.

UPDATE: I have the same issue when for example instead of toggling, changes the text of the sleected node:
node.set_text("Hello");

UPDATE2: Ok, so the reason the change of text did not stick was because I forgot track/commitchanges to the tree. Now that works. But still, toggling the node does not work...I have the same issue when I try to hide and show panels in the same vbscript. They hide/show but after the ajaxrequest they return to original state...THe script is inside an RadScriptManager. I have also tried putting the page in an RadAjaxPanel and I have the same issues...

UPDATE3: It seems like that since I want to hide/shot controls/panels client side to have higher performance, the ajax-request returns eveything as the server knows it. The strange thing is that RadAjaxManager cannot see my user controls. I have to put them in asp:panels. So now I have <div> which is shown/hidden using javascript, then an asp:panel for RadAjaxManager, and then the UserControl. Is this the way to go? How can I make the server aware of the node.toggle so it persists even after ajaxrequest?

I can see the node changing from its original value to "Hello" but then back to its original value again. So it´s some kind of ajax problem...

[Boyan Dimitrov]

Hello,

Could you please try to remove the RadAjaxPanels from the page and leave the RadAjaxManager in order to avoid any conflicts. Please try to execute the toggle functionality and the Ajax request in separate functions as shown below:
//markup code

<telerik:RadTreeView ID="RadTreeView1" runat="server" OnClientNodeClicked="ClientNodeClicked" OnClientNodePopulated="ClientNodePopulated" >
    ..........
</telerik:RadTreeView>

//JavaScript

function ClientNodeClicked(sender, args) {
    var node = args.get_node();
    node.toggle();

}
function ClientNodePopulated(sender, args) {
    var node = args.get_node();
    var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
    ajaxManager.ajaxRequest(node.get_text());
}

Hope that this will be helpful.

Regards,
Boyan Dimitrov
the Telerik team

[Martin]

Hello, thank you!

Putting the logic in two separate methods solved parts of it. Now toggle works. Unfortunately OnNodePopulated will only be fired when nodes is already expanded, when clicking a node already expanded, OnNodePopulated wont fire and the content pane will not have its data updated :-(

Can you explain why it does not work in the same method?

[Boyan Dimitrov]

Hello,

Your observations are absolutely correct. There are some required modifications in order the OnClientNodePopulated to fire even when the node is already expanded:

• Clearing the child items of the clicked node
• Setting that node expand mode property back to web service.

Please apply this code modification for your OnClientNodeClicked client-side event handler:
//JavaScript

function ClientNodeClicked(sender, args) {
            var node = args.get_node();
            var expandMode = node.get_expanded();
            node.toggle();
            if (expandMode) {
                var childNodes = node.get_nodes();
                sender.trackChanges();
                childNodes.clear();
                sender.commitChanges();
                node.set_expandMode(Telerik.Web.UI.TreeNodeExpandMode.WebService);
            }
        }

Regarding your second question - why separation of node toggle and the Ajax request in two events is required?
It seems that on your side both actions(node toggle and  sending ajax request) are somehow in conflict and separation of them into 2 methods will avoid this unusual behavior and will work fine.

Kind regards,
Boyan Dimitrov
the Telerik team

[Martin]

Your code probably works. Unfortunately I still have the same problem with the tree returning to "last known state" after postback (ajaxpanel).

I have modified my code. Now I use the server side NodeClick-event too load the user control with data for the currently selected node. So I don´t need the AJaxrequest client-side anymore. Unfortunately, when using your code, I can see that it works but a second later (when postback has populated the usercontrol), the node collapses back again... :-(

It seems like the Viewstate of the grid is not persisted on postback or something? 

According to FIreBug, two requests are made, the first one to my web method used to populate children using WebService expand mode, secondly the ajaxpanel loads the corresponding usercontrol for the selected Node.

The toggle functionality works when collapsing an already populated node, in that case, no call to the web method is made.

[Boyan Dimitrov]

Hello,

This is one of our scenarios included under section Troubleshooting and its is a special case that needs some additional logic to be added. Please find here more information about that case and a solution that will avoid that unusual behavior.
You could also find attached a sample project using the client-side Ajax request  that updates a RadTextBox with clicked node text property.


Kind regards,
Boyan Dimitrov
the Telerik team

[Martin]

Thanks a lot, toggle works for expand but  not for collapse. But thats fine. Again, thank you for your time.