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:

I have successfully populated my dropdown boxes dynamically on initial load.
Now I want to reload one dropdown box based on the selection from the other dropdown box.
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.

I'm [struggling](http://stackoverflow.com/q/21987390/1391249) for populating a drop down list on initial load. How did you populate the drop down list on initial page load? — Tiny, Mar 07 '14 at 11:01
What do `surl="%{selectautsurl}"` and `editoptions="{ dataUrl : '%{selectautsurl}' }"` mean here? How do they get item values and item labels of ` — Tiny, Mar 07 '14 at 14:16
the selectautsurl is defined in the . Please check this site: http://code.google.com/p/struts2-jquery/wiki/FormatGrid — arn-arn, Mar 14 '14 at 16:55
I don't precisely understand how specifying `editoptions="{ dataUrl : '%{selectautsurl}' }"` with `` can get item values and item labels of HTML ` — Tiny, Mar 14 '14 at 17:38
you have to configure your action class in the struts a success value and it should point to a file that has select element. here is the struts config: some.jsp .... here is the jsp: <%@ taglib prefix="s" uri="/struts-tags"%> — arn-arn, Mar 14 '14 at 19:54
I have used `` but here it is `` in which the list should appear while editing of rows. Can we have a stray `` inside ``? Sorry for so much concern but I don't understand precisely. — Tiny, Mar 14 '14 at 20:04
no you cannot... please read that wiki on the grid. check the attributes "edittype"... read thru the examples in the wiki. download the sample codes and play around with it. — arn-arn, Mar 19 '14 at 17:28

score 2 · Accepted Answer · answered Jan 21 '14 at 05:50

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.

thank you Uchenna for your inputs. I had some modifications though. — arn-arn, Jan 21 '14 at 19:13

score 2 · Answer 2 · answered Jan 21 '14 at 19:16

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;
                                    });

                             }
                          }
                      ]     }"

populate struts2 jQuery grid dropdown column based on another dropdown column

2 Answers2

Linked