jQuery Grid Plugin - jqGrid - Forum: Bugs

admin on jqGrid Forum is moved

Mon, 15 Dec 2014 15:46:57 +0200

Hello All,

We have a lot of changes inside Trirand. You may need to read this post

The forum is moved to another place.. All the existing users and forum posts are moved successfully in our new side guriddo.net

In the future, please post your questions and problems in the new place.

The existing forum will stay and willÂ be in read-only mode.

Kind Regards

Tony

0xFF on Problem when using multiselect with cellEdit after upgrade to 4.7

Mon, 15 Dec 2014 11:01:02 +0200

Hello,

After upgrade from 4.6 to jqGrid 4.7, I found there is problem with multiselect option when cellEdit is enabled.

I Can't select row by checkbox clicking. Nothing happens. To select I have to click few pixels out of the checkbox picture.

Select all checkbox works fine.

OlegK on Strange behaviour after updating to jqGrid 4.7.0

Sun, 14 Dec 2014 02:16:44 +0200

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

mdp on Strange behaviour after updating to jqGrid 4.7.0

Fri, 12 Dec 2014 21:53:00 +0200

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!

OlegK on Strange behaviour after updating to jqGrid 4.7.0

Fri, 12 Dec 2014 21:06:27 +0200

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

office_rat on ajaxDelOptions is not working properly in 4.6 & 4.7

Fri, 12 Dec 2014 17:00:50 +0200

Hey there.

I've noticed ajaxDelOptions (when press "Delete" button for row) is not working properly.

Please see my js-code below:

$SchemaAttrGrid.jqGrid()[0].p.ajaxDelOptions = new Object();
Â Â Â Â Â Â Â  $SchemaAttrGrid.jqGrid()[0].p.ajaxDelOptions.beforeSend = function(event, jqXHR) {
Â Â Â Â Â Â Â Â Â Â Â  return SchemaAttributeGridBeforeEditDelete(event, jqXHR);
Â Â Â Â Â Â Â  }

And following code for "Edit" button is working properly (in same manner):

Â Â Â Â Â Â Â  
$SchemaAttrGrid.jqGrid()[0].p.ajaxRowOptions = new Object();
$SchemaAttrGrid.jqGrid()[0].p.ajaxRowOptions.beforeSend = function(event, jqXHR) {
Â Â Â Â Â Â Â Â Â Â Â  return SchemaAttributeGridBeforeEditDelete(event, jqXHR);
Â Â Â Â Â Â Â  }

ajaxDelOptions have only declaration (line #8450) and usage code (line #8592).

I think in some place inside of method delGridRow (for example #8460) should be following line:

rp_ge[$t.p.id].ajaxDelOptions = $t.p.ajaxDelOptions !== undefined ?
 class="brush-javascript syntax">$t[0].p.ajaxDelOptions : {}

mdp on Strange behaviour after updating to jqGrid 4.7.0

Fri, 12 Dec 2014 16:22:07 +0200

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.

OlegK on Strange behaviour after updating to jqGrid 4.7.0

Fri, 12 Dec 2014 08:28:36 +0200

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}

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

mdp on Strange behaviour after updating to jqGrid 4.7.0

Fri, 12 Dec 2014 03:32:15 +0200

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

mdp on Strange behaviour after updating to jqGrid 4.7.0

Thu, 11 Dec 2014 19:07:18 +0200

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

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

davgino on Resizing ColumnChooser dialog

Thu, 11 Dec 2014 15:53:49 +0200

I have nextÂ code :

$grid.jqGrid('columnChooser', {
Â Â Â Â Â Â Â msel_opts: {dividerLocation: 0.5},
Â Â Â Â Â Â Â width:550,
Â Â Â Â Â Â Â height:300, Â for ver. 4.7.0 not work
Â Â Â Â Â Â Â done : function (perm) {
Â Â Â Â Â Â Â Â Â Â if (perm) { // ok button
Â Â Â Â Â Â Â Â Â Â Â Â this.jqGrid("remapColumns", perm, true);
Â Â Â Â Â Â Â Â Â Â Â Â $grid.setGridWidth(wscreen-2, true);
Â Â Â Â Â Â Â Â Â Â Â }
Â Â Â Â Â Â Â Â Â Â else { // cancel button

Â Â Â Â Â Â Â Â }
}

height:300, Â for ver. 4.7.0 not work

$grid.setGridWidth(wscreen-2, true);Â for ver <4.7.0 work ok

but in verÂ 4.7.0Â , if scrool vertical is present Â , I Â modified with $grid.setGridWidth(wscreen+16, true);Â

OlegK on Strange behaviour after updating to jqGrid 4.7.0

Thu, 11 Dec 2014 14:24:43 +0200

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

OlegK on Resizing ColumnChooser dialog

Thu, 11 Dec 2014 14:07:23 +0200

Hi davgino,

you can use columnChooser exactly like before. The difference you will see if you resize the dialog. You will see that the elements of the dialog will be resized too.

Best regards
Oleg

mdp on Strange behaviour after updating to jqGrid 4.7.0

Thu, 11 Dec 2014 00:57:39 +0200

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

mdp on Strange behaviour after updating to jqGrid 4.7.0

Thu, 11 Dec 2014 00:44:53 +0200

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

davgino on Resizing ColumnChooser dialog

Wed, 10 Dec 2014 20:10:39 +0200

Hello Oleg,

Please explain how use new columnChooser from ver. 4.7.0

Thank you.

OlegK on Bug in addRowData Method

Wed, 10 Dec 2014 12:19:37 +0200

Hi Greg,

I created the pull requestÂ based on your bug report.

Best regards
Oleg

greg.valainis@pa-tech.com on Bug in addRowData Method

Wed, 10 Dec 2014 03:53:57 +0200

EDIT: bad at english and missing ';' after the 'sind = sind.rowIndex + addin' statement

I believe I have found a bug in the addRowData method. Â The bug occurs when using the method with pos = "after" and a subgrid exists below the row you are attempting to insert after. Â First off, when inserting 'row' the .join('') method is not used. Â Second off, the 'sind' is incrementedÂ incorrectly. Â In this case it should be incremented by two, but it is only incremented by one. Â Here is a jsFiddle link to my code:

http://jsfiddle.net/mzrLeqqe/1/

Used jsFiddle since I didn't really try to make the code formatted in this post. Â Below is a hard copy.

case 'after':
sind = $(t).jqGrid('getGridRowById', src);
if (sind) {
var addin = 1;
if ($(t.rows[sind.rowIndex + 1]).hasClass("ui-subgrid")) { $(t.rows[sind.rowIndex + 1]).after(row.join('')); addin++; }
else { $(sind).after(row.join('')); }
sind = sind.rowIndex + addin;
}
break;

Hope this helps.

I believe the version I was using version 4.6 when I discovered this, but it appeared version 4.7 did not have this fixed.

ahaha on headers and columns are messed up when colmodel is hidden: 'true' (jsfiddle included)

Sun, 07 Dec 2014 11:44:27 +0200

Thank You very much for your clarification and suggestion. Yes it was my bad.

OlegK on headers and columns are messed up when colmodel is hidden: 'true' (jsfiddle included)

Sat, 06 Dec 2014 18:56:58 +0200

Sorry, but where you get so bad code example!!!??? Please never fill the grid with respect of addRowData. The simplified code which do the same isÂ http://jsfiddle.net/OlegKi/usqgrnau/3/. The problem is that the code of the example is still buggy. It uses

hidden: 'true'

Â instead of

hidden: true

It's not the same values. So the demo is buggy and the only problem which I see is that jqGrid generate a little strange looking grid in the case of wrong input data. Nevertheless one can change the code of jqGrid a little to improve the look of results in case of usage wrong type of hidden property of colModel. One can improve the code of jqGrid by replacingÂ the lineÂ

if( ts.p.colModel[j].hidden ) {

if (ts.p.colModel[j].hidden === true) {

(like the lineÂ of formatColÂ do) and the lineÂ

if(!ts.p.colModel[i].hidden) {

toÂ

if (!ts.p.colModel[i].hidden === true) {

Best regards
Oleg

Â Â Â