Hi,
Yes. This is possible. There are several ways to do this:
1. With a CallbackPanel. This way once you select an option from the first drop down, the Grid is AJAX updated so that you can use server side code to update the second drop down. This will be the easiest approach for you if you MUST run server side code to populate the second drop down (for example, you must run a query against the database). Here is a working example that demonstrates this approach:
http://demo.essentialobjects.com/Default.aspx?path=Grid\_i1\grid_custom_column_adv2The second column of the sample is a regular column, not a custom column, however the idea is the same --- once user selects an item from the drop down, your server side code is triggered to update the second column;
2. Render all possible items to the client side all together. If the total number of options is limited, then you can use this approach. For example, if your first drop down only have "America" and "Europe", and for each option you have a number of countries, then you can render the some JavaScript code like this:
Code: JavaScript
var map = [];
map["America"] = ["U.S.", "Canada", "Mexico", "Brazil"];
map["Europe"] = ["U.K", "France", "Netherlands", "German"];
You would then code your custom item to have select elements like this:
Code: HTML/ASPX
<eo:CustomColumn>
<EditorTemplate>
<select id="dropdown1" onchange="fill_second_column()">
<option>-- Please Select--</option>
<option>America</option>
<option>Europe</option>
</select>
</EditorTemplate>
</eo:CustomColumn>
<eo:CustomColumn>
<EditorTemplate>
<select id="dropdown2">
</select>
</EditorTemplate>
</eo:CustomColumn>
Code: JavaScript
function fill_second_column()
{
//Get both drop downs
var dropdown1 = document.getElementById("dropdown1");
var dropdown2 = document.getElementById("dropdown2");
//Get the list for the second drop down based
//on user selection from the first drop down
var key = dropdown1.options[dropdown1.selectedIndex].text;
var list = map[key];
dropdown2.options.length = 0;
//Update the second list
if (list)
{
for (var i = 0; i < list.length; i++)
{
var option = document.createElement("option");
option.text = option.value = list[i];
if (dropdown2.options.add)
dropdown2.options.add(option);
else
dropdown2.options[i] = option;
}
}
}
Note the first drop down is set to call fill_second_column when user selects an option, which then fills the second drop down based on the data you already rendered. This approach is very fast since everything is done on the client side. But because it does not go back to the server side, all the option must be render to the client side at the very beginning.
3. A hybrid approach is to modify approach 2 to send an AJAX call back to the server side to retrieve the list. You would change this line:
to something like this:
Code: JavaScript
var list = get_list_for_key(key);
Where you would implement get_list_for_key to make an AJAX call to the server (for example, calling a Web service) to retrieve the list. The details for this would be out of the scope of our support, but you should be able to find plenty information on the web about how to call Web service from JavaScript;
Hope this helps.
Thanks!