jQuery Grid Plugin – jqGrid

Hi, lovely grid plugin, but is it possible to have grouping on the rows as well?

Something like that would help givinbg more information on a smaller screen size.

been trying to find something like that, but just cant

Awesome job jqGrid Team

I am using struts2 jquery grid plugin which is using jquery grid. I am fetching the data from the database and while rendering in the grid its not same as in the database.

I even verified by printing the data in the console. I am able to print the data properly but when its displayed in the grid its either more than what it is in the DB or less

EX:

VALUE IN DB VALUE SHOWN IN GRID
79716692754564514 79716692754564510
140163591907448966 140163591907448960
111118519160801253 111118519160801250

Could some one verify and confirm whether u are facing this issue at your end as well or is it something happening at my end only.

Hi,

I am unable to display long data type properly. Below are the few samples of long data:

79716692754564514

140163591907448966

When i am trying to show these values in the grid they are not same. Do i need to use any kind of formatter to show them correctly.

Thanks & Regards,

Rajeshwar

Hi,
the frozen feature is good as of this time. The only problem we have encountered is when we combine the filterToolbar and setFrozenColumns, the first row for the data of the frozen columns overlaps with the filter fields on the grid header.

We would be glad if this will be fixed soon. Thanks!

Good Job!

@Mark,

The frozen columns work OK with filterToolbar. The only requierment is to call first filterToolbar method and then frozenColumns

@rajeshwar,
In order to help we need a working testcase.

Regards

@Tony,

Thanks! That worked!

One last thing, we altered the css of the grid header to be able to do word wrapping by putting “height: auto; white-space: normal;”

However, this made the freeze column header looked like this

Frozen Column Unfrozen Column
________________________________________
| Header Name | Word wrapped |
|___________________| Header |
| Filter Field | |
|___________________|__________________|
| Row Due to wrap | Filter Field |
|___________________|__________________|
| Frozen Data | Row Data |
|___________________|__________________|

Regards

Can any one respond to my query regarding displaying long data in the grid.

when i save the inline added data,then I edit it,it’s ‘oper’ is ‘add’,unbelievable!

Hi,
i try to create subgrid with json(getting from remote) data.but i can’t load subgrid only shows loading alert only.doesn’t show any data

Tony,

I am having the same issue as Mark above as we altered the css to support word wrapping on the grid and the frozen columns now don’t line up . .

Great job to jqGrid team …

@XiaoMing : yeah you right…

I want to use inline navigator, but I think it still have some bug. For example, when add new data, save, then immediately edit it, then cancel, the data is disappear. so you need to refresh so it will request again from server.

But in my case I usually use ‘local’ datatype, so I lost the data I’ve added.

Do not forget the nuGet package!

hey Tony
Is it possible to change grid pager.I want at the pager bar there will be some number which will be hyperlink for next page of grid.Like if i click on ‘3’ the grid should be loaded with 3rd page of grid.
Thanks
Argha

hi, i’m new to jqgrid,
how to use this file,

i have paste file from example to my page but table is not loaded correctly,
i don’t know what file (js/css) should be included

i only use :
ui.jqgrid.css
jquery-1.5.2.min.js
jquery.jqGrid.min.js

any left?

solved:

i just found this page:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:how_to_install

Tony,

Do you have any plans on supporting frozen columns with the tree grid view ? I was quite excited to see this feature but realized I really need it on my treegrids

Hi,

It doesn’t work ‘navGrid’ with using ‘setFrozenColumns’ method.
When filtering, the table is stop ‘loading’.
# using jqgrid-4.3.1, jquery-1.7.1 and jquery-ui-1.8.16.custom.css/.js

I programmed as follows and it becomes work.
But, is it the right method?

——————
var isLoaded = false;

$(“#sample1”).jqGrid({
・・・
gridComplete: function(){
if (!isLoaded == true){
$(“#sample1”).jqGrid(‘setGroupHeaders’, {
useColSpanStyle: true,
groupHeaders:[
{startColumnName: ‘age’, numberOfColumns: 3, titleText: ‘Details‘},
{startColumnName: ‘note1’, numberOfColumns: 3, titleText: ‘Notes‘}
]
});
$(“#sample1”).jqGrid(‘setFrozenColumns’);
isLoaded = true;
}
},
});
——————

Best Regards.

On the grouping. Is there a way to display a , or comboxbox on the grouping row? Can we do the same also on the summary row?

This feature is useful for let’s filtering the group’s display or maybe manipulation that group’s data let’s say I have to approve that’s group’s timesheet just by clicking an approve botton display on the grouping column or I want only to display certain department for that group.

Hi,

Where is the example demo for this version i can download?

at download tab, i only fount demo 4.1

Best Regards,

Hi.

I’ve found some bad thing…

when I create custom edit field (using edittype=’custom’ and custom_element=), I cannot create table element because of an error “Node cannot be inserted at the specified point in the hierarchy”, that raises during that code running:
$.each(sd, function(index, row) {
$(‘tbody’,tbl).append(row);
});
// this code is in “grid.formedit.js” source file at lines 957-959,
// jqgrid version = 4.3.1

Attempting to append with causes this error.

Any ideas?

Hi, everybody, again!

I’ve also found very strange code line in ‘grid.formedit.js’ module at line 406:

tdtmpl = “  ”, tmpl=””, i; //*2

using spaces here causes some problems with 100% width of custom elements: they just shift down by 1 line.

I have to edit the source and erase the symbols “ ” to fix that problem.

Why template string for table cells contains spaces???

Can it be fixed in future version?

Hi guys,
Great Job on jqGrid, but experimenting with it I think I found a BUG!
If you search or especially update the grid object with a recordSet=0, both the icons
ui-icon-seek-next and ui-icon-seek-last appear to be both enabled. This is however not the case when the records returned is less than the paseSize (they are disabled).
Looking into it, I fixed it by updating line 1632 to the following:
FROM
if(cp==last || cp === 0) {…}
TO
if(cp==last || cp === 0 || ts.p.reccount === 0) {…}
Can someone look into this?

I think I found a bug.
Prior to the upgrade the grid was working fine with 4.0.
Currently I have a grid with many columns, but the columns of interest are two columns with times. By default column time #1 is visible and column time #2 is hidden. I have a check box that when clicked hide/shows column #1 or column #2.
The issue is that every time I run this code
if (btnRound.is(“:checked”)) {
table.jqGrid(“showCol”, “EstimatedTime”);
table.jqGrid(“hideCol”, “ActualTime”);
} else {
table.jqGrid(“hideCol”, “EstimatedTime”);
table.jqGrid(“showCol”, “ActualTime”);
}
The width of the grid gets smaller. I need the width to stay fixed.
Thanks any feedback would be appreciated.

I forgot to say that I have shrinkToFit set to true

hi!i was using the treegrid,use treeGridModel: ‘adjacency’;
the data from server:
“rows”:[{“id”:”17″,”cell”:[“17″,”car”,”carType”,”001″,”dictionary”,”True”,”1″,”1″,”false”,”true”]}, …..

isleaf is false, Expanded is true ,just the icon has changed(“ui-icon-triangle-1-s tree-minus),the children node is hide

i want Expand all node at first load.

sorry for my pool english

@sloong
i think i found a solution

gridComplete: function () {
setTimeout(function () {
rootNode = $(“#jqgrd”).jqGrid(‘getRowData’);
$.each(rootNode, function (i, n) {
if (n.expanded==”true”) {
n._id_ = n.Id;
$(“#jqgrd”).jqGrid(‘expandRow’, n);
$(“#jqgrd”).jqGrid(‘expandNode’, n);
}
});
$(“#jqgrd”).jqGrid(‘setSelection’, rootNode[0].Id);
}, 10);
}

@sloong
when gridComplete,expand All Node,the tree like:
-bignode
-second_node
#third_node1
#third_node2
#third_node3
when i click the “bignode” ,the tree like:
+bignode
#third_node1
#third_node2
#third_node3
just the second_node hided ,however the third_node dispaly in the tree

I am using 4.3.1 and in IE7 upon reload the pager shows:
page 1 of (that is last page is blank) although in IE8 it shows :
Page 1 of 1 (I have only one page).
I return Json and set all the required params correctly and using local but handle paging using te Onpag.. event

I saw in github that you fixed a bug related to postdata in gridRowDelete having split called on it twice (leading to errors).

Any plans on releasing an update to jqgrid that includes that fix?

Thanks!

Ok, I just confirmed it is a bug.
The demo page “New since beta 3.0” is behaving the same way for “Hide/Show Columns”.
If the user clicks several times the the hide and show links, you will notice that the grid is getting smaller.

Hey!

First of all, thanks for really awesome plugin. However, there’s a thing that looks little illogical to me:
if you set multiselect to true and click on a row it gets selected. I would like to get it selected only if user clicks checkbox.

Is there a way to do that?

Can we have the updated jqgrid in nuget? Thanks.

Im using latest version of jqgrid-rails3 plugin from https://github.com/davebaldwin/jqgrid-rails3.git the installation work fine after fixing probleme in view.rb there is missing left parenthesis in line 373 (add_event :loadComplete, Javascript.new(“function() {{#{callback}()}”)
and fixing another problème about

i think the lines
:cache => “jqgrid-#{theme}-css” and
:cache => ‘jqgrid-js’ cause probleme also in view.rb
so i included “jqgrid/ui.jqgrid.css”,”jqgrid/ui.multiselect.css”,
“jqgrid/themes/start/jquery-ui-1.8.4.custom.css” in stylesheet_link_tag line
and i include “jqgrid/i18n/grid.locale-en.js”,
“jqgrid/ui.multiselect.js”,”jqgrid/jquery.jqGrid.src.js” in javascript_include_tag line in layout/application.html.erb
now all it work fine on testing the grid (multiselect,search,crud)
the only probleme when i use detail grid the add row does’nt work it seems to me that the foreign key is not delivered by the matser grid when adding rows in details i dont know how to solve this probleme
and the master-details grid

i think the line :cache => “jqgrid-#{theme}-css” and :cache => ‘jqgrid-js’ cause probleme

all it work fine

in line and it seems to me that the master-details dont work if we add record in details grid the foreign key is empty i mean params[:foreign_id] to nmake association with with the master grid

Hi,
I’m using the jqgrid 4.3.1 and I want to use the freezecolumn functionality but it’s not working. I wonder if it’s compatible with subgrids.

Thanks

Seems that there is a BUG in 4.3.1 which in IE7 doesn’t handle the page x of Y correctly.
Also how can i NOT shpow the page input box. I set pgInput: false but it doesn’t have any effect

Al :
I am using 4.3.1 and in IE7 upon reload the pager shows:
page 1 of &nbsp (that is last page is blank) although in IE8 it shows :
Page 1 of 1 (I have only one page).

I return Json and set all the required params correctly and using local but handle paging using te Onpag.. event

Getting a bug in 4.3.1 – crashing out on line 1599 of jqgrid.js. Fixed by changing it to:
if (typeof($.jgrid.formatter)!==’undefined’ && typeof($.jgrid.formatter.integer) !== ‘undefined’)
fmt = $.jgrid.formatter.integer;
else
fmt = {};

I just want to check is this a free component? Or part of your commercial range?
Thanks.

Issue: postdata.split is not a function

Version: 4.3.1

Fix:
Add “toString()” to split function on lines 8247 and 8282 in the jquery.jqGrid.src.js file:

line 8247: postdata = postdata.toString().split(“,”);
line 8282: toarr = postdata.toString().split(“,”);

Hi Jqgrid Team.
Currently I am working on fully html5 Supported application, and I found that Jqgrid is not fully verified on HTML5,So can you Plz on next Give the Version Which is fully html5 Verified.
I am waiting for your next vesrion which is fuly verified on HTML5
Thanks
Jayesh Prajapati.

hi,
i want to do column freezing of jqgrid .i am using

jqgrid4.3.1,jquery-1.6.2.min.js and jquery-ui-1.8.16.custom.min.js

i hav aslo write frozen:true in colmodel and jQuery(“#tblgrid”).jqGrid(‘setFrozenColumns’); but then also first column is not freezed.plz help me to freeze first column.

this is my .js file

*************************************

var result = [];

$(document).ready(function () {

$(“#AddNewCommon_BandsDialog”).dialog({

width: 500,

modal: true,

autoOpen: false,

buttons: {

“Save”: function () {

AddNewBands();

},

“Cancel”: function () {

$(this).dialog(“close”);

}

}

});

LoadData();

});

function LoadData() {

var grid = $(“#tblgrid”);

grid.jqGrid({

url: ‘../Demo/GetBands’,

loadonce: true,

datatype: ‘json’,

mtype: ‘GET’,

postData: {},

width: 400,

// width: 750,

colNames: [‘BandID’, ‘BandName’,”],

colModel: [

{ name: ‘BandID’, align: “center”, index: ‘ID’, width: 200, sortable: false , frozen: true },

{ name: ‘BandName’, align: “center”, index: ‘Name’, width: 200 ,frozen: false,editable: true, edittype: ‘text’, editoptions: { maxlength: 3, onKeypress: ‘javascript:return ValidDecimal(this, event)’} },

{ name: ‘act’, index: ‘act’, width: 200 ,frozen: false, sortable: false,formatter: ActionFormatter },

],

jsonReader: {

repeatitems: false

},

editurl: ‘#’,

ignoreCase: true,

height: ‘100%’,

rownumbers: true,

rowNum: 5,

rowList: [5, 10, 20, 50],

viewrecords: true,

sortorder: “desc”,

forceFit: false,

pgbuttons: true,

pager: ‘#dvBands’,

caption: “Bands Detail”,

recordtext: “View Band {0} To {1} Of {2}”,

emptyrecords: “No Record Found”,

shrinkToFit: false

}).jqGrid(‘navGrid’, ‘#dvBands’,

{

search: false, edit: false, add: true, del: true, view: false,

refresh: false,

alertcap: “Bands Error”,

alerttext: “Please select Bands.”,

searchtext: “Search”,

searchtitle: “Search Detail(s)”,

addtitle: “Add Detail”,

addtext: “Add”,

addfunc: AddBands,

// edittext: “Update”,

// edittitle: “Update Selected Detail”,

/*editfunc: UpdateNew,*/

viewtext: ‘View’,

viewtitle: ‘View Selected Bands’,

/*viewfunc: ViewNew,*/

deltext: ‘Delete’,

deltitle: ‘Delete Selected Bands’,

delfunc: DeleteBands,

position: “left”

},

{}, // default settings for edit

{}, // default settings for add

{}, // delete

{closeOnEscape: true, multipleSearch: false,

closeAfterSearch: true }, // search options

{}

);

jQuery(“#tblgrid”).jqGrid(‘setFrozenColumns’);

}

function ActionFormatter(cellvalue, options, rowObject) {

var ret;

// var ddd = rowObject.IsSubmissionSubmitted == true ? 1 : 0;

ret = ”);” />’;

ret = ret + “”;

ret = ret + “”;

return ret;

}

function editcall(cl, drp) {

jQuery(‘#tblgrid’).editRow(cl);

$(“#btnedit” + cl).css(“display”, “none”);

$(“#btnsave” + cl).css(“display”, “block”);

$(“#btncancel” + cl).css(“display”, “block”);

}

function cancelcall(cl) {

jQuery(‘#tblgrid’).restoreRow(cl);

$(“#btnedit” + cl).css(“display”, “block”);

$(“#btnsave” + cl).css(“display”, “none”);

$(“#btncancel” + cl).css(“display”, “none”);

}

function saveBands(index) {

jQuery(“#tblgrid”).jqGrid(‘saveRow’, index);

var row = $(“#tblgrid”).jqGrid(‘getRowData’, index);

var BandIDContent = row.BandID;

var BandNameContent = row.BandName;

$.post(‘../Demo/UpdateBands’,

{ BandID: BandIDContent, BandName: BandNameContent },

function (data) {

if (data == “True”) {

LoadData();

}

});

$(“#btnedit” + index).css(“display”, “block”);

$(“#btnsave” + index).css(“display”, “none”);

$(“#btncancel” + index).css(“display”, “none”);

}

function DeleteBands() {

debugger;

var row_id = jQuery(“#tblgrid”).jqGrid(‘getGridParam’, ‘selrow’);

$.post(‘../Demo/DeleteBands’,

{BandID:row_id},

function (data) {

if (data == “True”) {

LoadData();

}

});

}

function AddBands() {

$(“#AddNewCommon_BandsDialog”).dialog({ title: “Add New Common_Bands” });

$(“#AddNewCommon_BandsDialog”).dialog(“open”);

$(“#AddNewAreaDialog input”).css(“border-color”, “silver”);

}

function AddNewBands() {

var BandName = $(“#txtCommon_Bands_BandName”).val();

$(“#AddNewCommon_BandsDialog”).dialog(“close”);

$.post(‘../Demo/AddBands’,

{ BandName: BandName },

function (data) {

if (data == “True”) {

LoadData();

}

});

}

function ValidDecimal(objTextbox, event) {

//Allows 0 to 9 and only one .(46)

var keyCode = (event.which) ? event.which : (window.event) ? window.event.keyCode : -1;

if (keyCode >= 48 && keyCode <= 57 || keyCode == 46) {

if (keyCode == 46) {

if (objTextbox.value.indexOf(".") == -1)

return true;

else

return false;

}

else

return true;

}

if (keyCode == 8 || keyCode == -1) {

return true;

}

else {

return false;

}

}

@karim
pls… can you thell me, how did you installing jqgrid for RoR.

I get Rails 3.2.6, and I can installed it

In jQgrid Multiple grouping It don’t toggle the Plus-minus icon when expand first parent node.

It is because in “groupingToggle :” method of jQgrid we are only toggling the icon of Clicked row. There should be a checking and toggling of icon on each row level when it is multiple grouping. I have inserted the code and make it commented. Please go through it and implement this. You may have different idea and way to do this. I am not expert in jQuery.

if(r){
while(r) {
if($(r).hasClass(uid+”_”+String(num)) || $(r).hasClass(uid+”_”+String(num-1)) ) { break; }
//if($(r).has(‘span’)){$(r).find(‘span’).removeClass(plus).addClass(minus)};
$(r).show();
r = r.nextSibling;
}
}
tarspan.removeClass(plus).addClass(minus);

@Tony
Pl. check it. Its a bug.

Hello,
Please check GitHub – it is already fixed.

Regards

{ name: ‘Estado’,
index: ‘Estado’,
width: anchoP(ancho, 10),
align: ‘left’,
editable:true,
edittype:”select”,
editoptions:
{value:estados_limpio},
dataEvents: [
{
type: ‘change’,
fn: function(e){
var thisval = $(e.target).val();
$.get(‘http://URL/clinica/paginas/planAtencion/consulta_motivo2.jsp?id_motivo=’+thisval, function(data) {
var res = $(data).html();
$(“Motivo”).html(res);
});

}
}
]
}, { name: ‘Motivo’,
index: ‘Motivo’,
width: anchoP(ancho, 20),
align: ‘left’,
editable: true,
edittype: ‘select’,
editoptions: {value:motivos}

}

Hi I need to populate on select that depen on other select but jqGrid doesn’t work with dataevents “change”. It doesn’t even enter into the change function

Hi, I need to populate on select that depen on other select but jqGrid doesn’t work with dataevents “change”. It doesn’t even enter into the change function. Any idea ? thanks.

{ name: ‘Estado’,
index: ‘Estado’,
width: anchoP(ancho, 10),
align: ‘left’,
editable:true,
edittype:”select”,
editoptions:
{value:estados_limpio},
dataEvents: [
{
type: ‘change’,
fn: function(e){
var thisval = $(e.target).val();
$.get(‘http://URL/clinica/paginas/planAtencion/consulta_motivo2.jsp?id_motivo=’+thisval, function(data) {
var res = $(data).html();
$(“Motivo”).html(res);
});

}
}
]
}, { name: ‘Motivo’,
index: ‘Motivo’,
width: anchoP(ancho, 20),
align: ‘left’,
editable: true,
edittype: ‘select’,
editoptions: {value:motivos}

}