Dependent combo box populating in Dojo Dijit?

Question

I have a dojo combobox which when the options are changed i need to populate a related second combo box which is co dependent on the value of the first combo box. How can i achieve this. The code i have tried so far is below

html code:

<div class="gis_SearchDijit">
<div class="formContainer">
    <div data-dojo-type="dijit.form.Form" data-dojo-attach-point="searchFormDijit">
        <table cellspacing="5" style="width:100%; height: 49px;">
            <tr>
                <td>                       
                    <label for="Customer">Customer:</label>                                        
                      <div data-dojo-type="dijit.form.ComboBox" id="Customer"></div> <br />  
                    <label for="Attributes">Search Attribute:</label>      
                     <div data-dojo-type="dijit.form.ComboBox" id="Attributes"></div>                     

                    <br />
                    Enter Attribute Value:<input id="searchText" type="text" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="name:'searchText',trim:true,required:true,style:'width:100%;'"
                    />
                </td>
            </tr>
        </table>
    </div>
</div>

<div class="buttonActionBar">
        <div data-dojo-type="dijit.form.Button" data-dojo-props="busyLabel:'searching',iconClass:'searchIcon'" data-dojo-attach-event="click:search">
                Search
        </div>
</div>

postCreate: function () { 
                    this.inherited(arguments); 


                    this.populateCmbCustomer(Memory); 

                    var comboBoxDigit = registry.byId("Customer"); 


                    comboBoxDigit.on('change', function (evt) { 
                        alert('on change'); //This alert is triggerd 
                        this.populateCmbCustomerAttribute(Memory); 

                    }); 

   populateCmbCustomer: function (Memory) { 
                var stateStore = new Memory({ 
                    data: [ 
                { name: "Cust  Data", id: "CUST" }, 
                { name: "Owner Data", id: "Owner" }, 
                { name: "Applicant", id: "Applicant" }                     
                    ] 
                }); 

                var comboBoxDigit = registry.byId("Customer");     
                //console.log("COMBO: ", comboBoxDigit); 
                comboBoxDigit.set("store", stateStore); 
            }, 



                 populateCmbCustomerAttribute: function (Memory) { 
                var custAttribute = new Memory({ 
                    data: [ 
                { name: "Custid", id: "Cust" }, 
                { name: "Applicant Id", id: "Applicant" }, 
                { name: "Owner_Id", id: "Owner" } 

                    ] 
                }); 

                var CmbCustomerAttribute = registry.byId("Attributes"); 
                CmbCustomerAttribute.set("store", custAttribute); 
            }, 

Note: the above is just part of the code of my widjet.js. I am able to load the first combobox with the options. So now when i chose 'Cust Data' in my first combobox then custid should be the only option in second combo box. In the same way Owner Data in first then Owner_id in second...But so far i am not able to populate the second combo-box.. Can some one please guide me Than You in advance

Answer 1

you should use the query property of the second combo it should look something like this

comboBoxDigit.on('change', function (evt) { 
   var CmbCustomerAttribute = registry.byId("Attributes");
   CmbCustomerAttribute.set("query", {filteringProperty: this.get('value')}); //if you dont understand this check out the stores tutorials
});

EDIT: tutorials referenced in above code snippet helps clear up the ambiguity of "filteringProperty" quite a bit.

I would also recomend to populate your sencond combo from the beggining with something like this

var CmbCustomerAttribute = registry.byId("Attributes");
CmbCustomerAttribute.set("store", store); 
CmbCustomerAttribute.set("query", {id:'nonExistantId'}); //so nothing shows in the combo

I think somthing like this is what you are seraching for, any doubts just ask. as cant say mucho more whitout a fiddle or actual code