This is a migrated thread and some comments may be shown as answers.

ComboBox value filled with node text instead of the node value after the second postback

1 Answer 131 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

Ahmad Alkhiary asked on 10 Dec 2008, 05:39 PM

I have an AJAX ComboBox Control and I added an AJAX Treeviw Control inside the ComboBox Item Template. When the post back happened for the second time the ComboBox Value come up with the node text value instead of the node value.

I want to store the Selected Node Value in the ComboBox Item(0).Value and to store the selected node text to the ComboBox Item(0).text and I want them to survive postbacks.

Is this passable? How can I do it?

When I use the following statements:

comboBox.get_items().getItem(0).set_text(node.get_text());

comboBox.get_items().getItem(0).set_value(node.get_value());

I get an error.

Please I need your help.

Thank you.

UserControl APSX Page:

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="MenuOptionsTree.ascx.vb" Inherits="AMS.MenuOptionsTree" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<body bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0" dir=rtl>
<script type="text/javascript">
     function FindNode(comboBox, args)
     {
         var PassedValue = document.getElementById('<%=ValueToFind.ClientID%>').value
         if (PassedValue == 0)
         {
             comboBox.set_text(comboBox.get_items().getItem(0).get_value());
             document.getElementById('<%=NodeValue.ClientID%>').value = comboBox.get_items().getItem(0).get_value();
         }
         else if (PassedValue == -1)
         {
             comboBox.set_text("")
         }
         else
         {
             var treevw = comboBox.get_items().getItem(0).findControl("TreeMenuOptions");
             var node = treevw.findNodeByValue(PassedValue);
             if (node)
             {
                 node.select()
                 document.getElementById('<%=NodeValue.ClientID%>').value = node.get_value();
                 comboBox.set_text(node.get_text());
                 comboBox.trackChanges();
                 comboBox.get_items().getItem(0).set_value(node.get_text());
                 comboBox.commitChanges();
             }
         }
     }

     function nodeClicking(sender, args)
     {
         var comboBox = $find("<%= cmbMenuOptions.ClientID %>");
         var node = args.get_node()

document.getElementById('<%=NodeValue.ClientID%>').value = node.get_value();

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("TreeMenuOptions");
         var node = treevw.findNodeByValue(sender.get_items().getItem(0).get_value());
         if (node != null)
         {
             node.select();
             node.get_parent().expand();
             node.scrollIntoView();
         }
     }

</script>
<telerik:RadComboBox ID="cmbMenuOptions"
    Runat="server"
    Height="200px"
    Skin="Sunset"
    Width="348px"
    OnClientLoad="FindNode"
    OnClientDropDownOpened="OnClientDropDownOpenedHandler">
    <ItemTemplate>
      <div ID="TreeDiv" onclick="StopPropagation(event)" dir=rtl>
        <telerik:RadTreeView
         ID="TreeMenuOptions"
         Runat="server"
         Height="350px"
         Width="100%"
         OnClientNodeClicking="nodeClicking"
         Skin="Sunset">
            <CollapseAnimation Duration="100" Type="OutQuint" />
            <ExpandAnimation Duration="100" />
        </telerik:RadTreeView>
        </div>
    </ItemTemplate>
    <Items>
      <telerik:RadComboBoxItem Text="" />
    </Items>
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</telerik:RadComboBox>
<input id="NodeValue" value="0" runat="server" enableviewstate="true" type="hidden" />
<input id="ValueToFind" value="0" runat="server" enableviewstate="true" type="hidden" />
</body>

Code-Behind:
Public Property SelectNodeValue() As String
        Get
            Return NodeValue.Value
        End Get
        Set(ByVal value As String)
            Me.ValueToFind.Value = value
        End Set
    End Property

1 Answer, 1 is accepted

answered on 10 Dec 2008, 07:00 PM

Thank you the problem resolved by changing the code as follow:

comboBox.set_text(node.get_text());

             comboBox.trackChanges();
             comboBox.get_items().getItem(0).set_value(node.get_text());
             comboBox.commitChanges();
         }
     }

     function nodeClicking(sender, args)
     {
         var comboBox = $find("<%= cmbMenuOptions.ClientID %>");
         var node = args.get_node()

document.getElementById('<%=NodeValue.ClientID%>').value = node.get_value();

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;
}