Combobox with Treeview

2 posts, 0 answers
  1. Regula
    Regula avatar
    47 posts
    Member since:
    Sep 2005

    Posted 25 May 2011 Link to this post

    I'me tring to use the Combobox with Treeview functionality.

    The first time I choose an item from the tree everything goes smoothly. But if I open again the combox to select the tree I get an javascript error: Message: 'null' is null or not an object. Thus the issue happens only if I choose a node and  after I try to open again the combobox

    I've checked the javascript and the error is in the follwoing code:
    function OnClientDropDownOpenedHandler(sender, eventArgs) {
                var tree = sender.get_items().getItem(0).findControl("rvt1");
                var selectedNode = tree.get_selectedNode();
                if (selectedNode) {
                    selectedNode.scrollIntoView();
                }
            }
    The findControl returns a null and when we call the get_selectedNode() we got the exception.
    What may be causing this behaviour?

    Here is our code:

    <script type="text/javascript">
     
            function nodeClicking(sender, args) {
                var comboBox = $find("<%= combo1.ClientID %>");
      
                var node = args.get_node()
                comboBox.set_text(node.get_text());
      
                comboBox.trackChanges();
                comboBox.get_items().getItem(0).set_text(node.get_text());
                comboBox.get_items().getItem(0).set_value(node.get_value());
      
                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 OnClientDropDownOpenedHandler(sender, eventArgs) {
                var tree = sender.get_items().getItem(0).findControl("rvt1");
                var selectedNode = tree.get_selectedNode();
                if (selectedNode) {
                    selectedNode.scrollIntoView();
                }
            }
        </script>
      
      
    <telerik:RadComboBox ID="combo1" runat="server" CausesValidation="false"
        EnableEmbeddedSkins="false" OnClientDropDownOpened="OnClientDropDownOpenedHandler"
        EmptyMessage="select please" MaxHeight="200px"  ShowToggleImage="True"
      
        Width="50%" AllowCustomText="True">
        <ItemTemplate>
            <div id="div1">
                <telerik:RadTreeView ID="rvt1" runat="server" Width="100%" Height="250px"
                    DataSourceID="ds1" DataFieldID="ID" DataValueField="ID"
                    DataFieldParentID="ParentID" DataTextField="Name" OnClientNodeClicking="nodeClicking" >
                    <DataBindings>
                        <telerik:RadTreeNodeBinding Expanded="true" />
                    </DataBindings>
                </telerik:RadTreeView>
            </div>
        </ItemTemplate>
        <Items>
            <telerik:RadComboBoxItem Text="" />
        </Items>
    </telerik:RadComboBox>
    <asp:ObjectDataSource ID="ds2" runat="server"
        EnablePaging="True" OnSelecting="dds2_Selecting"
        SelectMethod="GetList" TypeName="BLL">
        <SelectParameters>
            <asp:Parameter Name="p1" Type="Int32" />
            <asp:Parameter Name="p2" Type="Int32" />
            <asp:Parameter Name="p3" Type="Boolean"  DefaultValue="True" />
        </SelectParameters>
    </asp:ObjectDataSource>
  2.
  3. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 26 May 2011 Link to this post

    Hello,

    What is the exact version of the Telerik.Web.UI.dll that you use?
    Please find below a sample which works with the latest version - 2011.1.519:

    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadComboBox ID="dataRubricaPai" runat="server" CausesValidation="False"
    EnableEmbeddedSkins="false" OnClientDropDownOpened="OnClientDropDownOpenedHandler"
    EmptyMessage="Escolha uma rubrica pai" MaxHeight="200px" Skin="UMinho" ShowToggleImage="True"
    Width="50%">
    <ItemTemplate>
    <div id="div1">
    <telerik:RadTreeView ID="rvtRubricaPai" runat="server" Width="100%" Height="250px"
    OnClientNodeClicking="nodeClicking">
    <Nodes>
    <telerik:RadTreeNode runat="server" Text="Root RadTreeNode1">
    <Nodes>
        <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">
        </telerik:RadTreeNode>
        <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">
        </telerik:RadTreeNode>
        <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 3">
        </telerik:RadTreeNode>
    </Nodes>
    </telerik:RadTreeNode>
    </Nodes>
    </telerik:RadTreeView>
    </div>
    </ItemTemplate>
    <Items>
        <telerik:RadComboBoxItem Text="" />
    </Items>
    </telerik:RadComboBox>
    <script type="text/javascript">
    function nodeClicking(sender, args) {
    var comboBox = $find("<%= dataRubricaPai.ClientID %>");
     
    var node = args.get_node()
    comboBox.set_text(node.get_text());
     
    comboBox.trackChanges();
    comboBox.get_items().getItem(0).set_text(node.get_text());
    //comboBox.get_items().getItem(0).set_value(node.get_value());
     
    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 OnClientDropDownOpenedHandler(sender, eventArgs) {
        window.setTimeout(function () {
            var tree = sender.get_items().getItem(0).findControl("rvtRubricaPai");
     
            var selectedNode = tree.get_selectedNode();
            if (selectedNode) {
                selectedNode.scrollIntoView();
            }
        }, 1000);
     
    }
     
    </script>
    </form>

    Does it work at your side?

    Regards,
    Helen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top