Guriddo » Topic: Strange behaviour after updating to jqGrid 4.7.0

Strange behaviour after updating to jqGrid 4.7.0

Guriddo
Strange behaviour after updating to jqGrid 4.7.0

This topic has 9 replies, 2 voices, and was last updated 9 years, 9 months ago by OlegK.

Creator

Topic
December 12, 2014 at 2:08 pm #103667

mdp
Participant

After updating from v4.4.4 to v4.7.0 I noticed some things aren’t working as before:

1) After saving in form edit, the grid displays the id’s of the combos instead of the text.

2) If I set id in prmNames,Â when saving in edit form the row number is set in postdata instead of the actual value.

Â Here’s an example of my col model definition:

Â Â prmNames: {id: “idPer”, search:null, nd : null, page: null, rows: null, sort : null, order : null},Â Â
Â Â colNames:[‘idPer’, ‘person’, ‘idCity’, ‘age’, ’employee’, ’employee 2′, ‘birth date’, ‘idGroup’, ‘Desc’,’Obs’],Â Â
Â Â colModel:[
Â Â Â {name:’idPer’,index:’idPer’, hidden: true, key: true, width:55, editable:true, editrules:{edithidden:false}, sorttype:’int’},
Â Â Â {name:’person,index:’person’, editable:true, editoptions:{size:39}, width:190, sorttype:’text’},
Â Â Â {name:’idCity’,index:’idCity’, hidden: true},
Â Â Â {name:’age’,index:’age’, editable:true, edittype:’select’,
Â Â Â Â editoptions:{Â Â
Â Â Â Â Â dataUrl:”myUrl”,
Â Â Â Â Â buildSelect: myFunction)
Â Â Â Â Â },Â Â Â Â Â Â Â Â Â Â Â Â
Â Â Â Â Â width:90, sorttype:’text’},Â Â Â Â
Â Â Â {name:’employee’,index:’employee’, editable:true, edittype:’select’, formatter:eFmatter, unformat:eUnFmatter,Â
Â Â Â Â Â width:190, sorttype:’text’},
Â Â Â {name:”employee2′,index:”employee2′, editable:true, edittype:’select’, formatter:eFmatter, unformat:eUnFmatter,Â
Â Â Â Â Â width:190, sorttype:’text’},Â Â Â Â Â Â
Â Â Â {name:’birth’,index:’birth’, width:90, sorttype:’date’, formatter:’date’, editable:true},
Â Â Â {name:’idGroup’,index:’idGroup’, hidden: true},
Â Â Â {name:’desc’,index:’desc’, width:190, formatter:dFmatter, unformat: dFmatter,editable:true, edittype:’select’,
Â Â Â Â Â editoptions:{
Â Â Â Â Â dataUrl:”myurl2″,
Â Â Â Â Â buildSelect: myfunction2)
Â Â Â Â Â },Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
Â Â Â Â Â sorttype:’text’},
Â Â Â {name:’obs’,index:’obs’, width:190, editable:true, sorttype:’text’, edittype:’textarea’, editoptions:{rows:2, cols:40}}]

Â

Did I missed something with the new releases?

Thanks in advance
Creator

Topic

Viewing 9 replies - 1 through 9 (of 9 total)

Author

Replies

December 12, 2014 at 2:10 pm #103669

mdp

Participant

With v4.6 problem #2 doesn’t occur.

By the way, I also had to change the date format in grid.locale-es, since it’s displaying dates as d-m-Y instead of d/m/Y

December 12, 2014 at 2:10 pm #103670

OlegK

Participant

To fix the problem one have to debug the code. So one needs to have the working demo which uses uncompressed version of jqGridÂ jquery.jqGrid.src.js (instead ofÂ jquery.jqGrid.min.js). If one can see that wrong information will be posted to the server that one don’t need and server part to debug such demo. So please prepare always a working demo if you report the bug.

About the first issue which you report all sounds very strange. You write about “the id’s of the combos instead of the text“. So you use probably select with options having different value and the text. It seems me wrong if you useÂ edittype:’select’ and not usesÂ formatter:’select’. One usesÂ different values and texts in select options only in the case that one fill the data with ids (values), but one want to display the texts for the user.Â formatter:’select’ do that. The only disadvantage of the approach is that the formatter have to know the mapping between ids and the texts during filling of the grid. One can’t make an additional asynchronous call to the server. So one usesÂ formatter:’select’ withÂ editoptions.valueÂ instead of usage ofÂ editoptions.dataUrl. If one need still build dynamic values ofÂ editoptions.value one can set it inside of beforeProcessing callback. See the answerÂ for more details.

About the problem withÂ the date format you should try to useÂ reformatAfterEdit: true option of formatter: “date”.

Best regards
Oleg

December 12, 2014 at 2:11 pm #103671

mdp

Participant

Thanks for your response. I’ve never used jsfiddle and I don’t know how to simulate ajax requests (apparently only POST is supported and I’m using GET). Anyway here’s a small demo:

HTML Body:

Â Â Â <div>
Â Â Â Â Â Â <table id=”sampleGrid”><tr><td></td></tr></table>
Â Â Â Â Â Â <div id=”pagerSampleGrid”></div>Â Â Â
Â Â Â </div>

Javascript:

Â Â Â //<![CDATA[
Â Â Â Â Â Â Â $(document).ready(function () {Â Â Â Â Â Â Â Â Â Â Â
Â Â Â Â Â Â Â Â Â Â Â setjqGridSettings();
Â Â Â Â Â Â Â Â Â Â Â setGridRequirentes();Â Â Â Â Â Â Â Â Â Â Â
Â Â Â Â Â Â Â });

Â Â Â
function setjqGridSettings()
{Â Â Â
Â Â Â $.extend($.jgrid.defaults,
Â Â Â {
Â Â Â Â Â Â mtype:”POST”,Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â
Â Â Â Â Â Â datatype: ‘json’,
Â Â Â Â Â Â ajaxGridOptions: { contentType: “application/json; charset=utf-8” },Â Â Â
Â Â Â Â Â Â viewrecords: true,
Â Â Â Â Â Â loadonce: true,
Â Â Â Â Â Â gridview: true,
Â Â Â Â Â Â scrollOffset: 0,
Â Â Â Â Â Â autowidth: true,
Â Â Â Â Â Â ignoreCase: true,
Â Â Â Â Â Â jsonReader : {
Â Â Â Â Â Â Â Â Â Â root: “d.rows”,
Â Â Â Â Â Â Â Â Â Â page: “d.page”,
Â Â Â Â Â Â Â Â Â Â total: “d.total”,
Â Â Â Â Â Â Â Â Â Â records: “d.records”,
Â Â Â Â Â Â Â Â Â Â cell: “”},
Â Â Â Â Â Â ajaxSelectOptions: { type: “GET”, contentType: ‘application/json; charset=utf-8’ }
Â Â Â });

Â Â Â $.extend($.jgrid.edit,
Â Â Â {
Â Â Â Â Â Â ajaxEditOptions: { contentType: “application/json; charset=utf-8″ },
Â Â Â Â Â Â closeAfterEdit: true,
Â Â Â Â Â Â closeAfterAdd: true,
Â Â Â Â Â Â closeOnEscape: false,
Â Â Â Â Â Â reloadAfterSubmit: false,
Â Â Â Â Â Â jqModal: false
Â Â Â });Â Â Â
}Â Â Â
Â Â Â
function setGridRequirentes()
{Â Â Â
Â Â Â var modSettings =
Â Â Â {
Â Â Â Â Â Â width: 440,
Â Â Â Â Â Â url: ‘myUrl.aspx’,
Â Â Â Â Â Â serializeEditData: function(postData) {Â Â Â Â Â Â Â Â Â
Â Â Â Â Â Â Â Â Â console.log(postData)
Â Â Â Â Â Â }Â Â Â Â Â Â
Â Â Â };

Â Â Â var sampleData = [
Â Â Â Â Â Â Â Â Â Â Â {idPer:”13570″, person:”some name 1″,idCity:”Washington”},
Â Â Â Â Â Â Â Â Â Â Â {idPer:”34233″, person:”some name 2″,idCity:”Australia”},
Â Â Â Â Â Â Â ];Â Â Â Â Â Â Â Â Â Â
Â Â Â Â Â Â Â Â Â
Â Â Â $(“#sampleGrid”).jqGrid({Â Â Â Â Â Â Â
Â Â Â Â Â Â Â //datatype:’local’,
Â Â Â Â Â Â Â //data: sampleData,
Â Â Â Â Â Â url: “MyPage.aspx/getPeople”,Â Â Â
Â Â Â Â Â Â mtype: “GET”,Â Â Â Â Â Â Â
Â Â Â Â Â Â prmNames: {id: “idPer”, search:null, nd : null, page: null, rows: null, sort : null, order : null}, Â
Â Â Â Â Â Â colNames:[‘idPer’, ‘person’, ‘idCity’], Â
Â Â Â Â Â Â colModel:[
Â Â Â Â Â Â Â Â Â {name:’idPer’,index:’idPer’, hidden: true, key: true, width:55, editable:true, editrules:{edithidden:false}, sorttype:’int’},
Â Â Â Â Â Â Â Â Â {name:’person’,index:’person’, editable:true, editoptions:{size:39}, width:190, sorttype:’text’},
Â Â Â Â Â Â Â Â Â {name:’idCity’,index:’idCity’, editable:true, edittype:’select’,
Â Â Â Â Â Â Â Â Â Â Â Â editoptions:{ value:”1:London;2:Washington;3:Australia”},width:90, sorttype:’text’}],
Â Â Â Â Â Â rowNum:5,
Â Â Â Â Â Â rowList:[5,10,15,20],
Â Â Â Â Â Â pager: ‘#pagerSampleGrid’,Â Â Â
Â Â Â Â Â Â caption:”Sample Grid”Â Â Â Â Â Â
Â Â Â });Â Â Â
Â
Â Â Â $(“#sampleGrid”).jqGrid(‘navGrid’,’#pagerSampleGrid’,{edit:true,add:true,del:false,search:false,refresh:false},modSettings);
}
Â Â Â //]]>

The response from my web serviceÂ getPeople is (I’m using the format suggested in jqGrid demos “Data Mapping”->”Data Optimization” to reduce the size of the response):

{"d":{"page":1,"total":1,"records":100,"rows":[["13570","Some name 1","Australia"],["34233","Some name

1	{"d":{"page":1,"total":1,"records":100,"rows":[["13570","Some name 1","Australia"],["34233","Some name

2","Washington"]]}}


In serializeEditData I only get the number of the row instead of the "idPer" value as can be seen in the console.

 Also note that after saving (gives an error since the webservice is not found) for example Australia is replaced by 3.
Thanks for your help

December 12, 2014 at 2:11 pm #103672

mdp

Participant

Here’s the jsfiddle:

http://jsfiddle.net/d26hzhu6/

The only thing that is missing is theÂ AjaxÂ response. I found the following example, but I don’t know how to use it to replace the Ajax call in jqgrid:

new Request.JSONP({
Â Â Â url: ‘http://jsfiddle.net/echo/jsonp/’,
Â Â Â data: {
Â Â Â Â Â Â Â text: ‘some text’,
Â Â Â Â Â Â Â par1: ‘another text’
Â Â Â },
Â Â Â onSuccess: function(response) {
Â Â Â Â Â Â Â show_response(response, $(‘post’));
Â Â Â }
}).send();

December 12, 2014 at 2:12 pm #103673

OlegK

Participant

If you have an interest to prepare the jsfiddle demo which uses Ajax you can useÂ http://jsfiddle.net/OlegKi/ntfw57zm/ as an example.

I can repeat that I think that you use wrong value editoptions:{ value:”1:London;2:Washington;3:Australia”}. You useÂ “Australia” and “Washington”Â in the input data. So you don’t use ids in the input data. It means thatÂ editoptions:{ value:”London:London;Washington:Washington;Australia:Australia”} will be correct.

If you do want to use ids in theÂ idCity column you should useÂ [[“13570″,”Some name 1″,”3”],[“34233″,”Some name2″,”Washington”]] and

colNames: ['person', 'idCity'],
colModel: [
    {name:'person', editoptions:{size:39}, width:190},
    {name:'idCity', edittype:'select', formatter:'select', width:90,
        editoptions:{ value:"1:London;2:Washington;3:Australia"}}
],
cmTemplate: {editable:true}

colNames: ['person', 'idCity'],

colModel: [

{name:'person', editoptions:{size:39}, width:190},

{name:'idCity', edittype:'select', formatter:'select', width:90,

editoptions:{ value:"1:London;2:Washington;3:Australia"}}

cmTemplate: {editable:true}

In the way the data will hold only ids inÂ idCity column but display texts. formatter:’select’ do the mapping. Because you useÂ prmNames: {id: “idPer”, …} no hiddenÂ idPer column is required.

Best regards
Oleg

December 15, 2014 at 11:27 am #103783

mdp

Participant

Here’s the jsfiddle for the issue with prmNames (I removed the hidden:true property for column idPer. In edit form the value is displayed correctly, after saving is replaced by the number of the row):

http://jsfiddle.net/d26hzhu6/2/

Notice that if you remove the property id: “idPer” in prmNames this problem is fixed.

Also the same code works correctly in v4.4.4, as you can see in the fiddler used below.

Regarding the issue with the combos:

I was using version 4.4.4. I know it may sound strange, but it was working as I previously explained without formatter:’select’:

I retrieve from the DB the text “Australia” for the field “idCity”. When opening the edit form, jqgrid will match the text to positionate the combo. After successfull submit (which post idCity=3) the text “Australia” would appear in the grid instead of the value 3.

Here’s the jsfiddle using v.4.4.4 exposing the behaviour I mentioned above:

http://jsfiddle.net/Lgy7ae3h/1/

After comparing the code in formedit I found that in version 4.4.5 some code was removed that provided that functionality (all related to a var name “expost”). I also found the commit of that change:

https://github.com/tonytomov/jqGrid/commit/edb5073b6bd617878221674d201cba060489241c

Now, how can I update my code to make it work as before but using the new version?. I have more than 20 grids and I would try to avoid to change the stored procedures.

December 15, 2014 at 11:28 am #103785

OlegK

Participant

Hi,

usage of demos simplify all. The reason of the problem with sending wrong idCity – the rowids of the grid will be wrong assigned. It’s a bug in jqGrid. The bug exists in combination of the usage of arrays of strings as the input value of row like [“13570″,”Some name 1″,”Australia”] and the usage of key:true property in colModel. I will post later to github my suggestion how to fix the problem. As the workaround I suggest you to add jsonReader : {id: 0} option and remove key:true property from the first column definition.

See http://jsfiddle.net/OlegKi/d26hzhu6/3/

About the problem with the requirement to post idCity=3 instead of the text “Australia” I wrote you two times before. You used wrong configuration which worked in old versions of jqGrid, but the but are fixed some years ago (probably in the version 4.4.5). So you should decide whether you want that jqGrid hold values like 1,2,3 in idCity column (and displays still the texts “London”, “Washington”, “Australia”) or you use the texts “London”, “Washington”, “Australia” in the data. In the first case you the communication with the server will be in ids 1,2,3, but the values have to be used in both input of grid and the output. Exactly the example I used in the modified demo. Alternatively you can fill jqGrid with the data like “London”, “Washington”, “Australia”, but exactly the same data will be send to the server during editing.

You still can use serializeEditData to remap any standard values like “London”, “Washington”, “Australia” to 1,2,3 or on the contrary, but I don’t recommend you to do so because I personally find such kind on communication transfer non-consequent.

Best regards
Oleg

December 15, 2014 at 11:29 am #103787

mdp

Participant

I’ll use the formatter: “select” and change the stored procedures to return the ids. I also will use the workaround till the bug is fixed.

By the way, by inspecting your code I found I’m setting some properties that aren’t needed as sorttype:text and index.

Thanks for your help Oleg!

December 15, 2014 at 11:30 am #103789

OlegK

Participant

Hello Tony,

I posted the pull request which contains the changes in addJSONData and normalizeData required to fix problem with the usage key:true in combination with the reader (jsonReader or localReader) having repeatitems:true.

Here is the modified version of jquery.jqGrid.src.js.

The problem come after you changed old keyIndex option to keyName. It was done to fix problem with non-updated keyIndex option after resorting columns in jqGrid (by usage columnChooser or drag and drop of column headers in case of the usage sortable:true).

I hope that I tested all possible cases.

Best regards
Oleg