How do I implement a Dojo Master/Detail form

Question

I have the situation where I need to update a grid based on what has been selected in a combo box. The layout is such that the combo box is part of a form on top and the grid is at the bottom.

Answer 1

First use dojo connect to bind the onChange event of your combo boxes to a function like below:

dojo.connect(selectFilterGroup,     'onChange',  updateFilter);
dojo.connect(selectFilterParameter, 'onChange',  updateFilter);

Then in the function call the filter function on your grid:

var updateFilter = function () {
    var filterParams = {};
    var group      = selectFilterGroup.get('value');
    var parameter  = selectFilterParameter.get('value');    
    if (group != '')     filterParams['group_name']  = group;
    if (parameter != '') filterParams['parameter']   = parameter;
    myGrid.filter(filterParams);
}

In these examples, selectFilterGroup and selectFilterParameter are both dijits representing combo boxes.

Another way to do this, depending on how you have constructed your grid and combo boxes is to use the displayedValue property for the filter

var group      = selectFilterGroup.get('displayedValue');