Question

I am using jqGrid 3.8.1. I want to change the pull-down values of a combobox based on the selected value of another combobox. That’s why I am searching on how to change the editoptions:value of an edittype:"select".

Here’s the sample jqGrid code:

<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<script type="text/javascript" src="<c:url value="/js/jquery/grid.locale-ja.js" />" charset="UTF-8"></script>
<link type="text/css" rel="stylesheet" href="<c:url value="/css/jquery/ui.jqgrid.css" />"/>
<script src="<c:url value="/js/jquery/jquery.jqGrid.min.js" />" type="text/javascript"></script>
<table id="rowed5"></table>
<script type="text/javascript" charset="utf-8">
var lastsel2;
$("#rowed5").jqGrid({
    datatype: "local",
    height: 250,
    colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'],
    colModel:[
        {name:'id',index:'id', width:90, sorttype:"int", editable: true},
        {name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
        {name:'stock',index:'stock', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"}},
        {name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX;AR1:ARAMEX123456789"}},       
        {name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}}      
    ],
    caption: "Input Types",
    resizeStop: function (newwidth, index) {
        var selectedRowId = $("#rowed5").getGridParam('selrow');
        if(selectedRowId) {
            //resize combobox proportionate to column size
            var selectElement = $('[id="' + selectedRowId + '_ship"][role="select"]');
            if(selectElement.length > 0){
                $(selectElement).width(newwidth);
            }
        }
    }
    ,
    onSelectRow: function(id){
        if(id && id!==lastsel2){
            //$(this).saveRow(lastsel2, true);
            $(this).restoreRow(lastsel2);
            $(this).editRow(id,true);

            lastsel2=id;

            $(this).scroll();

            //resize combobox proportionate to column size
            var rowSelectElements = $('[id^="' + id + '_"][role="select"]');
            if(rowSelectElements.length > 0) {
                $(rowSelectElements).each(function(index, element){
                    var name = $(element).attr('name');
                    var columnElement = $('#rowed5_' + name);
                    if(columnElement.length > 0) {
                        var columnWidth = $(columnElement).width();
                        $(element).width(columnWidth);
                    }
                });
            }
        }
    }
});
var mydata2 = [
        {id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx"},
        {id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime"},
        {id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT"},
        {id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX123456789"},
        {id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx"},
        {id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx"},
        {id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX"},
        {id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT"},
        {id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx"}
        ];
for(var i=0;i < mydata2.length;i++) {
 $("#rowed5").jqGrid('addRowData',mydata2[i].id,mydata2[i]);
}
</script>

Scenario:

1. All ship will be displayed as initial load.
2. If the stock column changes to Yes, ship will display only FedEx, TNT.
3. If the stock column changes to No, ship will display only InTime, ARAMEX, ARAMEX123456789.

How can I change the options?

Answer 1

I solved it by trial and error. Want to share it, please refer to the below snippet. The changes are on onSelectRow function.

    onSelectRow: function(id){
    if(id && id!==lastsel2){
        //$(this).saveRow(lastsel2, true);
        $(this).restoreRow(lastsel2);

        // get the selected stock column value before the editRow
        var stockValue = $("#rowed5").jqGrid('getCell', id, 'stock');
        if( stockValue == 'Yes') {
            $("#rowed5").jqGrid('setColProp', 'ship', { editoptions: { value: 'FE:FedEx;TN:TNT'} });
        } else if( stockValue == 'No') {
            $("#rowed5").jqGrid('setColProp', 'ship', { editoptions: { value: 'IN:InTime;AR:ARAMEX;AR1:ARAMEX123456789'} });
        }

        $(this).editRow(id,true);

        lastsel2=id;

        $(this).scroll();

        //resize combobox proportionate to column size
        var rowSelectElements = $('[id^="' + id + '_"][role="select"]');
        if(rowSelectElements.length > 0) {
            $(rowSelectElements).each(function(index, element){
                var name = $(element).attr('name');
                var columnElement = $('#rowed5_' + name);
                if(columnElement.length > 0) {
                    var columnWidth = $(columnElement).width();
                    $(element).width(columnWidth);
                }
            });
        }
    }
}