I have a WebDataGrid with 2 columns, A & B.
Column A is readonly.
Column B has a DropDownProvider to pick the value.
I want the data items in B to be dependent on the value in A. So for example:If A = 1, then B = {red, pink, salmon}If A = 2, then B = {blue, cyan, turquoise}etc.
I have gotten the behavior I want using Load-on-Demand on column B, i.e: loadItems(A.value, false).However, this forces me to Load-on-Demand each time I open the drop down which makes the UI a bit slow.
Is there a better way to do this? Maybe use Load-on-Demand, but somehow cache the results on the client side? Any ideas?
Hi ssd,
If I understand you right, you have readonly column A and Column B, which is dependable on the column A value. So once the data is loaded in the Grid, no matter what I choose from the drop down, the values in the drop down won't be changed? then why you will load them on every selection changesd of the drop down??
Maybe I don't understand you right, but can you send us a sample, with code to acquire better vision of your problem
Thanks,
Hi Todor,
See my attached solution, the page in question is DropDownProviderPerRow.aspx
For each row on the grid, Column A will have a different value . Column B will have a value and a DropDownProvider which has 3 different options. The options in the DDP are populated based on the value of Column A.
Thanks,Walter
Hello Walter,
We appreciate the sample.
It demonstrates the issue that you experience and I was able to understand your query.
The issue happens because DropDownProvider is one per column.
It is one WebDropDown control which is loaded every time when a cell from the column
It loads the items every time cell from this column enters in edit mode.
I guess you are trying to achieve something like keeping the items in the view state.
Currently this can be done if you use WebDropDown in a templated column only .
Let me know if you feel that I haven't answered your question.
Hi Tsvetelina,Thanks for the suggestion. It helps a bit, but it raises a few more issues.
I was able to update my grid and make the Shade column a template field with individual WebDropDown controls. However, now my row does not get selected when I open a WebDropDown, which means my getActiveGridRow() JavaScript function no longer works. For my production app, I need to know which row the the WebDropDown is in. Is there a way I can find and activate the WebDropDown's parent GridRow during the DropDownOpening event?
Also, can you tell me why the AjaxIndicator isn't showing my DropDownProviders?
Hello ssd,
Thank you for the update.
You are correct, in this case you should move the logic to the server side.
There you can access the parent container and respectively the row item
Then you can access the value of the first row item and get the colored.
protected void WebDropDown1_ItemsRequested(object sender, DropDownItemsRequestedEventArgs e)
{
Control webDropDown = (Control)sender;
TemplateContainer container = (TemplateContainer)webDropDown.Parent;
GridRecordItem item = (GridRecordItem)container.Item;
GridRecord row = item.Row;
DataTable dt = SampleData.GetShadeDataTable();
int colorId = (int)row.Items[0].Value;
// find the shades that match the passed ColorId
DataRow[] shades = dt.Select("ColorId = " + colorId.ToString());
for (int i = dt.Rows.Count - 1; i >= 0; i--)
if (!shades.Contains(dt.Rows[i]))
dt.Rows.RemoveAt(i);
}
WebDropDown wdd = (WebDropDown)sender;
wdd.Items.Clear();
wdd.DataSource = dt;
wdd.DataBind();
// simulate a long database call
System.Threading.Thread.Sleep(1000);
Regarding the ajax indicator, the WebDropDown is smart and shows it when the request is time-consuming.
In your case you simulate this by putting to sleep the thread so you should manually show the ajax indicator:
function WebDropDown1_DropDownOpening(sender, eventArgs) {
///<summary>
///
///</summary>
///<param name="sender" type="Infragistics.Web.UI.WebDropDown"></param>
///<param name="eventArgs" type="Infragistics.Web.UI.DropDownContainerEventArgs"></param>
if (sender.get_items().getLength() == 0) {
sender.get_ajaxIndicator().setRelativeContainer(sender.get_element());
sender.get_ajaxIndicator().set_location(9);
sender.loadItems("", false);
sender.get_ajaxIndicator().show();
Please refer to the modified code provided .Let us know if you need further assistance regarding this.
Hello ,
Let us know if you need further assistance regarding this.
Hi Tsvetelina,
I managed to get the behavior I wanted. I switched back to my original method of using DropDownProvider controls that load on demand based on the value of the ColorID column. It works great other than the AjaxIndicator doesn't display while loadItems is being called, so if the database call takes a while, the user is able to select the old Shades while the new shades are loading.
I started a new thread for the AjaxIndicator issue: http://community.infragistics.com/forums/t/57351.aspx