jQuery: Populate on-demand a RadComboBox inside RadGrid

[Jorge]

Hi,

I have a radgrid with two combobox (per row), so when the radgrid loads i populate the firts combobox, now i need to populate the second combobox when the selected index of the firts one changes, but i need to do that all by client-side, i am using a code-behind method enabled for access in jquery, that means that the method is decorated with [WebMehod].

Right now i am using an ajax query inside the event onclientindexchanged, i can get the combobox instance and i can look for the items for populate the second combobox, but the big problem im facing is that i have no idea about how do i get the reference/instance of the second combobox inside the same row of the firts one.

i have the data, but how do i populate the second combobox ( in the same row of radgrid ) ?

Here is my jquery ajax function:

function FindRoomsByFloor(sender, eventArgs) {

            var params = new Object();
            params.idBloque = sender.get_value();
            params = JSON.stringify(params);

            $.ajax({
                type: "POST",
                url: "Default.aspx/GetRoomsByFloor",
                data: params,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: false,
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus + ": " + XMLHttpRequest.responseText);
                },
                success: function(result) {

                    $.each(result.d, function() {
                             //Here i most populate the second combobox in the same row of the first one
                    });

                }
            });
        }

[Marin]

Hi,

 You can get reference to the second combo box in the following way:

var grid = $find('<%= RadGrid1.ClientID %>');
var tableView = grid.get_masterTableView();
var item = tableView.get_dataItems()[3];
var cell = tableView.getCellByColumnUniqueName(item, "ColumnUniqueName");
var combo = $telerik.findComboBox("ServerIDofComboBox", cell);

Then you can bind the combo box in the preferred way or call the requestItems method as shown in this demo.

Hope this helps.
Regards,
Marin
the Telerik team

[Jorge]

Hi Marin,

I will try yuour solution soon, but let me tell you that i found another solution i little bit more easy and well for my low understanding of RadControls, let me tell you:

As you know, each controls id is created with some prefix that talks about where is located that control, so if my two comboboxes are located in the same row you can deduce that both will have the same control id prefix, by that way i get the id fo the firts combo and with javascript i modify that string and formatting a new one adding the seconds control name, with this i finally can get the exactly instance of the control im looking for.

var firstComboId = sender.get_id(); //Gets the firstCombo Id 


var stringIdSecondCombo = firstsComboId.substring(0, comboBloqueId.lastIndexOf("_") + 1) + "ServerIdOfSecondCombo"; //Replace the id of the firstcombo adding the secondcombo server's id

 

var secondComboInstance = $find(stringIdSecondCombo); //Gets the instance of the second combo

 

var values = secondComboInstance .get_value(); //Gets current values of the second combo

 

secondComboInstance .clearItems();

secondComboInstance .clearSelection();

I Hope my low-level answer could help someone

[Marin]

Hello,

 Yes, this is also an acceptable solution for this specific case. But normally calculating the client IDs of the controls by concatenating other IDs is not always reliable solutions in all cases.

All the best,
Marin
the Telerik team

[Jorge]

Hi Marin,

I think you must improve the controls behavior for this kind of situations, your solution or mine, both are very confusing.. i hope to see something like this:

var row = $find("combobox1").parentRow;

var control = row.findControl("combobox2");

Ok, you could think that its difficult to know when the combo are inside a row, but by that way you always return null.

or another approach could be:

var row = $find("RadGrid").findRowWithControl("combobox1");

var control = row.findControl("combobox2");

Thanks,

[Marin]

Hello Jorge,

 The $find method is an internal method of the framework and we cannot change it's behavior, that's why we have our custom methods in the $telerik module such as findControl or findComboBox (that I have used in my approach), using them you are able to write something like this:

$telerik.findControl(row, "combobox2")
//where "row" is an HTML element holding the server control (e.g. a <tr> )

All the best,
Marin
the Telerik team