I need to implement a cascading select for listing country and state in the grid. I have implemented it as shown below
<sjg:gridColumn
name="country.countryName"
index="countryCode"
title="Country Name"
width="200"
sortable="true"
editable="true"
search="true"
surl="%{selectcountrysurl}"
searchoptions="{sopt:['eq','ne'], dataUrl : '%{selectcountryurl}'}"
searchtype="select"
edittype="select"
editoptions="{ dataUrl : '%{selectcountryurl}' ,
dataEvents: [
{ type: 'change',
fn: function(value) {
var params = 'selectedCountry='+this.value;
$.get('get-state-list.action?'+params, function(data) {
var stateDropDown = document.getElementById('stateName');
stateDropDown.innerHTML = data;
});
}
}
] }"
/>
<sjg:gridColumn
name="stateName"
index="stateName"
title="State Name"
width="200"
sortable="true"
editable="true"
search="true"
surl="%{selectstateurl}"
searchoptions="{sopt:['eq','ne'], dataUrl : '%{selectstateurl}'}"
searchtype="select"
edittype="select"
id="stateSelect"
editoptions="{ dataUrl : '%{selectstateurl}' }"
/>
With these settings, I could populate the state select box corresponding to the selected country. But upon editing a row using form edit, I could see that the state select box is populated with already existing list as there is no call being made to the dataUrl. I could see that the AJAX request to dataUrl is called only once when the element is created. Is there anyway I can make this possible?
regards, Arun