How to bind property to textbox control in jqgrid

Question

I want to bind the textbox control with object's property. As in below code, its all work fine except, textbox control not bind the asspciated property mentioned in "name,index".

Below is my jqgrid code:

   $('#g).jqGrid({
        ajaxGridOptions: {
            error: function () {
                $('#g')[0].grid.hDiv.loading = false;
                alert('An error has occurred.');
            }
        },
        url: '@Url.Action("Getvalues", "cntrollName")/' + 0,
        postData: { ID: rowID },
        datatype: 'json',
        jsonReader: { root: 'List', page: 'Page', total: 'TotalPages', records: 'TotalCount', repeatitems: false, id: 'ID' ,''},
        mtype: 'GET',
        colNames: ['GrdID', Name],
        colModel: [
            { name: ID, index: ID, hidden: true },
            { name: 'FullName', index: 'FullName', width: 150 },
            {
              name: 'txtVAlue', index: txtVAlue, width: 40, align: 'center',  formatter: function (cellValue, option) {
                        return '<input type="text" name="txtBox" id="txt_' +  option.rowId + '"  />';
                    }
                }],

        pager: $('#g),
        sortname: ID,
        rowNum: 10,
        width: '525',
        height: '100%',
        viewrecords: true,
        beforeSelectRow: function (rowid, e) {
                               return true;
        },
        sortorder: 'desc'
    }).navGrid('#g, { edit: false, add: false, del: false, search: false, refresh: false });

Please suggest me how i could bind the textbox with field value. Please also suggest me , is it possible to change the color and font size of jqgrid.

Thank You

Answer 1

The formatter for txtVAlue column don't use cellValue. To fix the code of the formatter you can use something like

{
    name: 'txtVAlue',
    width: 40,
    align: 'center',
    formatter: function (cellValue, option) {
        return '<input type="text" size="7" name="txtBox" id="txt_' + option.rowId +
            '" value="' + cellValue +'"/>';
    }
}

After the <input> elements will be created correctly you should probably define the event handle which saves the changes in the inputs. You cab do the binding inside of loadComplete callback for example. Additionally you should consider to implement onSortCol callback. It will be called before the grid will be sorted (if the user clicks on the column header).

Additionally you should

• include closing ' to all '#g (replace it to '#g'). Name, ID and rowID should be enclosed in ' too (or the variables should be declared and assigned).
• you have to use another selector for pager as the id of the grid. For example pager: '#g_pager. The div with id="g_pager" should be placed somewhere.
• I recommend you to use gridview: true and autoencode: true options.