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 104 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Ahmad Alkhiary
Top achievements
Rank 1
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

Sort by
0
Ahmad Alkhiary
Top achievements
Rank 1
answered on 10 Dec 2008, 07:00 PM
Thank you the problem resolved by changing the code as follow:

<%@ 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 = $get('<%=NodeValue.ClientID%>').value
         var treevw = comboBox.get_items().getItem(0).findControl("TreeMenuOptions");
         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();
         }
     }

     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" />
</body>

Thanks

Tags
ComboBox
Asked by
Ahmad Alkhiary
Top achievements
Rank 1
Answers by
Ahmad Alkhiary
Top achievements
Rank 1
Share this question
or