0

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

dsi
  • 3,199
  • 12
  • 59
  • 102

1 Answers1

2

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.
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • ManyThanks Oleg, it works. Please share me how i should change the color and font of the jqgrid.. which are the properties have to update for header font, content font and header background color and row background color ? – dsi Jan 28 '14 at 09:16
  • @Dhaval: You are welcome! Sorry, but the question with the color and the size of fonts have no relation with my answer on your question. I'll post later my answer to your *another question* about colors etc. – Oleg Jan 28 '14 at 09:20
  • please respond at http://stackoverflow.com/questions/21399581/how-to-change-color-theme-and-font-size-of-jqgrid – dsi Jan 28 '14 at 09:25