RadCombo with TreeView inside RadAjaxPanel

[Marty]

Hi, I have a user control that is wrapped by a RadAjaxPanel.  Inside the user control, I have a RadCombo using a template with a TreeView.  This works fine without the AjaxPanel, but I found that the FindNode javascript is failing to find the TreeView on a partial post-back.  It works fine with full post backs.   I should note, I'm using the sample code here for a treeview inside a RadCombo and I'm also using the sample FindNode and other JavaScript (see below for both), and this is a problem with and without the java script inside a RadCodeBlock.

There must be an issue with OnClientLoad and the controls collection at time of partial post back because this works with a full post back.

Note: I'm loading the combo datasource on init view time - i.e. is not postback.  I think that is correct.

thanks
Marty

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="RentSell_Info.ascx.cs"
    Inherits="RentMyStuffWeb.Shell.Views.RentSell_Info" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

    <script type="text/javascript">
        function FindNode(comboBox, args) {
            var PassedValue = $get('<%=NodeValue.ClientID%>').value
            var treevw = comboBox.get_items().getItem(0).findControl("RadTreeViewCategories");
            if (treevw) {
                var node = treevw.findNodeByValue(PassedValue);
                if (node) {
                    node.select()
                    comboBox.set_text(node.get_text());
                    comboBox.trackChanges();
                    comboBox.get_items().getItem(0).set_value(node.get_text());
                    comboBox.commitChanges();
                }
            }
            else {
                alert("treevw is null");   ********************** IS NULL on partial postback
            }
        }

        function nodeClicking(sender, args) {
            var comboBox = $find("<%= cbCategories.ClientID %>");
            var node = args.get_node()
            document.getElementById('<%=NodeValue.ClientID%>').value = node.get_value();
            document.getElementById('<%=NodeText.ClientID%>').value = node.get_text();
            comboBox.set_text(node.get_text());
            comboBox.trackChanges();
            comboBox.get_items().getItem(0).set_value(node.get_text());
            comboBox.commitChanges();
            comboBox.hideDropDown();
        }

        function StopPropagation(e) {

            if (!e) {
                e = window.event;
            }

            e.cancelBubble = true;
        }

        function OnClientDropDownOpenedHandler(sender, eventArgs) {
            var treevw = sender.get_items().getItem(0).findControl("RadTreeViewCategories");
            var node = treevw.findNodeByText(sender.get_items().getItem(0).get_value());
            if (node != null) {
                node.select();
                node.get_parent().expand();
                node.scrollIntoView();
            }
        }
    </script>

</telerik:RadCodeBlock>
<style type="text/css">
    .InfoStyle1
    {
        width: 100%;
    }
</style>
<div id="divRentSellInfo">
    <fieldset>
        <legend class="groupBoxCaption">Item Summary</legend>
        <table class="InfoStyle1">
            <tr>
                <td>
                    <div class="informational">
                        Pick the category that best describes your item.</div>
                    <div>
                        <asp:Label runat="server" CssClass="tableLabel" Text="Category:"></asp:Label>
                    </div>
                    <div>
                        <telerik:RadComboBox ID="cbCategories" runat="server" Width="400px" Height="400px"
                            EmptyMessage="Select a Category" HighlightTemplatedItems="true" Skin="Sitefinity"
                            AutoPostBack="false" DataTextField="CategoryName" OnClientLoad="FindNode" OnClientDropDownOpened="OnClientDropDownOpenedHandler">
                            <itemtemplate>
                                <div id="divCategoryTreeView" onclick="StopPropagation(event)">
                                    <telerik:RadTreeView ID="RadTreeViewCategories" runat="server" Skin="Sitefinity"
                                        Width="100%" CausesValidation="False" OnClientNodeClicking="nodeClicking">
                                        <NodeTemplate>
                                            <div id="divCatNodeTemplate">
                                                <%#DataBinder.Eval(Container, "Text") %>
                                            </div>
                                        </NodeTemplate>
                                        <ExpandAnimation Duration="300" />
                                    </telerik:RadTreeView>
                                </div>
                            </itemtemplate>
                            <items>
                                <telerik:RadComboBoxItem />
                            </items>
                        </telerik:RadComboBox>
                        <input id="NodeValue" value="0" runat="server" enableviewstate="true" type="hidden" />
                        <input id="NodeText" value="" runat="server" enableviewstate="true" type="hidden" />
                    </div>
                    <div>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidatorCategories" runat="server"
                            ControlToValidate="cbCategories" ValidationGroup="SubmitPage" EnableClientScript="false"
                            CssClass="RequiredFieldErrorMessage" Display="Dynamic" ErrorMessage="Please select at least one category from the list."></asp:RequiredFieldValidator>
                    </div>
                </td>
            </tr>
            <tr>
.
.
.
.
.

I can attach the HTML of the page source if you need

[Simon]

Hello Marty,

What happens if you remove the FindNode function's code after a partial postback - is there are TreeView after you open the drop down?

Can you also paste the code of the containing page that is triggering the postback as well as the server-side code, which binds the RadComboBox?

Greetings,
Simon
the Telerik team

[Marty]

Hi, good question.  I noticed that after the find node function falls through, I can still pull up the treeview and select a node and all the page validation still workds... So, that tells me its working from an asp.net page life cycle model.  I bind the tree view only on page load, see code below.  I'm wondering about two things... if the way the comboboxitem is a placeholder for the treeview is not getting fixed up (I'm not sure how that all works) on a partial postback.  Also wondering if the stop propagation is messing with some events that need to be handled?
I'm at a loss.  Right now, the work around is not to do a partial post back for that user control and its too complicated to ship to you.  The html source looks fine after postback, so I'm confused.  Thanks for your help.  A good idea may be to try and put a small example together to try and isolate it.  Seems to be browser independent.
Marty

  public RadTreeView RadTreeViewCategories
        {
            get
            {
                return (RadTreeView) this.cbCategories.FindMasterPageControl("RadTreeViewCategories");

            }
        }


        public IEnumerable<Category> CategoriesDataSource
        {
            set
            {
                var c = RadTreeViewCategories;
                if (c != null)
                {
                    c.DataSource = value;
                    c.DataFieldID = "CategoryId";
                    c.DataFieldParentID = "ParentCategoryId";
                    c.DataTextField = "CategoryName";
                    c.DataValueField = "CategoryId";
                    c.DataBind();
                }
            }
        }

[Marty]

Oh, I forgot to post the code that performs the partial post back.  It is just a check box but I duplicated with a button.  Oddly, the other user controls work find on partial post backs the FindNode function for the treeview inside a RadCombo seems to be the only issue with this partial post back.

This code calls server side code to hide/show a panel.  That seems to work fine.

   <asp:CheckBox ID="chkUseHomeLocation" runat="server" CssClass="checkBox" Text="Use the same address/contact info that I registered with"
                            Checked="true" AutoPostBack="true" OnCheckedChanged="UseHomeLocation_CheckedChanged"
                            Skin="Sitefinity" />

[Simon]

Hi Marty,

The Load client-side handler is bound to execute on full as well as partial postbacks, so there must be something else in your setup that interferes with this functionality.

Since your case is complex and the code so far does not give me a full picture of it, I suggest you send me a sample project in a support ticket. In this way, I will be able to debug the issue and eventually provide you with a concrete solution.

Regards,
Simon
the Telerik team