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

So when you select any rows other then the first or fourth they do not become editable in the grid? — Mark, Feb 22 '13 at 15:15
No. When I select any row just the first become editable in the grid. — mailazs, Feb 22 '13 at 18:27
Do you see your id's changing as you select different rows? your Id in your onSelectRow should be the rowId of the selected row. — Mark, Feb 22 '13 at 19:21
Thanks @Mark I saw what I was doing wrong... I didn't have an id to control the rows. The id that I defined before has more than one value, so it's because of this that it was not working... Thanks for your help :D Best Regards :) — mailazs, Feb 25 '13 at 12:03

score 2 · Accepted Answer · answered Feb 22 '13 at 20:36

2

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.

answered Feb 22 '13 at 20:36

Oleg

220,925
34
403
798

Thank you so much @Oleg ! I realized this on the weekend, I was thinking and I understood one of the things that I did wrong. I don't have a "unique key", like you said I have 'ac_n_circ' and this have duplicate values, so I think I have to add one column in my database to be the index, because I don't have something that would be a index. Is correct to do this? I'm really thankful! :) Best Regards! :) – mailazs Feb 25 '13 at 12:04
@mzs_newbie: You are welcome! Typically one have column with primary id in every column of the database. For example one can use `id int PRIMARY KEY IDENTITY` as the definition of the column (or `id int NOT NULL AUTO_INCREMENT` depend on which database you use). In any way if the data which you use for filling the grid have *no native id* you should just remove *key: true* from all column. In the case jqGrid will use 1, 2, 3, ... value as rowids. – Oleg Feb 25 '13 at 12:37
@mzs_newbie: You are welcome! Sorry, but I didn't understood your example with squares and circuits. It can be **only one** primary key in the table, but you can use *composite* key which consist from the values of more as one columns. In the case you can for example add `id` attribute to the row of XML data which you generate on the server the value can be for example concatenation of the values from `'ac_n_quad'`, `'ac_n_circ'` and some separator like `'_'` between. If will inform jqGrid to use unique value constructed from your data. – Oleg Feb 25 '13 at 13:55
Hummm thank you so much again! :) I understood now! I'm using postgres. My problem is that I use "more than one column" like "primary key" I don't know if I'm explaining right to you. For example, I have number of squares and number of circuits... One square have one or more circuits. So I need to list the table for number of circuits and after for number of circuits... like that: number of squares[1, 1, 1, 1, 2, 2] number of circuits [1, 2, 3, 4, 1, 2] (look at this like a table :). So I created a index on database, because I didn't know how to proceed when I have something like this. – mailazs Feb 25 '13 at 13:55
Yes! I think is this... composite key. I'm sorry to bother you but how can I do that? – mailazs Feb 25 '13 at 13:59
@mzs_newbie: How looks the XML data which you returns from the server? You need just set **attribute** with the name `id` on the row of data. Alternatively you can add `someCompositeValue` element to the row and use `xmlReader: {id: "mykey"}`. See [the documentation](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#xml_data). You should remove all `key: true` from `colModel` in the case. – Oleg Feb 25 '13 at 14:04
Huuum ok, now I understood. Something like this: while($row = pg_fetch_array($result)) { $s .= ""; ... } Right? – mailazs Feb 25 '13 at 14:17
@mzs_newbie: I don't use PHP, but I suppose that the code is correct. – Oleg Feb 25 '13 at 14:37
@mzs_newbie: You can verify the results if you examine `id` attribute of `` elemens of the grid using Firebug or Developer Tools of IE (press F12) or Google Chrome. – Oleg Feb 25 '13 at 14:40

Inline editing row

1 Answers1