jqgrid cascading dropdown lists in pop up edit mode

Question

I have two drop down lists, the first one gets populated from the database values and the second one(PriceCode) depends on what the user selects in the first one(CurrCd). My question is how do I populate that second list dynamically? I am trying to do it in dataEvents but have no way of referencing the second drop down list in edit mode. Is there a correct and logical way of doing so?

Here is my code so far:

 grid.jqGrid({
            datatype: 'local',
            jsonReader: als.common.jqgrid.jsonReader('EntityCd'),
            mtype: 'POST',
            pager: '#billingPager',
            loadonce: true,
            colNames: ['Currency', 'Status', 'Bill Curr', 'Price Code'],
            colModel: [
                {
                               { name: 'DefaultCurr', index: 'DefaultCurr', width: 20, sortable: false },
                { name: 'BillStatus', index: 'BillStatus', width: 13, sortable: false },
                {
                    name: 'CurrCd', index: 'CurrCd', width: 20, sortable: false,
                    editable: true,
                    edittype: 'select', stype: 'select',
                    editoptions: {
                        dataUrl: als.common.getServerPath() + 'LegalEntitiesAjax/GetCurrencies',
                        dataEvents:[{
                            type:"change",
                            fn: function (e) {

                                //populate price code list here                           
                                //below does not work to populate PriceCode

                                $.ajax({
                                    type: 'POST',
                                    traditional: true,
                                    contentType: 'application/json; charset=utf-8',
                                    url: als.common.getServerPath() + 'LegalEntitiesAjax/GetPriceList',
                                    data: JSON.stringify({ curcd: this.value }),
                                    async: false,
                                    success: function (data) {                                       

                                        for(i=0; i < data.length; i++) {
                                            $('select#PriceCode').append('<option val=\"' + data[i].PriceCode + '">' + data[i].Description + '</option>');
                                        }


                                    },
                                    error: function (val) { }
                                });


                            }
                        }],

                        buildSelect: function (data) {
                            var currSelector = $("<select id='selCurr' />");
                            $(currSelector).append($("<option/>").val('').text('---Select Currency---'));
                            var currs = JSON.parse(data);
                            $.each(currs, function () {
                                var text = this.CurName;
                                var value = this.CurCode;
                                $(currSelector).append($("<option />").val(value).text(text));
                            });

                            return currSelector;
                        }
                    }
                },
                { name: 'PriceCode', index: 'PriceCode', width: 20, sortable: false, editable: true, edittype: 'select', stype: 'select'}
            ],
            loadtext: 'Loading...',
            caption: "Bill Entities",
            scroll: true,
            hidegrid: false,
            height: 300,
            width: 650,
            rowNum: 1000,
            altRows: true,
            altclass: 'gridAltRowClass',
            onSelectRow: webview.legalentities.billing.onBillingSelected,
            loadComplete: function (data) {
                if (data.length > 0)
                {

                }
                var rowIds = $('#billingGrid').jqGrid('getDataIDs');
                $("#billingGrid").jqGrid('setSelection', rowIds[0]);
            },
            rowNum: 1000
        });
        grid.jqGrid('navGrid', '#billingPager', {
            add: ($("#dev").text() == "True" || $("#globalqc").text() == "True"),
            edit: false,
            del: false,
            search: false,
            refresh: false
        },
        { // Edit Options  
        },
        { // Add Options
            addCaption: 'Add New Billing Entity',
            beforeInitData: function (formid) {

            },
            url: als.common.getServerPath() + 'LegalEntitiesAjax/AddBillingEntity/',
            recreateForm: true,
            closeAfterAdd: true,
            reloadAfterSubmit: true
        },
        { // Del Options
        });

score 0 · Accepted Answer · edited May 23 '17 at 12:08

0

The old answer shows how one can implement the dependent selects. You use form editing. Thus the <select> element of PriceCode column of the form editing will have the id="PriceCode". You can use $("#PriceCode").html(/*new options*/); to change the options of <select> editing field of PriceCode column inside of change event handler of CurrCd column.

edited May 23 '17 at 12:08

Community

1
1

answered Jun 08 '16 at 10:48

Oleg

220,925
34
403
798

Oleg, it worked well but now I am working on the edit mode and need the second list to have the values preloaded and correct value selected when the user tries to edit the record. But the dataEvents does not have a load type. Any idea how to trigger that select after loading the form? – sarsnake Jun 13 '16 at 21:59
@sarsnake: Sorry, but I can't follow you. It's better that you describes the problem in details. What you what to trigger? What you mean under "dataEvents does not have a load type"? `dataEvents` just defines event handlers, which will be bound. What jqGrid loads for you via `dataUrl` and what you load via direct `$.ajax` call. – Oleg Jun 13 '16 at 22:09

jqgrid cascading dropdown lists in pop up edit mode

1 Answers1