populate struts2 jQuery grid dropdown column based on another dropdown column

Question

I have searched for this kind of question before posting. Most of the answers found are not related to struts2 jQuery grid. Here is my situation:

1. I have successfully populated my dropdown boxes dynamically on initial load.
2. Now I want to reload one dropdown box based on the selection from the other dropdown box.
3. I am looking for a built in solution using the attributes/topics but I couldn't find one.

Can anyone share any solution to this?

Here is my code:

<sjg:gridColumn
    name="aut"
    index="aut"
    title="AUT"
    width="300"
    sortable="true"
    editable="true"
    edittype="select"
    surl="%{selectautsurl}"
    editoptions="{ dataUrl : '%{selectautsurl}' }"

   />
    <sjg:gridColumn
    name="eforms"
    index="eforms"
    title="Page/Eform"
    width="300"
    sortable="true"
    editable="true"
    edittype="select"
    surl="%{selecteformsurl}"
    editoptions="{ dataUrl : '%{selecteformsurl}' }"
    /> 

Thank you very much for your help.

Answer 1

What you need to do is to add dataEvents to the first gridColumn which changed value reloads the second gridColumn. You can do something like this,

<s:url id="url_id" namespace="/your_namespace" 
action="action_url_to_get_the_reloaded_list" >

    <sjg:gridColumn
        name="aut"
        index="aut"
        title="AUT"
        width="300"
        sortable="true"
        editable="true"
        edittype="select"
        surl="%{selectautsurl}"
        editoptions="{ dataUrl : '%{selectautsurl}', dataEvents: [type: 'change', fn: function(e) 
    {
                var url= '<s:property value="url_id" />' + '?your_attribute_sent_to_the_back=' + $('input#aut').val();, options;
                $.getJSON(url, function(retVal)
                {
                    options += '<option value="">&nbsp;</option>';
                    $.each(retVal.ur_returned_value, function(index, element)
                    {
                        options += '<option value="' + element.your_value + '">' + element.your_display_value + '</option>';
                    });     
                    $('input#eforms').html(options);
                });         
    }] }"

       />

I didn't test this solution but i think it will work.

Answer 2

thanks Uchenna for your comments. I took it and made some modifications and now it is working:

editoptions="{ dataUrl : '%{selectcavsurl}' ,
                                       dataEvents: [
                                       {  type: 'change', fn: function(value) {
                                    var params = 'selectedCAV='+this.value;
                                    $.get('eformsDropdown.action?'+params, function(data) 
                                    {
                                            var dropDown = document.getElementById('eforms');
                                            dropDown.innerHTML = data;
                                    });

                             }
                          }
                      ]     }"