with don't save select value I have a JQGrid column with edittype: Select wi...">
Clever Geek Handbook

JQGrid Edittype: "select" with dataurl returns <select> with <optgroup> don't save select value

I have a JQGrid column with edittype: Select with dataUrl to return a list of accounts with groups for different account groups.

My problem is, when I save the row, no value is passed to the editurl for my Select column. If I remove the value is passed to the editurl for my Select column.

Description. For my column data, I am returning the account name, not the value, so when the grid loads, the name is displayed.

When a line is edited (edit in line) dataUrl is called and a select list is displayed and my account is selected for the given lines.

Then I select a new account from the picklist and press enter to save. The selected Account value is not passed to the editurl function for the column. if I remove from the Account value it is passed to the editurl function.

I'm not sure if I am doing something wrong, i.e. not setting the grid parameter,

Hope you can help me.

Thanks in advance,

Chris

My grid code:

$(document).ready(
function () {
    var lastSelection;
    var grid = jQuery("#BankTransactions");
    grid.jqGrid({
        url: '/DropDown/GridData/',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['TransactionLineId', 'TransactionId', 'BankTransactionId', 'Number', 'Amount', 'Category'],
        colModel: [
                    { name: 'transactionLineId', index: 'transactionLineId', editable: true, editrules: { edithidden: true }, hidden: true, width: 40, align: 'left' },
                    { name: 'transactionId', index: 'transactionId', editable: true, editrules: { edithidden: true }, hidden: true, width: 40, align: 'left' },
                    { name: 'bankTransactionId', index: 'bankTransactionId', editable: true, editrules: { edithidden: true }, hidden: true, width: 40, align: 'left' },
                    { name: 'Number', index: 'Number', width: 100, align: 'left', sortable: false },
                    { name: 'Amount', index: 'SubAmount', editable: true, width: 100, align: 'right', sortable: false, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'class="BankTranEdit"' }, formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '&nbsp;'} },
                    { name: 'CategoryIdURL', index: 'CategoryIdURL',
                        editable: true,
                        edittype: 'select',
                        //formatter: 'select',
                        editoptions: { dataUrl: "/DropDown/CategorySelectList" },
                        width: 220,
                        align: 'left'
                    },
                  ],
        pager: jQuery('#pager'),
        rowNum: 100,
        rowList: [25, 50, 100],
        editurl: "/Dropdown/GridSave",
        sortname: 'Number',
        sortorder: "desc",
        viewrecords: true,
        width: 1250,
        height: 450,
        onCellSelect: function (rowid, iCol, cellContent, e) {
                        grid.restoreRow(lastSelection);
                        grid.editRow(rowid, true, null, null, null, null, null);
                        lastSelection = rowid;  
                      }

    });
});

Output / Dropdown / GridData:

{"total":1,
"page":1,
"records":6,
"rows":[
    {"id":165,"cell":["165","249","125","DM000249","1500.00","Sales"]},
    {"id":145,"cell":["145","229","105","SM000229","100.00","Rent"]},
    {"id":153,"cell":["153","237","113","SM000237","38.07","Bank Fees"]},
    {"id":185,"cell":["185","269","145","SM000269","750.00","Cash Discounts"]},
    {"id":194,"cell":["194","278","154","SM000278","13.29","Rent"]},
    {"id":211,"cell":["211","295","171","SM000295","100.00","Rent"]}]
}

Output / Dropdown / CategorySelectList

<select>
<optgroup label='Expenses'>
<option value='42'>Accounting Fees</option>
<option value='60'>Bank Fees</option>
<option value='23'>Bank Service Charges</option>
<option value='24'>Books and Publications</option>
<option value='25'>Cash Discounts</option>
<option value='43'>Rent</option>
</optgroup>
<optgroup label='Income'>
<option value='19'>Sales</option>
<option value='20'>Services</option>
<option value='21'>Interest Income</option>
<option value='22'>Other Income</option>
</optgroup>
</select>
+2


source to share


1 answer


The current version of jqGrid does not work with <optgroup>

internally <select>

.

enter image description here

I find using it <optgroup>

can be useful in some cases. So I debugged the jqGrid code a bit and found out that only two lines of jqGrid code need to be changed (lines 143-144 grid.inlinedit.js

or lines 8262-8263 from jquery.jqGrid.src.js

from jqGrid 4.1.1) from

tmp[nm] = $("select>option:selected",this).val();
tmp2[nm] = $("select>option:selected", this).text();

to

tmp[nm] = $("select>option:selected,select>optgroup>option:selected",this).val();
tmp2[nm] = $("select>option:selected,select>optgroup>option:selected",this).text();

or simply

tmp[nm] = $("select option:selected",this).val();
tmp2[nm] = $("select option:selected",this).text();

to fix the problem.



If you need support for selects with attribute multiple: true

:

enter image description here

should be changed in the same way as above, one more line ( line 149 ) grid.inlinedit.js

c "select>option:selected"

. To create a jqGrid with an attribute multiple: true

that works with a property dataUrl

, there is one more line to fix ( line 67 ) grid.inlinedit.js

. Need to change

if(cm[i].edittype == "select" && cm[i].editoptions.multiple===true && $.browser.msie){
    $(elc).width($(elc).width());
}

for example the following

if(cm[i].edittype === "select" && typeof(cm[i].editoptions)!=="undefined" &&
   cm[i].editoptions.multiple===true &&
   typeof(cm[i].editoptions.dataUrl)==="undefined" && $.browser.msie) {

    $(elc).width($(elc).width());
}

This change will prevent setting very small width

in the element before , which will be loaded by request $.ajax

from dataUrl

. You should probably put the same fix width

inside the success event handler of the corresponding call $.ajax

from grid.common.js

where the data for dataUrl

will be loaded. I tested my demos in IE9 and no need to fix IE9.

You can see the demo fixed code jqGrid here: the only choice demonstration , demo version multiselect . You must take into account that there is no code for the "/ Dropdown / GridSave" server to be used in editurl

. However, you will see in Fiddeler Firebug that the published data that will be sent to the server contains information about the selected item. If you want the demo to work locally, you must change editurl

to 'clientArray' and possibly install additionally loadonce:true

.

+5


source






More articles:


All Articles