Inline editing row

Question

I'm starting with jqGrid now and there are some issues that I can't understand. I'm doing a grid to be inline editable, but it just edit the 1st row. If I click in any row, it edit just the first row. I don't know what is going on, if somebody could tell me how to do it step-by-step, it would help me a lot.

This is a part of my code:

$(function(){
    var lastSel;
    $("#list").jqGrid({
    url:'php.php', 
    datatype: 'xml',
    mtype: 'POST', 
    colNames:['ac_n_quad', 'ac_l_circ', 'ac_n_circ', 'ac_fin_g', 'ac_pot', 'ac_volt', 'ac_n_polos', 'ac_t_prot', 'ac_v_prot', 'ac_cabo',
    'ac_fd', 'ac_fp', 'ac_ctr', 'ac_pot_a', 'ac_pot_b', 'ac_pot_c', 'ac_pos_1', 'ac_pos_2', 'ac_calc'], 
    colModel :[ 
      {name:'ac_n_quad', index:'ac_n_quad', width:110, align:'right', editable:true, key:true},
      {name:'ac_l_circ', index:'ac_l_circ', width:65, align:'right', editable:true},
      {name:'ac_n_circ', index:'ac_n_circ', width:120, align:'right', editable:true, key: true},
      {name:'ac_fin_g', index:'ac_fin_g', width:60, align:'right', editable:true},
      {name:'ac_pot', index:'ac_pot', width:55, align:'right', editable:true},
      {name:'ac_volt', index:'ac_volt', width:60, align:'right', editable:true},
      {name:'ac_n_polos', index:'ac_n_polos', width:100, align:'right', editable:true},
      {name:'ac_t_prot', index:'ac_t_prot', width:100, align:'right', editable:true},
      {name:'ac_v_prot', index:'ac_v_prot', width:70, align:'right', editable:true},
      {name:'ac_cabo', index:'ac_cabo', width:60, align:'right', editable:true},
      {name:'ac_fd', index:'ac_fd', width:55, align:'right', editable:true},
      {name:'ac_fp', index:'ac_fp', width:55, align:'right', editable:true},
      {name:'ac_ctr', index:'ac_ctr', width:60, align:'right', editable:true},
      {name:'ac_pot_a', index:'ac_pot_a', width:70, align:'right', editable:true},
      {name:'ac_pot_b', index:'ac_pot_b', width:70, align:'right', editable:true},
      {name:'ac_pot_c', index:'ac_pot_c', width:70, align:'right', editable:true},
      {name:'ac_pos_1', index:'ac_pos_1', width:70, align:'right', editable:true},
      {name:'ac_pos_2', index:'ac_pos_2', width:70, align:'right', editable:true},
      {name:'ac_calc', index:'ac_calc', width:65, align:'right', editable:true}],
    cmTemplate: { align: 'center', editable: true },

    onSelectRow: function(id){
        if(id && id !== lastSel){
            $(this).restoreRow(lastSel);
            lastSel = id;
        }
        $(this).editRow (id, true);
    },
    prmNames: {ac_n_quad: "id"},
    editurl:'clientArray',
    autowidth: 'true', 
    height: 'auto', 
    rowNum: 10, 
    rowList: [10,20,30, 40, 50, 60, 70, 80, 90, 100],
    sortname: 'ac_n_quad, ac_n_circ',
    sortorder: 'asc', 
    pager: '#pager', 
    viewrecords: true,
    gridview: true,  
    caption: 'Table circ_69' 
    });

    jQuery('#list').jqGrid('gridResize');
    jQuery('#list').jqGrid('navGrid', '#pager', {
             edit: true,
             add: true,
             del: true,
             search: false,
             refresh: false
    });
});

Answer 1

There are many errors in your code. The most important is the usage of key: true for more as one column. One can see that you included the property in definition of two columns 'ac_n_quad' and 'ac_n_circ'. When jqGrid fill the grid it uses <table> for the body of the grid, <tr> for rows and <td> for cells on the grid. It's important to understand that jqGrid always assign some id attribute to every <tr> (for rows). HTML don't permit to have duplicates of id on one HTML page. If you use key: true for some column then jqGrid assign internal option keyIndex to the index of the column in colModel array which has key: true option. In your case I think that jqGrid will use the last column with key: true. So the values from 'ac_n_circ' column will be used as ids.

If you have duplicate values in 'ac_n_circ' column then you will have many different very strange effects (which are distinguish in different web browsers). For example if you click on one row then another row could be selected. You can have also different strange effects during editing too.

Because you use prmNames: {ac_n_quad: "id"} (it's also wrong. correct will be prmNames: {id: "ac_n_quad"}) then I can suspect that ac_n_quad is the real unique id. So you should use key: true only in ac_n_quad column and you have to remove the property from any other columns ('ac_n_circ').

Additionally you can reduce and simplify the code. Default values of properties of elements of colModel are described in the documentation (see "Default" column in the table). For example default values of width, align, editable are 150, "left" and false. You use align:'right', editable:true in all columns and you use width:70 most frequently. So you can use

cmTemplate: { align: 'right', editable: true, width:70 }

instead of cmTemplate: { align: 'center', editable: true } which you use now. It allows you to reduce colModel to

colModel: [
    {name:'ac_n_quad', width:110, key:true},
    {name:'ac_l_circ', width:65},
    {name:'ac_n_circ', width:120},
    {name:'ac_fin_g', width:60},
    {name:'ac_pot', width:55},
    {name:'ac_volt', width:60},
    {name:'ac_n_polos', width:100},
    {name:'ac_t_prot', width:100},
    {name:'ac_v_prot'},
    {name:'ac_cabo', width:60},
    {name:'ac_fd', width:55},
    {name:'ac_fp', width:55},
    {name:'ac_ctr', width:60},
    {name:'ac_pot_a'},
    {name:'ac_pot_b'},
    {name:'ac_pot_c'},
    {name:'ac_pos_1'},
    {name:'ac_pos_2'},
    {name:'ac_calc', width:65}
]

If you have index value the same as the value of name value you can skip index. In the same way if you can skip colNames if it contains only values of name property of colModel.