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?

Answer 1

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