jQuery Grid Plugin – jqGrid

I find bug in modal window.
See image http://pic.ipicture.ru/uploads/090706/GdnB44zkQk.jpg.
If search form modaled too and after nothing work.

to tony
thanx! navSeparatorAdd works perfectly!.. and will wait for solution..

to pro85
проверь, подгружаешь ли css-ку [jqgrid-folder]/css/jquery.searchFilter.css?

@Patrick
A code sample for comment #39.

$(function() {
var colModel = [{“name”:”Value1Description”,”label”:”Description”,”width”:100,”align”:”left”,”sortable”:false,”resizable”:false},
{“name”:”EffectiveFromDate”,”label”:”Start Date” ,”width”:100,”align”:”left”,”sortable”:false,”resizable”:false,”formatter”:”date”,”formatoptions”:{“srcformat”:”Y-m-dTH:i:s”,”newformat”:”n/j/Y”}},
{“name”:”EffectiveToDate” ,”label”:”End Date” ,”width”:100,”align”:”left”,”sortable”:false,”resizable”:false,”formatter”:”date”,”formatoptions”:{“srcformat”:”Y-m-dTH:i:s”,”newformat”:”n/j/Y”}}];

var options = {
datatype: ‘clientSide’,
loadui: ‘disable’,
colModel: colModel,
width: 300,
height: 300
};

$(“#grid-1”).jqGrid(options);

// Add rows, formatted will be applied
$(“#grid-1”).addRowData(1, {“Value1Description”:”XXXYYYZZZ”,”EffectiveFromDate”:”1980-01-01T00:00:00.0000000″,”EffectiveToDate”:”2099-12-31T00:00:00.0000000″});
$(“#grid-1”).addRowData(2, {“Value1Description”:”AAABBBCCC”,”EffectiveFromDate”:”1980-01-01T00:00:00.0000000″,”EffectiveToDate”:”2099-12-31T00:00:00.0000000″});

// Update Row #2, updating not applied…
$(“#grid-1”).setRowData(2, {“Value1Description”:”DDDEEEFFF”,”EffectiveFromDate”:”1990-01-01T00:00:00.0000000″,”EffectiveToDate”:”2000-12-31T00:00:00.0000000″});
});

To DyaGa
Спасибо за подсказку. Проблема решена.

grid.tbltogrid.js
line 37,38 change to this
name: $(this).attr(‘id’)||$(this).html(),
index: $(this).attr(‘id’)||$(this).html(),

After u can get sellrow params using id.
No more problem with column name and id.

hey tony!

u’re doing an amazing stuff!
are you releasing a new beta soon?
or should we just work on edge in github?

best, peter

Hi Tony,

I have the following error if I define the afterSubmit event for the editGridRow method.

Error: ret is undefined
Source file: /js/grid.formedit.js
Row: 752

By the way, is it possible to prevent modal edit window from closing if one clicks on the opacity layer? I have defined modal and dnd as true and I link jqModal.js as well.

Thanks in advance,

Regards

Pavel

In my project i need option to load oll data without separate by page.
I change in grid.base.js:
(line 1074) if(ir>rn) break;
by
if ((ts.p.rowNum!=-1)&&(ir>rn)) break;
Now if in grid options set rows=-1 will be loaded all data.

Hi Tony. Sorry for late response. I have simulated the error and here are the links where you can see it.
1) http://dev.topinfo.cz/gridtest/?page=grid34
Search works fine.

2) http://dev.topinfo.cz/gridtest/?page=grid35
Search does not work, e.g. the ‘_search’ parameter in the request is always set to false even though one clicks on the search button.
Hope this helped. Let me know if you want more details.
Tomas

@DyaGa
I do not see something wrong. Here is my example that work ok – if I understand right what you try to do.

@levtomas
Thanks – found at end the bug. Fixed in GitHub

@Pavel
afterSubmit should return array something like [true,””,””]- see docs

@pro85
Thanks – added in GitHub

Regards
Tony

@Patrick
Set in formatoptions for the date
reformatAfterEdit:true and all will be ok.

Regards
Tony

@DyaGa
here is the link to what I have done
http://www.trirand.com/jqgrid35/multibug.html

Everybody,

I’ve made modifications to some functionalities that i believe would make them a little better.

1. InlineEdit and FormEdit
They now send the update information in the JSON stringifed variable updRecord={“record”:{“fieldindex1″:”fieldvalue1”,…}, “oper”:”edit/add”}

file modified: grid.inlinedit.js; grid.formedit.js

2. filterToolbar
I now sends the data in a JSON stringifed variable tfilters = {“fieldindex1″:”fieldvalue1”,….}, the same concept as the new search feature.
The boolean search variable is still posted but useless because if tfilters and/or filters exist than it’s a search.

file modified: grid.custom.js

3.Custom Event handler
In some situation, when an event is raised, for which i have defined a function, I can’t find (easily) which grid it references.
To overcome this, I made a simple modification that would probably need to be applied to every custom event handler (I hope these are the right terms :-)).

Let me explain: I added a custom “Filter” button to the navGrid using the navButtonAdd function.
The only parameters i could received was p (not the one with all the grid information but only basic event information)
I could have use $().parents to find my way back to the grid but…

In order to make the solution as simple as possible, I’ve added the gridId to the variable p and made sure it was sent to my p.onClickButton(p) function.
I guess that my point is: whenever a custom event handler is raised, it needs, at least the gridId.

file modified: grid.formedit.js

These are not major changes that would absolutly need to wait for version 3.6.
Well, i don’t think so, but Tony is the judge of that.

Concerning the last point(3), if anybody has a better way of getting the information, i would be glad to know.

Thanks again Tony and all the others that have helped, for the excellent work!!!

Concerning point 3 of my last post above, i also made the same modification to the onClickSubmit event handler also in grid.formedit.js.

For those of you having problems when you only have one row, and the scrollbars appear on Internet Explorer, here is a quick hack… just add it on some function (like updatepager() on grid.base.js

if ($.browser.msie) {
$a = $(‘.ui-jqgrid .ui-jqgrid-bdiv’);
$a.css(‘padding’, ‘0 0 15px 0’);
if(ts.p.height == ‘100%’){
$a.css(‘overflow-y’, ‘hidden’);
}
}

Is there a Method to change the width of a single column?

Ok, i’ve now made all the changes through GitHub and sent a pull request.

Should i send a pull request to every users listed?

Didn’t configure my user name properly in my commit and i have put all the comments in one place, won’t happen again. You can also ignore my previous posts if desired.

tony
about example… Now, please, add next code (i am trying to show you my situation):

.navGrid([...])
.navButtonAdd("#mpager", {caption : "",title : "Browse/Edit mode",buttonicon: "ui-icon-circle-zoomin",
onClickButton : function(){
var grid=$("#celltbl"),ms=grid.getGridParam('multiselect');;
var btn=$('#mpager_pager_left td.ui-pg-button:has(span.ui-icon-circle-zoomin)');
if(ms){
btn.addClass('ui-state-active');
grid.setGridParam({multiselect: false}).hideCol('cb');
}else{
btn.removeClass('ui-state-active');
grid.setGridParam({multiselect: true}).showCol('cb');
}
}});


after this, try to click button (dinamically changing multiselect mode from true to false) and in mode multiselect=false refresh table data (or retrieve other json data… next page etc.)…

Hi Tony,

I just want to report that autowidth doesn’t work correctly for JqueryUI tab widget (ajax)

TAB A
TAB B

The first default TAB A render jqgrid with autowidth correctly.
But when switch to TAB B, jqgrid in loadgridB.htm doesn’t render correctly. Also when switch back to TAB A, jqgrid in loadgridA.htm doesn’t render correctly. (= They don’t occupy the full innerwidth of their parents)

I tried to overcome the problem using tab onshow event to setGridWidth on opening jqgrid to its tab’s innerwidth, but the horizontal scroll bar appears above the navigator bar, and the empty rectangle area above the vertical scroll bar won’t appear.

Hi Tony!
first of all: great plugin, great job!

I think I found a bug in treegrid.
If a node is deleted only the first level child-nodes are removed.

Example:
– node 1
– node 1.1
– node 1.1.1
– node 1.2

remove “node 1” -> result:
– node 1.1.1

so only the child-nodes “node 1.1” and “node 1.2” are removed from the grid, all others are left!

Regards,
orsox

@orsox

Hi Tony!

In grid.treegrid.js I changed line 422
from
$($t).delRowData(dr[i].id);
to
$($t).delTreeNode(dr[i].id);

and now it works! all child-nodes are removed now!

Regards,
orsox

I know now why autowidth doesn’t work..

in grid.base.js line 1620 – 1623
——————————–
I add alert(pw).. it shows “0” if the tab isn’t shown yet.
if(ts.p.autowidth===true) {
var pw = $(eg).innerWidth();
ts.p.width = pw > 0? pw: ‘nw’;
alert(pw)
}
I overcome this by delay a call to jqGrid using setTimeout, so the tab is “really” visible before the grid is enabled with autowidth.

Hi Tony, great work!

I Have a Problem with treeGrid and inline edit

Each Time i call restoreRow, another icon is added to the ExpandColum of the tree

I think the problem was caused by:

1) editRow save (in savedRow) all html of the “td” element:

2.9

2) setRowData restore html inside “span” with html saved, and so add another icon

Regards
Marco

Im trying to edit Sub grid – first row is editing all right but in the second (and more) I’m getting error:

obj.p.colModel[i] is undefined
nm = obj.p.colModel[i].name.replace(‘.’,”\\.”);;

i understand it’s because there is no such obj.p.colModel for [i] but why each function sees non existing [i] ?

@Basdub
Thank you very much for this. As we speak each other I think that this should be done for 3.6 release. We should make as standard other thinks like url when data is posted – I mean we should have in the url – ‘clientArray’, valid url and custom function.
Anyway your work is very good I will implement it in the next release. From this point all my work for jqGrid is concerned in documentation. My plans are to use DokuWiki so that everybody can participate on this.
Thanks again for all your work.

@DyaGa
Right now I understand what you mean. In the current implementation this is not possible. Also I have make changes so that multiboxonly parameter have the same behavior as Yahoo mail. Download the last update from GitHub and do the following:

..jqGrid({
multiselect:true,
multiboxonly: true, // or false for the initial grid
…
}).navGrid([…])
.navButtonAdd(“#mpager”, {caption : “”,title : “Browse/Edit mode”,buttonicon: “ui-icon-circle-zoomin”,
onClickButton : function(){
var grid=$(“#celltbl”),ms=grid.getGridParam(‘multiselect’);
var btn=$(‘#mpager_pager_left td.ui-pg-button:has(span.ui-icon-circle-zoomin)’);
if(ms){
btn.addClass(‘ui-state-active’);
grid.setGridParam({multiboxonly: true}).hideCol(‘cb’);
}else{
btn.removeClass(‘ui-state-active’);
grid.setGridParam({multiboxonly: false}).showCol(‘cb’);
}
}});

Enjoy

Best Regards
Tony

@Vorapoap
This is not a bug. As of jQuery 1.3.2 the width of the hidden element i 0 so you will never get chance to use autowidth on hidden element. Look at forums for this problem.

@orsox
Thanks will test this. Seems to be a bug.

@marco.laporta
Refer to the documentation – what limitations we have for the tree grid

@schabol
Please be a more specific. What you use – inline edit, cell edit or form edit, publish the code, what browser and etc – if you just see editing does not work in subgrid you will never get chance for answer.

Best Regards
Tony

I use form edit, that bug exists on browsers Firefox, Google Chrome, Opera.. Thats all i tested..

Full code i use:
[code]
jQuery(“#tabela_szablony”).jqGrid({
url: ‘{/literal}{$adres_pelny}{literal}formularze/xml/szablony.php’,
colNames:[“ID”, “Typ szablonu”, “Opis szablonu”, “Lokalizacja szablonu”, “Nazwa zmiennej szablonu”],
colModel:[
{name:’ID_szablonu’,index:’ID_szablonu’, width:30, hidden:true, key:true},
{name:’sz_typ’,index:’sz_typ’, width:180, editable: true, edittype:”select”, formatter:”select”, editoptions:{value:”{/literal}{foreach from=$config.kolumny item=’kolumna’ key=”kolumna_key” name=”kolumny_2″}{$kolumna_key}:{$kolumna.opis|addslashes}{if !$smarty.foreach.kolumny_2.last};{/if}{/foreach}{literal}”}, formoptions:{ rowpos:1, label: “Wybierz rodzaj szablonu”, elmprefix:”(*)”},editrules:{required:true}},
{name:’sz_opis’,index:’sz_opis’, editable: true, width:230, align:”left”, editable: true, formoptions:{rowpos:2, label: “Opisz kolumne (pomoże w późniejszej konfiruracji)”, elmprefix:false}, editrules:{required:false}},
{name:’sz_lokalizacja’,index:’sz_lokalizacja’, editable: true, width:250, align:”left”, formoptions:{ rowpos:3, label: “Adres szablonu (w katalogu ‘szablon/strony/’)”, elmprefix:”(*)”},editrules:{required:true}},
{name:’sz_nazwa_zmiennej’,index:’sz_nazwa_zmiennej’, editable: true, width:180, align:”left”, formoptions:{ rowpos:4, label: “Wprowadz nazwÄ™ zmiennej szablonu”, elmprefix:false}, editrules:{required:false}}
],
height: ‘auto’,
autowidth: true,
//imgpath: “{/literal}{$adres_pelny}{literal}css/themes/green/images”,
pager : jQuery(“#ptreegrid”),
editurl: “{/literal}{$adres_pelny}{literal}admin/formularze/konfiguracja/szablon_edit.php”,
caption: “Szablony”,
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+”_t”;
pager_id = “p_”+subgrid_table_id;
jQuery(“#”+subgrid_id).html(“”);
jQuery(“#”+subgrid_table_id).jqGrid({
url:”{/literal}{$adres_pelny}{literal}formularze/xml/szablon_zmienne-“+row_id+”.php”,
datatype: “xml”,
colNames:[“ID”, “Typ zmiennej”, “Nazwa zmiennej”, “Opis zmiennej”],
colModel:[
{name:’ID_zmiennej’,index:’ID_szablonu’, width:30, hidden:true, key:true},
{name:’szz_typ’,index:’szz_typ’, width:180, editable: true, edittype:”select”, formatter:”select”, editoptions:{value:”1:Szablon;2:Informacja;3:Inne”}, formoptions:{ rowpos:1, label: “Wybierz rodzaj zmiennej”, elmprefix:false},editrules:{required:true}},
{name:’szz_nazwa’,index:’szz_nazwa’, editable: true, width:230, align:”left”, editable: true, formoptions:{rowpos:2, label: “Nazwa zmiennej”, elmprefix:false}, editrules:{required:true}},
{name:’szz_opis’,index:’szz_opis’, editable: true, width:250, align:”left”, formoptions:{ rowpos:3, label: “Opisz zmienna”},editrules:{required:true}}
],
pager: pager_id,
pgbuttons: false,
pginput: false,
caption: “Zmienne”,
height: ‘auto’,
editurl: “{/literal}{$adres_pelny}{literal}admin/formularze/konfiguracja/szablon_zmienne_edit-“+row_id+”.php”,
}).navGrid(“#”+pager_id,
{edit:true,add:true,del:true,search:false,refresh:true,view:false}, //options
{height:’auto’,reloadAfterSubmit:false, width: ‘auto’, jqModal:true, closeOnEscape:true, bottominfo:”Wszystkie pola wymagane”}, // edit
{height:’auto’,reloadAfterSubmit:false, width: ‘auto’, jqModal:true, closeOnEscape:true, bottominfo:”Wszystkie pola wymagane”}, // add
{reloadAfterSubmit:false,jqModal:true, closeOnEscape:true}, // del
{closeOnEscape:true, jqModal:true}, // search
{} // view
);
},
subGridRowColapsed: function(subgrid_id, row_id) {
var subgrid_table_id;
subgrid_table_id = subgrid_id+”_t”;
jQuery(“#”+subgrid_table_id).remove();
},
multiselect: false
});
[/code]

There are some SMARTY templates code between but it all works fine, only that

obj.p.colModel[i] is undefined
nm = obj.p.colModel[i].name.replace(’.’,”\\.”);;

shows when i try to edit row (else then first).
The same thing shows when i try to toggle between rows in the “form edit” box.

@tony
Yes I see the documentation:

“Currently it is not recommended to combine inline editing and form editing with treegrid, or the expanded column will not be editable”

But i don’t want to edit ExpandedColumn (editable=false).
I tried to modify editRow (line 31 of grid.inlineedit.js) moving svr[nm]=tmp; inside the if statement that create edit html and all seems to work.
In other words i have modified editRow to save in savedRow only the editable data.
I don’t know if this modification has some side-effects.

Best Regards
Marco

Thanx Tony, it’s works…

Silly me 🙂 I know whats going on.. I had key number the same on each row.. In future it jqGrid should check key id numbers 🙂

Best Regards
Łukasz Schab

Hey, is there any way to increase the height of the column headers? There are cases where you may want to wrap the headers in 2 lines.

What do you think adding

if(frmopt.elmprefix != ” || frmopt.elmsuffix != ”)
jQuery(elc).css(‘width’, ‘auto’);

after line 607 :
$(“td:eq(“+(cp-1)+”)”,trdata[0]).append(frmopt.elmprefix).append(elc).append(frmopt.elmsuffix);

After adding suffix or prefix input box going out of range modal box (few pixels). This code changes this.

Thank you tony for your work,
I propose my small contribution you.
edit rules for 2 fields. ex. ‘password’ and ‘confirm password’.
editrules: {edithidden:true, equalTo:’pwd’}
if(edtrul.equalTo && !isEmpty(edtrul.equalTo)) {
var nombrecampo = edtrul.equalTo;
for( i =0, len=g.p.colModel.length;i<len; i++){
if(g.p.colModel[i].name == edtrul.equalTo) {
nombrecampo = g.p.colNames[i];
break;
}
}
var comp = $('#'+edtrul.equalTo).val();
if (val != comp)
return [false,nm+" "+jQuery.jgrid.edit.msg.equalTo,""];
}
Best Regards
J.C.

Hi Tony,

in the actual build there’re a bug (?) with a multiboxonly property. The value “true” has no effect.

I can select the row by clicking on it, the last selected row/rows is/are unselected at the moment, but the selarrrow array is increasing.

Regards,

Pavel

@Pavel
What you mean with actual build? build10 or the last version from GitHub?
Tony

Hi,

does the jgrid plugin impacts all forms on the page ?

I am trying to do simple sibmit on a form that is on the same page as a grid, and the submit does not work any more when the grid is there

is there a known work around ?

thanks

I realize this is a newb questions but …

Is it possible to perform crud operations client side only and only post the updates to the db iff the user hits save?

I need to show the grid, allow the user to add/update/delete recs, then update the server ONLY if they hit save ..

Thanks for all the great work Tony!

Rob

tony :
@Pavel
What you mean with actual build? build10 or the last version from GitHub?
Tony

I’ve meaned the build 10. The problem still exists in the build 11 (just downloaded from GitHub). I was wrong about the selarrrow array. It doesn’t increase. By clicking on a row it is reset and consist of only one just selected id. Multiselect with checkboxes works fine.

Hi Tony,

I have the following error trying to add a row (build 11):
Error: ret is undefined
File: /js/grid.formedit.js
Row: 760

Best regards,

Pavel

Hi Tony,
We are planning to use jqgrid in our new project which is based on asp.net mvc 1.0 framework.While evaluating the grid we have been struck with two problems.
1.Multiple row editing and saving that edited data to backend database. In this issue I have successfully edited different cells in different rows, but could not able to figure out how I can save these edited cells or rows back to server(some database). In a single row editing when user hits the enter button then only it posts back to server. But in case of multiple row editing it is not working.
2. How we can dynamically bind the grid with some datatable or any other object, so that number and names of columns could be decided at run time
We dont want to define the columns to be used in our grid at design time.
As we have to collect the input data from some csv or excel file which may have any number of fields.
Is it possible to handle all these issues with jqgrid. If yes please provide the suitable example to implement these features in our project.
Regards,
Hari

I have a question to Tony.
Can i use in Tree Grid Adjacency model datatype “json”(how?), or only xml?

@Pavel
It is difficult to answer without the code. Mainly this means that you have event which should return something, but in your code this is not done.

@hariom964
1. If you use cellEdit use in the url parameter ‘clientArray’ and the you can use the getChangedCells method to obtain the changed cells and post them to the server.

2. Use import/export module. See docs

Reagrds
Tony

@schabol
Thanks.Try to use the latest build. Do not forget to change the css. I have implemented other solution

@j.contreras
Thanks. Good additio. Will try to add this,

Tony

@pro85
Yes you can use tree with json. There is a quite good examples in the docs
Regards
Tony

Hi,
I had a problem editing subgrids using the ‘form method’ (i.e. with modal windows, not inline). The checkboxes where always on or off, depending on their initial state and could not be changed at all. Plus, the widths of the layout formatting table of the dialog where wrong. I suspected it had something to do with the subrid editing window appearing inside the table of the parent grid, so I made a quick change on grid.formedit.js (editGridRow, line 327) to force the modal to be appended to the body of the document and it worked like a charm. The change involved adding the ‘true’ value to the last input variable to the createModal function, like this:
from:
createModal(IDs,tms,p,”#gview_”+$t.p.id,$(“#gview_”+$t.p.id)[0]);
to:
createModal(IDs,tms,p,”#gview_”+$t.p.id,$(“#gview_”+$t.p.id)[0], true);

Hope it helps!

Hi, I’m trying to integrate jqGrid on my projects, but I have a strange issue; jqGrid header and content font are all set to 16px…and I don’t know why!!! I use px font sizes and a jQuery UI Theme with the default 1.1em font-size.

View this image, please: http://3.ly/ZDG

Please help me understand why, thanks.

@tony
Tony, any news on the final date of the 3.5 release?!
Appreciate your response on this.

-Praveen

@Strx

I found that without

on top of html file I have the problem described above, but I can’t add that line because, for another component (EJSCharts) it is incompatible…

Have you any idea? Thanks

I have added some grids to a jQuery UI Accordion object. All the grids on the accordion child that is expanded by default, displays perfectly. But the grids on the accordion children that are NOT expanded by default, permanently shows the jqGrid “Loading” div on these grids. Any ideas?

Thanks!