reload treeview in combobox

4 posts, 0 answers
  1. TIGER
    TIGER avatar
    24 posts
    Member since:
    Mar 2008

    Posted 02 Oct 2011 Link to this post

    HI,
      I'm trying to implement a treeview in a combobox. the treeview uses WEBService mode for loadondemand. It is required that the treeview would be initialized whenever the user close and reopen the dropdown of the combobox, since the user may have checked some checkboxes and expand a few tree nodes, so the treeview has to be returned to the initial state. I tried looking up documents, demos and example for a treeview client method that could result in a  reloading of the treeview data items, nor could I find a client method from either treeview or combobox that could fire an event on the server side that I could reload the treeview from server side. Of cause there is the Ajaxrequest that could relay to the server side, but this is another problem. I tried to implement the ajaxrequest in the OnClientDropdownOpened and  OnClientDropdownOpening event and run the webservice data load function on server side. but the dropdown opened with an empty treeview (a blank area the side of the treeview). I actually encountered same delima in previouse attemps to use ajaxrequest for tooltip and rotator, grid etc. I tried avoid using ajaxrequest because I luckily found the OnItemCommand event that meets the trigger in client and fire on server criteria.   Could you advice if that is any way to reload treeview data triggered from client.
    I would appreciate it very much if you could explain the problems with ajaxrequest and how to use it correctly.
    Thank you very much!




    <head runat="server">
        <title></title>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
           <script type="text/javascript">
               var arItems = new Array();
               function shownText() {
                   if (arItems.length == 0)
                       return "";
                   var text = "";
                   var cnt = 0;
                   for (i = 0; i < arItems.length; i++)
                       if (arItems[i].code != "-") {
                           if (cnt > 0)
                               text += "+";
                           text += arItems[i].text;
                           cnt++;
                       }
                   return text;
     
               }
               function treeNodeChecked_handler(sender, args) {
     
                   var comboBox = $find("<%= cmbClass.ClientID %>");
                   var node = args.get_node()
     
     
                   if (args.get_node().get_checked()) {
                       var item = new Object();
                       var code = node.get_value().split('|');
                       item.code = code[1];
                       item.text = node.get_text();
                       arItems[arItems.length] = item;
                   }
                   else {
                       var txt = node.get_text();
                       for (i=0; i<arItems.length; i++) {
                           if (arItems[i].text == txt) {
                               arItems[i].code = "-";
                               arItems[i].text = "-";
                               break;
                           }
                       }
                   }
                   var showtext = shownText();
                   comboBox.set_text(showtext);
     //              comboBox.trackChanges();
     //              comboBox.get_items().getItem(0).set_text(showtext);
     //              comboBox.commitChanges();
     
     //              comboBox.hideDropDown();
     
                   // Call comboBox.attachDropDown if:
                   // 1) The RadComboBox is inside an AJAX panel.
                   // 2) The RadTreeView has a server-side event handler for the NodeClick event, i.e. it initiates a postback when clicking on a Node.
                   // Otherwise the AJAX postback becomes a normal postback regardless of the outer AJAX panel.
     
     //              comboBox.attachDropDown();
     
               }
               function StopPropagation(e) {
                   if (!e) {
                       e = window.event;
                   }
     
                   e.cancelBubble = true;
               }
     
               function dropdownOpened_handler(sender, eventArgs) {
                   var ajaxManager = $find("<%= cmbAjaxManager.ClientID %>");
                   ajaxManager.ajaxRequest("");
     
               }
            </script>
        </telerik:RadCodeBlock>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
         
            <telerik:RadComboBox ID="cmbClass" Runat="server" Skin="Windows7"
                DropDownWidth="500px"
                Height="300px" Width="250px" AutoPostBack="true" onload="cmbClass_Load" 
                ontextchanged="cmbClass_TextChanged"  >
               <ItemTemplate>
                  <div id="div_tv">
                    <telerik:RadTreeView ID="tvClass" runat="server" Height="400px" Width="500px"  OnClientNodeChecked="treeNodeChecked_handler"
                          Skin="Windows7" CheckBoxes="True" CheckChildNodes="True">
                        <WebServiceSettings Path="CategoryComboBox.aspx" Method="GetClassItems" />
                    </telerik:RadTreeView>
                  </div>
                </ItemTemplate>
                <Items>       
                    <telerik:RadComboBoxItem Text="" />   
                </Items>
            </telerik:RadComboBox>
         
        </div>
        <telerik:RadAjaxManager runat="server" id="cmbAjaxManager" >
        </telerik:RadAjaxManager>
        </form>
    </body>
    I CAN LOAD THE TREEVIEW IN ONLOAD EVENT CORRECTLY      
     protected void cmbClass_Load(object sender, EventArgs e)
            {
                RadTreeView tv = cmbClass.Items[0].FindControl("tvClass") as RadTreeView;
                LoadRootNodes(tv, TreeNodeExpandMode.WebService);
     
            }
    USING AJAXREQUEST FAILED TO DISPLAY THE TREEVIEW CORRECTLY
            protected void cmbAjaxManager_AjaxRequest(object sender, AjaxRequestEventArgs e)
            {
                RadTreeView tv = cmbClass.Items[0].FindControl("tvClass") as RadTreeView;
                LoadRootNodes(tv, TreeNodeExpandMode.WebService);
            }

     

  2. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 05 Oct 2011 Link to this post

    Hi Tiger,

    I have made a sample web page which shows how to return the initial state of the RadTreeView when the drop down list of the RadComboBox is re-opened.

    Attached are the .aspx, .aspx.cs files and the Telerik.mdf file I am using as a data source.

    I hope you find the sample page helpful.

    Kind regards,
    Ivana
    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
  3. TIGER
    TIGER avatar
    24 posts
    Member since:
    Mar 2008

    Posted 06 Oct 2011 Link to this post

    Hi, Ivana;
      Thank you for your reply. You have provided us a means to handle treeview initialization from the client side, it is very helpful. But I'm still very interested in knowing why using ajaxrequest from client side to trigger the corresponding server event and do a treeview item loading in the server onajaxrequest event would not work as expected. Since I can expect a lot of this type of scenario would take place in the future. Could you please look into it and provide some explaination.
    Best regards.
    Thank you.
  4. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 10 Oct 2011 Link to this post

    Hi Tiger,

    To achieve the scenario in question server-side using an Ajax request, you could subscribe to the OnClientDropDownClosing event and call the AjaxRequest event handler of the AjaxManager, where the RadTreeView inside the RadComboBox could be rebind to its data source.

    Here is an example of how it could be achieved:
    function OnClientDropDownClosing(sender, args) {
        var ajaxManager = $find("RadAjaxManager1");
        ajaxManager.ajaxRequest("");
    }
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="cmbClass" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="cmbClass">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="cmbClass" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadComboBox ID="cmbClass" runat="server" Skin="Windows7" DropDownWidth="500px"
                OnClientDropDownClosing="OnClientDropDownClosing" Height="300px" Width="250px"
                AutoPostBack="true" ontextchanged="cmbClass_TextChanged">
                <ItemTemplate>
                    <div id="div_tv">
                        <telerik:RadTreeView ID="tvClass" runat="server" Height="400px" Width="500px" OnClientNodeChecked="treeNodeChecked_handler"
                            Skin="Windows7" CheckBoxes="True" CheckChildNodes="True">
                            <WebServiceSettings Path="LoadOnDemandTreeViewInCombo_ReturnInitialStateWhenDropDownOpened.aspx"
                                Method="GetProducts" />
                        </telerik:RadTreeView>
                    </div>
                </ItemTemplate>
                <Items>
                    <telerik:RadComboBoxItem Text="" />
                </Items>
    </telerik:RadComboBox>
    protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {
            (cmbClass.Items[0].FindControl("tvClass") as Telerik.Web.UI.RadTreeView).Nodes.Clear();
            LoadRootNodes(cmbClass.Items[0].FindControl("tvClass") as Telerik.Web.UI.RadTreeView, TreeNodeExpandMode.WebService);
    }

    For more information about the RadAjaxManager, you could refer to the online documentation on our website at the following link: RadAjax: RadAjaxManager.

    Hope this helps.

    Regards,
    Ivana
    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
Back to Top