Client side find control problem

[Andy Green]

Hi

I'm trying to use this example to have a treeview inside a combobox, all inside a grid template.

http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/treeviewcombobox/defaultcs.aspx?product=treeview

From the example this code is used to get the conmobox:

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

                var node = args.get_node()

                comboBox.set_text(node.get_text());

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

                comboBox.hideDropDown();
            }

My problem is how do I get set the comboBox var with my set up.

This is also all in a Masterpage that add another layer of complexity.

To recap - I have Masterpage | Rag Grid | Edit Template | RadCombo box | RadTreeView.

Can anyone offer any help?

Andy

[Daniel]

Hello Andy,

I recommend you try the findControl method. For more information about our static library, please examine the following link:
Telerik static client library

 

function nodeClicking(sender, args)
{
    var comboBox = $telerik.findControl(parentElement, "RadComboBox1");
    ...
}

Best regards,
Daniel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Andy Green]

Great thank you.

But it still not working, on load the dropdown is only 1 character high, and on clicking a value it does not appear in the combobox.

This is my page structure

Masterpage | RadGrid | edit template | Combo box | radtreeview

Andy

 

[Daniel]

Hello Andy,

I'm not sure I understand your scenario completely. Could you please elaborate what do you mean by "on load the dropdown.." - do you mean the client-side pageLoad event?
 
Best regards,
Daniel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Andy Green]

Sorry for being vaugue, the problem is I cant get a value for parentElement as given in your code.

And as such none of the client side functionality is working.

Andy

[Daniel]

Hello Andy,

You could use any HTML element that is parent to your combo box. This includes RadGrid DIV, MasterTableView TABLE, rows, cells, etc.

I recommend you try the following approach:

function nodeClicking(sender, args)
{
    var radGrid = $find('<%= RadGrid1.ClientID %>');
    var comboBox = $telerik.findControl(radGrid.get_element(), "RadComboBox1");
    ...
}

You can even use the document element as a parent:

function nodeClicking(sender, args)
{
    var comboBox = $telerik.findControl(document, "RadComboBox1");
    ...
}

I hope this helps.

Best regards,
Daniel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Andy Green]

Thanks Daniel

This nearly works but there is a frustrating error.

The dropdown loads OK, My problem with the control only being 1 row high was because I'd not set a height, but I am setting in code behind that the treeview start with expanded nodes - this is not happening.

What I get now, and I've been playing all morning is a javascrip error 'unexpected call to method or property access'.

The tree works fine, but I cant release the code with this error. Interestingly I eneded up removing all code from the function stubs and obviously  it stopped working, but threw the same error.

UpDate - seems to work on Firefox, I'm on IE 6.

Andy

[Daniel]

Hello Andy,

I recommend you follow these steps:
- try the latest version of RadControls for ASP.NET AJAX and if the error still persists
- send a simple runnable project so I can debug it on my end

Thank you for your cooperation

Best regards,
Daniel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Aimee Rasmussen]

This is the approach that I've been using (below) but it only finds the first instance of the combo box in the grid..  I need to get the selected row instead.. something like:

var comboBox = $telerik.findControl(radGrid.get_selectedElement(), "RadComboBox1");

but that doesn't work either.. any suggestions?  I'm sure there's a method that I'm just not finding..



function nodeClicking(sender, args)

{

    var radGrid = $find('<%= RadGrid1.ClientID %>');

    var comboBox = $telerik.findControl(radGrid.get_element(), "RadComboBox1");

    ...

}

Here's my complete code:

function nodeClicking(sender, args) {
        var radGrid = $find('ctl00_ContentPlaceHolder1_gvTransactions_ctl00_ctl11_EditFormControl_gvSplit');
//        var selectedItem = radGrid.get_selectedItems();
        var comboBox = $telerik.findControl(radGrid.get_element(), "cboCategory");
        var node = args.get_node()

        comboBox.set_text(node.get_text());
        comboBox.set_value(node.get_value());

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

        comboBox.hideDropDown();
    }
    function StopPropagation(e) {
        if (!e) {
            e = window.event;
        }

        e.cancelBubble = true;
    }

    function OnClientDropDownOpenedHandler(sender, eventArgs) {
        var treeName = "tvCategory";
        var tree = sender.get_items().getItem(0).findControl(treeName)
        var selectedNode = tree.get_selectedNode();
        if (selectedNode) {
            selectedNode.scrollIntoView();
        }
    }

[Andy Green]

This is my working code, Not sure I fully understand you r problem but this works - from the tree I get the ID of the node, that ID is then used to stamp the record.

Markup for the tree in a dropdown

                           <div ID="pnlLocation">

                                    <telerik:RadComboBox ID="txtLocation" runat="server" Height="300px" Width="150px" ShowToggleImage="True" Style="vertical-align: middle;" OnClientDropDownOpened="DownOpenedHandlerLocation" EmptyMessage="Choose Location" CausesValidation="False" EnableEmbeddedSkins="False" Skin="CPSM">
                                        <ItemTemplate>
                                            <div onclick="StopPropagation(event)">
                                                 <telerik:RadTreeView ID="rtvLocation" runat="server" EnableEmbeddedSkins="False" Skin="CPSM" CausesValidation="False"  OnClientNodeClicking="nodeClickingLocation" >
                                                    <Nodes>
                                                        <telerik:RadTreeNode runat="server" Text="None" Value=""></telerik:RadTreeNode>
                                                    </Nodes>
                                                 </telerik:RadTreeView>
                                            </div>
                                        </ItemTemplate>
                                        <Items>
                                            <telerik:RadComboBoxItem Text="" />
                                        </Items>
                                      </telerik:RadComboBox>

                            </div>

Javascript in the aspx page

 function nodeClickingLocation(sender, args)
        {
            var comboBox = $find("<%= txtLocation.ClientID %>");
            var node = args.get_node()
            comboBox.set_text(node.get_text());
            comboBox.trackChanges();
            comboBox.get_items().getItem(0).set_value(node.get_text());
            comboBox.get_items().getItem(0).get_attributes().setAttribute("nodeValue", node.get_value());
            comboBox.commitChanges();
            comboBox.hideDropDown();
        }

        function DownOpenedHandlerLocation(sender, eventArgs)
        {
            var tree = sender.get_items().getItem(0).findControl("rtvLocation");
            var selectedNode = tree.get_selectedNode();
            if (selectedNode)
            {
                selectedNode.scrollIntoView();
            }
        }

Code behind

Location_ID = CInt(Me.txtLocation.Items(0).Attributes("nodeValue"))

Hope you can make some sense of this.

Andy