jQuery Grid Plugin - jqGrid - Topic: rowpos not working correctly

nickelj on rowpos not working correctly

Sun, 05 Dec 2010 19:15:08 +0200

In case any one else runs into this, I found my fix.

It wasn't obvious to me, but you have to have the colName, colModel and the SQL return statements all return the fields in the exact same order - even if you are going to rearrange the rowpos/colpos.

For example:

colModel =

{name:'id', index:'id', width:55, sortable:true, formatter:addSpace, unformat:removeSpace, editable:true, editoptions:{readonly:true, title:'The customers number. This field is automatically assigned and is not editable.'}, formoptions:{label:"Cust ID", rowpos:1}},
 {name:'author', index:'author', width:75, align:'center', editable:true, edittype:'select', editoptions:{value:{Y:'Yes',N:'No'}, defaultValue:'N', title:'Select whether this customer is a author or not.'}, formoptions:{rowpos:2}},
 {name:'chapters', index:'chapters', width:75, align:'center', editable:true, edittype:'select', editoptions:{value:{Y:'Yes',N:'No'}, defaultValue:'N', title:'Select whether this customer sells to Chapters or not (should also be an author if this is Yes).'}, formoptions:{rowpos:3}},
 {name:'name', index:'name', width:220, searchoptions: {sopt:['cn']}, formatter:addSpace, unformat:removeSpace, editable:true, editoptions:{size:40, maxlength:40}, formoptions:{label:"Name", rowpos:4}},
 {name:'homephone', index:'homephone', width:110, searchoptions: {sopt:['cn']}, formatter:addSpace, unformat:removeSpace, editable:true, formoptions:{rowpos:12}},
 {name:'attention', index:'attention', width:130, hidden:true, editable:true, editrules:{edithidden:true, required:false}, editoptions:{size:40, maxlength:40}, formoptions:{rowpos:5}},
 {name:'address', index:'address', width:250, searchoptions: {sopt:['cn']}, search:true, hidden:false, formatter:addSpace, unformat:removeSpace, editable:true, editrules:{edithidden:true, required:true}, editoptions:{size:40, maxlength:40}, formoptions:{rowpos:6}},
 {name:'address2', index:'address2', width:130, hidden:true, editable:true, editrules:{edithidden:true, required:false}, editoptions:{size:40, maxlength:40}, formoptions:{rowpos:7}},
 {name:'city', index:'city', width:130, formatter:addSpace, unformat:removeSpace, editable:true, searchoptions: {sopt:['cn']}, formoptions:{rowpos:8}},
 {name:'prov', index:'prov_state', width:40, editable:true, hidden:true, editrules:{edithidden:true}, formoptions:{rowpos:9, elmsuffix:"  <a href='#' class='ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all' style='padding:0px;' title='Province Lookup' onmouseover='$(this).addClass("ui-state-hover");' onmouseout='$(this).removeClass("ui-state-hover");' onClick='ShowBrowse("state_browse", 200, 1230, 364, 324);'>Province Lookup</a>"}},
 {name:'country', index:'country', width:180, editable:true, hidden:true, editrules:{edithidden:true}, formoptions:{rowpos:10, elmsuffix:"  <a href='#' class='ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all' style='padding:0px;' title='Country Lookup' onmouseover='$(this).addClass("ui-state-hover");' onmouseout='$(this).removeClass("ui-state-hover");' onClick='ShowBrowse("country_browse", 200, 1230, 184, 330);'>Country Lookup</a>"}},
 {name:'postal_zip', index:'postal_zip', width:130, hidden:true, editable:true, editrules:{edithidden:true, required:false}, editoptions:{size:9, maxlength:10}, formoptions:{rowpos:11}},
 {name:'officephone', index:'officephone', width:110, hidden:true, editable:true, editrules:{edithidden:true, required:false}, editoptions:{size:20, maxlength:20}, formoptions:{rowpos:13}},
 {name:'fax', index:'fax', width:110, hidden:true, editable:true, editrules:{edithidden:true, required:false}, editoptions:{size:20, maxlength:20}, formoptions:{rowpos:14}},
 {name:'cellphone', index:'cellphone', width:110, hidden:true, editable:true, editrules:{edithidden:true, required:false}, editoptions:{size:20, maxlength:20}, formoptions:{rowpos:15}},
 {name:'email', index:'email', width:110, hidden:true, editable:true, editrules:{edithidden:true, required:false}, editoptions:{size:40, maxlength:40}, formoptions:{rowpos:16}},
 {name:'reseller_discount', index:'reseller_discount', width:110, hidden:true, editable:true, editrules:{edithidden:true, required:false}, editoptions:{size:3, maxlength:3}, formoptions:{rowpos:17}},
 {name:'author_discount', index:'author_discount', width:110, hidden:true, editable:true, editrules:{edithidden:true, required:false}, editoptions:{size:3, maxlength:3}, formoptions:{rowpos:18}},
 {name:'collect_gst', index:'collect_gst', width:75, align:'center', hidden:true, editable:true, editrules:{edithidden:true, required:false}, edittype:'select', editoptions:{value:{Y:'Yes',N:'No'}, defaultValue:'N', title:'Select whether this customer (usually a author) collects GST or not - most authors are No.'}, formoptions:{rowpos:19}},
 {name:'pay_gst', index:'pay_gst', width:75, align:'center', hidden:true, editable:true, editrules:{edithidden:true, required:false}, edittype:'select', editoptions:{value:{Y:'Yes',N:'No'}, defaultValue:'Y', title:'Select whether this customer pays GST or not.'}, formoptions:{rowpos:20}},
 {name:'pay_shipping', index:'pay_shipping', width:75, align:'center', hidden:true, editable:true, editrules:{edithidden:true, required:false}, edittype:'select', editoptions:{value:{Y:'Yes',N:'No'}, defaultValue:'Y', title:'Select whether this customer pays shipping or not.'}, formoptions:{rowpos:21}},
 {name:'notes', index:'notes', width:110, hidden:true, editable:true, edittype:"textarea", unformat:returnVal, editrules:{edithidden:true, required:false}, editoptions:{rows:"10", cols:"40"}, formoptions:{rowpos:22}}

colNames =

colNames: ['#', 'Author', 'Chapters', 'Name', 'Home Phone', 'Attention', 'Address', 'Address2', 'City', 'Prov/State', 'Country', 'Postal Code', 'Office Phone', 'Fax', 'Cell', 'EMail', 'Reseller Discount', 'Author Discount', 'Collects GST', 'Pays GST', 'Pays Shipping', 'Notes'],

And the SQL statement would look like:

SELECT id, author, chapters, C.name, homephone, attention, address, address2, city, prov_state, country, postal_zip, officephone, fax, cellphone, email, reseller_discount, author_discount, collect_gst, pay_gst, pay_shipping, notes FROM customers C ORDER BY name asc LIMIT 30 OFFSET 0

Hope this helps,

Jim

nickelj on rowpos not working correctly

Sun, 05 Dec 2010 19:00:02 +0200

No answer? No fix?

I have this same problem with several different pages - fields appear in a completely different sequence than what I specify.

Jim

nickelj on rowpos not working correctly

Fri, 26 Nov 2010 03:03:17 +0200

Hi,

If I use this colModel code:

…

url: 'index.php',
    editurl: 'index.php',
    datatype: 'json',
    mtype: 'GET',
    autoencode: true,
    colNames: ['#', 'Author', 'Name', 'Home Phone', 'Attention', 'Address', 'Address2', 'City', 'Prov/State', 'Country', 'Postal Code', 'Office Phone', 'Fax', 'Cell', 'EMail', 'Discount', 'Notes'],
    colModel:[
       {name:'id', index:'id', width:55, sortable:true, formatter:addSpace, unformat:removeSpace, editable:true,  editoptions:{readonly:true}, formoptions:{label:"Cust ID", rowpos:1}},
    {name:'author', index:'author', width:75, align:'center', editable:true, edittype:'select', editoptions:{value:{Y:'Yes',N:'No'}}, formoptions:{rowpos:2}},
    {name:'name', index:'name', width:220, searchoptions: {sopt:['cn']}, formatter:addSpace, unformat:removeSpace, editable:true, editoptions:{size:40, maxlength:40}, formoptions:{label:"Name", rowpos:3}},
    {name:'homephone', index:'homephone', width:110, searchoptions: {sopt:['cn']}, formatter:addSpace, unformat:removeSpace, editable:true, formoptions:{rowpos:11}},
    {name:'address', index:'address', width:250, searchoptions: {sopt:['cn']}, search:true, hidden:false, formatter:addSpace, unformat:removeSpace, editable:true, editrules:{edithidden:true, required:true}, editoptions:{size:40, maxlength:40}, formoptions:{rowpos:5}},
    {name:'address2', index:'address2', width:130, hidden:true, editable:true, editrules:{edithidden:true, required:false}, editoptions:{size:40, maxlength:40}, formoptions:{rowpos:6}},
    {name:'attention', index:'attention', width:130, hidden:true, editable:true, editrules:{edithidden:true, required:false}, editoptions:{size:40, maxlength:40}, formoptions:{rowpos:4}},
    {name:'city', index:'city', width:130, formatter:addSpace, unformat:removeSpace, editable:true, searchoptions: {sopt:['cn']}, formoptions:{rowpos:7}},    
    {name:'prov', index:'prov_state', width:40, editable:true, hidden:true, editrules:{edithidden:true}, formoptions:{rowpos:8, elmsuffix:"&nbsp;&nbsp;<font size='0px'><a href='#' class='ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all' style='padding:0px;' title='Province Lookup' onmouseover='$(this).addClass("ui-state-hover");' onmouseout='$(this).removeClass("ui-state-hover");' onClick='ShowBrowse("state_browse", 200, 1230, 362, 323);'><span class='ui-button-icon-primary ui-icon ui-icon-newwin'></span><span class='ui-button-text'>Province Lookup</span></a></font>"}},
    {name:'country', index:'country', width:180, editable:true, hidden:true, editrules:{edithidden:true}, formoptions:{rowpos:9, elmsuffix:"&nbsp;&nbsp;<font size='0px'><a href='#' class='ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all' style='padding:0px;' title='Country Lookup' onmouseover='$(this).addClass("ui-state-hover");' onmouseout='$(this).removeClass("ui-state-hover");' onClick='ShowBrowse("state_browse", 200, 1230, 372, 330);'><span class='ui-button-icon-primary ui-icon ui-icon-newwin'></span><span class='ui-button-text'>Country Lookup</span></a></font>"}},
    {name:'postal_zip', index:'postal_zip', width:130, hidden:true, editable:true, editrules:{edithidden:true, required:false}, editoptions:{size:9, maxlength:10}, formoptions:{rowpos:10}},
    {name:'officephone', index:'officephone', width:110, hidden:true, editable:true, editrules:{edithidden:true, required:false}, editoptions:{size:20, maxlength:20}, formoptions:{rowpos:12}},
    {name:'fax', index:'fax', width:110, hidden:true, editable:true, editrules:{edithidden:true, required:false}, editoptions:{size:20, maxlength:20}, formoptions:{rowpos:13}},
    {name:'cellphone', index:'cellphone', width:110, hidden:true, editable:true, editrules:{edithidden:true, required:false}, editoptions:{size:20, maxlength:20}, formoptions:{rowpos:14}},
    {name:'email', index:'email', width:110, hidden:true, editable:true, editrules:{edithidden:true, required:false}, editoptions:{size:40, maxlength:40}, formoptions:{rowpos:15}},
    {name:'default_discount', index:'default_discount', width:110, hidden:true, editable:true, editrules:{edithidden:true, required:false}, editoptions:{size:3, maxlength:3}, formoptions:{rowpos:16}},
    {name:'notes', index:'notes', width:110, hidden:true, editable:true, edittype:"textarea",unformat:returnVal, editrules:{edithidden:true, required:false}, editoptions:{rows:"10", cols:"40"}, formoptions:{rowpos:17}}

    ],
    pager: '#customer_livegrid_pager',
    postData: {gridname:'customer_livegrid'},
    height: 440,
    rowNum: 30,
    scroll: 1,
    altRows: true,
...

I expected to see the form with the fields in this order:

Cust ID,

Author,

Name,

Attention,

Address,

Address2,

City,

Prov,

etc..

However, the edit form appears with the fields out of the correct sequence....like this:

And if I submit the data, I get this in the _POST vars:

    _POST VARS
    id =>  3
    author =>  Y
    name =>  Name line
    attention =>  Address2 line
    address =>  Attention line
    address2 =>  Address line
    city =>  City Line
    prov =>  Prov
    country =>  Country
    postal_zip =>  Postal
    homephone =>  Home Phone
    officephone =>  Office Phone
    fax =>  Fax
    cellphone =>  Cell phone
    email =>  email address
    default_discount =>  20
    notes =>  These are some notes
    oper =>  edit
    pagename =>  customer_edit

As you can see, the data is not correlated with the correct field.

What am I doing wrong....or is this a bug in the JQGrid?

Thanks,

Jim