jQuery Grid Plugin - jqGrid

Hi Tony,

I am using dataUrl to return a select list of Accounts with <optgroup> groups. 

My issue: when saving the row no value is passed to the editurl for my Select column If i remove the <optgroup>'s a value is passed to editurl for my Select column.

Description: For my column data I return the Account Name, not the value, so when the grid loads the name is displayed.

When a line is edited (in-line editing), the dataUrl is called and the select list is displayed and my Account is selected for the rows data.

I then select a new Account from the Select list and press enter to save. The selected Account value is not passed to the editurl function. if i remove the <optgroup>'s from the select the Account value is passed to the 3editurl function.

I'm not sure if I'm doing something wrong, ie not setting a grid parameter,

Hoping you can help me out.

Thanks in advance,

Chris

Sample Select HTML:

<select>
  <optgroup label='Expense'>
    <option value='60'>Food</option>
    <option value='34'>Fuel</option>
  </optgroup>
  <optgroup label='Income'>
    <option value='55'>Sales</option>
    <option value='audi'>Services</option>
  </optgroup>
</select>

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

tony said:

Hello,

This is not supported when used with editoption value, but you can use dataUrl and provide the following content

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

This will work.

Regards

Tony