Databinding a treeview within a combo within a grid

[Tim]

We need to be able to display a treeview within a combo within an editable grid. 

Is it possible to have this databound? eg use data binding to populate the treeview as well as the grid - and when the user changes the selected node within the treeview that it updates the row in the grid (does a postback, preferrably ajax).

If so, how?  Ideally this all needs to be done programmatically (not using markup).

Thanks very much
Tim Huffam

[Tim]

I've managed to get a treeview populated within a combo within a grid - all programmatically and the correct treeview node selected (based on the databound grid value).  However now I need to get it to populate the combo's text property when you click on a node in the treeview.

I've tried adding the following javascript event handler programmatically (treeview.Attributes.Add("OnClientNodeClicking", "nodeClicking")) and have included the nodeClicking function as mentioned in another forum post or help article on how to put a treeview within a combo):

OnClientNodeClicking

="nodeClicking"

However the OnClientNodeClicking event does not appear to be firing as it does not run any JS - I've tried replacing "nodeClicking" with "alert('test')" but even this does not run.

Any suggestions?

Once this working I think need to get this posting values back to the server (eg on-set-of-combo-text or something of the sort) - ideally Ajax. 
Any suggestions for this?

Thanks very much
Tim Huffam

[Atanas Korchev]

Hi Tim,

You cannot use treeview.Attributes.Add("OnClientNodeClicking", "nodeClicking") to set the OnClientNodeClicking property. Try this instead:

treeview.OnClientNodeClicking = "nodeClicking";

Greetings,
Albert
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Tim]

Thanks for that - now the javascript is being run.
 
Now I need to be able to get hold of the containing combobox - so I can set its text property.

Is there a way I can get this from the treeview object?

I'm basing my code on this example I found on the Telerik site (for placing a treeview within a combo) - however this works because they've hardcoded the combo id - in my case there is a combo (with treeview) on each row in the grid.  This is the javascript function provided by Telerik:

function xxxnodeClicking(sender, args){
  var comboBox = $find('RadComboBox1');
  var node = args.get_node();
  comboBox.set_text(node.get_text());
  comboBox.hideDropDown();
}

Thanks again
Tim 

[Atanas Korchev]

Hello Tim,

You can try the following code:

function xxxnodeClicking(sender, args){
  var comboBoxID = sender.get_id().replace("RadTreeView1", "RadComboBox1"); 
  var comboBox = $find(comboBoxID);
  var node = args.get_node();
  comboBox.set_text(node.get_text());
  comboBox.hideDropDown();
}

It uses the id of the treeview to "guess" the id of the combobox.

Regards,
Albert
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Tim]

Unfortunately that does not work.

I'm using a treeview within a combo within a grid.

I've tried using javascript to walk the dom - but no objects seem to have the get_text() or set_text() method when in a grid - any idea why - or how to get the objects that have these methods?

Thanks
Tim

[Atanas Korchev]

Hello Tim,

What exactly does not work? Have you used the debugger to inspect what $find returns? You can also "alert" the comboboxID variable as well as "sender.get_id()";

Regards,
Albert
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Tim]

Hi Albert

I was able to use the $find method to find the HTML element that represent both the treeview and the combo.  But the get_text() and set_text methods do not work for either object - which makes me wonder if $find is returning the correct object.

Thanks for your assistance - much appreciated!
Tim

[Atanas Korchev]

Hello Tim,

The $find routine should get the client-side object which differs from the HTML element. The $get function is used to obtain the HTML object. Please tell me what are the following lines saying:

function xxxnodeClicking(sender, args){
  var comboBoxID = sender.get_id().replace("RadTreeView1", "RadComboBox1");
  alert(comboBoxID);
  var comboBox = $find(comboBoxID);
  alert(comboBox.get_id());
  var node = args.get_node();
  comboBox.set_text(node.get_text());
  comboBox.hideDropDown();
}

All the best,
Albert
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Guss]

Hi telerik

I have the same issue.
Grid, with template column, with combobox, with treeview in combo box.
Guessing the ids does not work. In my example:

A
ctl00_ContentPlaceHolder_RadGrid1_ctl00_ctl02_ctl04_RadComboBoxCatalogId

B
ctl00_ContentPlaceHolder_RadGrid1_ctl00_ctl02_ctl04_RadComboBoxCatalogId_i0_RadTreeViewCatalogId

So you see, on the event of a note being clicked in (B), you can't get a reference to (A) by replacing RadTreeViewCatalogId with RadComboBoxCatalogId

I know I can "guess" the id by taking the left characters up to RadComboBoxCatalogId, but this is a very dirty way.

Isn't there a cleaner way?

[Guss]

Don't worry about an answer...I've found the way that all the controls want to be used, without having all this issues.

One:
You have a Web User Control (Combobox with a tree)

Two:
You have a web service to do the load on demand the tree information

Tree:
Your User Control's combobox with the tree uses the web service to populate the tree as nodes are clicked.

Four:
Now you use your User Control inside your grid's edit template.

Viola...no more funny references because inside the usercontrol you use all the refrenceing which is plain and simple, because its a simple page!

And in the grid, you just have your user control .... "no code!", you usercontrol must just expose the value to the embedded page

   public String SelectedCatalogId
    {
        //Selected hardwarecatalogid is now exposed the the page its embedded in
        get { return hardwarecatalogid.Value; }
    }

hardwarecatalogid in the case above is a hidden control that stores the value (I make sure that when a node is selected that this hidden field gets populated.