Binding an event to an add dialog select input in jqgrid

Question

I have a jqgrid with the add dialog enabled for adding new rows. The way I would like it to work is that the user will select from a list of drop down items and the item chosen will cause a second drop-down to be populated with data based on the first item.

For example, if my grid had two columns, one for country and one for state, when the user clicked the add button, the country input would be a drop-down, dynamically populated with countries by an ajax call. Then, when the user selects a country, the state drop-down is populated based on the country selected.

Currently I am doing something like the following:

            beforeProcessing: function () {
                var allcountries = ajaxcall();
                $('#clientReportsGrid').setColProp('Countries', { editoptions: { value: allcountries, class: 'edit-select' }, editrules: { required: true, edithidden: true} });
            },
            loadComplete: function () {
                $('#Countries').change(function () {
                    // States will be populated here
                    alert("changed");
                });
            }

The first part in beforeProcessing works fine and the countries drop-down is populated as expected. However, the event in loadComplete does not get attached to the select input with id the 'Countries' and the alert never occurs. It seems that the select object has not yet been created with loadComplete fires, but if that is the case I'm not sure where to place the logic where the states will be populated.

Any ideas?

I did provide one, what type of example are you looking for? — zaq, Jun 29 '12 at 17:59

score 1 · Answer 1 · edited May 23 '17 at 12:20

1

jqGrid has no direct support of depended selects, but in the answer you will find the implementation of the scenario. The most problem is that the code is not small, but it's quickly to analyse a working code as to write your own one.

edited May 23 '17 at 12:20

Community

1
1

answered Jun 29 '12 at 17:24

Oleg

220,925
34
403
798

score 0 · Accepted Answer · answered Jul 04 '12 at 19:25

I ended up doing something like the following, its a bit redundant but it works and isn't too code heavy:

First, in the beforeProcessing callback, I populate both the countries and states drop-downs with their initial values:

beforeProcessing: function () {
            var allcountries = ajaxCallToFetchCounties();
            $('#clientReportsGrid').setColProp('Countries', { editoptions: { value: allcountries, class: 'edit-select' }, editrules: { required: true, edithidden: true} });
            var states = ajaxCallToFetchStates();
            $('#clientReportsGrid').setColProp('States', { editoptions: { value: states , class: 'edit-select' }, editrules: { required: true, edithidden: true} });
        }

Then in the pager's add option, I used the beforeShowForm callback to attach a method to the change event of the countries select input, and within that method I fetch the states based on the current country and repopulate the select control:

beforeShowForm: function (form) {
                $("#Countries").unbind("change").bind("change", function () {
                    var states = ajaxCallToFetchStates();
                    //Manually clear and re-populate the states select box here with the new list of states.
                });
                $('#tr_AccountCode', form).show();
            }

Binding an event to an add dialog select input in jqgrid

2 Answers2