jQuery Grid Plugin – jqGrid

I’m using jqGrid in ASP.NET. jqGrid is literally good. As of now, I’m using Handler(ashx) or WebService(asmx) to convert the DataTable into JSON and display in the Grid. Can I use c# code behind and bind the Data? I mean c# method convert the DataTable into JSON? I’m trying, if any one has done or have any idea, please let me know.

Thanks and Regards,
Achutha Krishnan

@Dominique
How to adjust jqGid font size:
I found solution in the wiki Documentation ‘How to Install’
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:how_to_install

just reduce the font size of body section,

…

html, body {
margin: 0;
padding: 0;
font-size: 75%;
}

…

…

Hi Tony
I am using your latest grid 3.5 and modifying it according to my needs. I have an issue. While resizing the column the whole columns get messed up ( even on initial load ).
I had to comment this line from css
/*
.ui-jqgrid .ui-jqgrid-hbox
{
float:left;
padding-right:20px;
}
*/
to show it properly on the initial load that alligned the headers and the data columns perfectly.
But the columns(both data and header ) are still showing up less then the actual width of the whole table.
This is what i have for the initialization of the grid.

jQuery(“#jv-campaignGrid”).jqGrid({
//url:’server.php?q=2′,
url:”myUrl”,
datatype: “JSON”,
colNames:[‘Campaign Name’,’Status’, ‘Start Date’, ‘Total Contacts’,’Sent’,’Actions’],
colModel:[
{ name:’name’,index:’id’, jsonmap:’name’, width:150 },
{ name:’status’,index:’invdate’, jsonmap:’status’, width:150 },
{ name:’startDate’,index:’name asc, invdate’, jsonmap:’startDate’, width:150 },
{ name:’totalContacts’,index:’amount’, width:150, jsonmap:’endDate’, align:”right” },
{ name:’JobvitesSent’,index:’tax’, width:150, jsonmap:’userId’, align:”right” },
{ name:’Actions’,index:’total’, width:150, jsonmap:’type’, align:”right” }
],
jQuery(‘#pager2’),
viewrecords: true,
//height: 300,
jsonReader : {
root: “resultList”,
page: “page”,
total: “total”,
records: “count”,
repeatitems: false,
cell: “”,
id: “0”,
}
});

Not sure what i am doing wrong. Any help would be greatly appreciated.
Thanks
Varun

i figured out the problem. I put the jqgrid in the tag that was messing up the whole css. For now i have removed the center tags from the page.

<center> the rendering removed the tag name from the text.

@Demetri
don’t work for me,
try
table {
font-size:98%
}

Dear all,

Am dealing with a problem in pagination.
My queries are completely correct.
When I am in the second page of a jqgrid and press sort by one column it returns me
to the first page again.
As I realize the browser sent the first page every time i press in the head columns sorting.

Can anyone give a solution if there is?

Thanks in advance,

Kostis

Great work with the grid Tony, thanks so much for your contribution…I have the following question though: Is there a way or a property that can be set on the grid so that it doesn’t wrap text. Right now, if the text goes over the columns width, all that shows up is three dots “…” We want to be able to show all the text on the column so that it can be scanned quicky without having to hover over the column to view the contents. Thanks again!

Hi Tony,
I dont need to say that its a great plugin ever made..
but i have issue :(, i want to use a separate url for my searching needs but it is using the “editurl” property can i change it to something else?how?
plz reply asap…
thanks 🙂

Even after putting jquery.searchFilter.js can’t able to search multiple conditions in IE6 and IE7…

Nice plugin.

I’m using the grid (version 3.5) to bind to a javascript array of data. All CRUD operations are being done on the client. I’d like to keep the rows limited to 4 per ‘page’ of data. When ever I add the fifth row, the new row is appended to the current ‘page’ of data and not to a new ‘page’ of data. I set the ‘rownum’ property to 4 inside the option too. This method adds a new record and immediately put it into edit mode using the inline edit methods:

function AddNew()
{
var grid = $(‘#CodeGrid’);
var total = grid.getGridParam(‘records’);
grid.addRowData(total + 1, emptyItem); // add a new row with empty data
SetupActions(‘CodeGrid’, total + 1); // set up some CRUD buttons
grid.editRow(total + 1); // put new row into inline-edit mode
ToggleEditMode(‘CodeGrid’, total + 1); // disable/enable some buttons
}

Is there some way to add the new row to a new page of data?

OK, I figured out how to do deal with my paging issue. If anyone’s interested:

function AddNew()
{
var grid = jQuery(‘#CodeGrid’);
var total = parseInt(grid.getGridParam(‘records’), 10); // get total records
var maxRow = grid.getGridParam(‘rowNum’);// get rows per page
if ((total + 1) % maxRow == 1) { // if the next row needs to be on next page
var nextPagenum = Math.ceil((total + 1) / maxRow); // calc next page
grid.setPostDataItem(‘page’, nextPagenum.toString());// set post data
grid[0].p.page = nextPagenum.toString();// set page number
}
emptyItem.id = total + 1; // set empty item’s id
_dataArray.push(emptyItem); // add to local array first
grid.trigger(“reloadGrid”); // trigger reload to get data from a function
SetupActions(‘CodeGrid’, -1); // set up CRUD buttons
grid.editRow(total + 1); // put new row into ‘edit mode’
}

I try to integrate the jqgride with grails, and successed using firefox but failed in ie6&7. There is a script error when jqgrid call the Json-url. Any advise?

I want to convert html table to grid, but there is an jserror : Microsoft JScript runtime error: ‘colModel[…].name’ is null or not an object

my html code is

Find by name: <input size="40" name="q" value="”/>

Name

<input type="hidden" name="pg" value="” />
<input type="button" class="editor-button" value="| << " name="btnpager" disabled=”disabled” onclick=”pg.value=’1′;this.form.submit()”/>
<input type="button" class="editor-button" value=" << " name="btnpager" disabled=”disabled” onclick=”pg.value=”;this.form.submit()”/>

<%for (int i = 1; i
<option selected=”true” value=””>

> ” name=”btnpager” disabled=”disabled” onclick=”pg.value=”;this.form.submit()”/>
> |” name=”btnpager” disabled=”disabled” onclick=”pg.value=”;this.form.submit()”/>

tableToGrid(“#tbl1”)

I wonder if you could help me

@Kevin

Yes, Me too woluld like to see a feature like this. Wrapping of column header text should be possible.

For the TableToGrid… make sure your table definition has thead and tbody sections as follows:

Looks like the function looks for the thead to build colnames, etc.

I am trying to get a grid working using xmlstring as the datatype. I am getting “E is null” error in firefox and node type is null error in IE. I am passing the following xmlstring to the grid.
header(‘Content-type: text/xml;charset=utf-8’)1312122009-12-01450.0040.00490.00 112009-11-01860.0012.00872.00 102009-10-01780.0020.00800.00 92009-09-01345.0015.00360.00

And I have pasted below my code for grid:

drupal_add_js(
”
jQuery(document).ready(function(){

jQuery(\”#list\”).jqGrid({
datatype: ‘xmlstring’,
datastr: jgrid_data,
colNames:[‘Inv No’,’Date’, ‘Amount’,’Tax’,’Total’,’Notes’],
colModel :[
{name:’invid’, index:’invid’, width:55},
{name:’invdate’, index:’invdate’, width:90},
{name:’amount’, index:’amount’, width:80, align:’right’},
{name:’tax’, index:’tax’, width:80, align:’right’},
{name:’total’, index:’total’, width:80, align:’right’},
{name:’note’, index:’note’, width:150, sortable:false}
],
height: ‘auto’,
pager: ‘#pager’,
rowNum: 4,
viewrecords: true,
caption: ‘My first grid’
});

});
“, “inline”
);
Please let me know what the problem is. I am not able to proceed forward because of this error.

Thanks in advance

Hi,
I want to edit the table row using jquery ‘tableToGrid’,But dunno how to proceed as there is no reference available for that.
So, Please let me know how to edit the table row while using ‘tableToGrid’. Any suggestions/help related to this will be highly appreciated.

Thanks.

Hi,

I would like to have an example of how to use jqGrid with JSP? All the examples in the web site talks only about using PHP. Any help is appreciated.

Thanks

@Deepalakshmik
ithink this problem is related to XML content type. i had the same problem and solved it with this header:

header(“Content-type:text/xml;charset=utf-8”,true);

Give the second parameter as true to override any previous content type header.

Hi guys, i’m having some issues. Once I completed filters and try to search, I get he “loading” splash and the overlay dissapears, letting to manipulate the grid. I want to keep the grid inactive until I close the search modal. Thanks!

jQuery(“#list”).jqGrid({
url: ”,
datatype: ‘json’,
mtype: ‘GET’,
loadui: ‘block’,
multiselect: false,
colNames: [‘Id’, ‘Creada’, ‘Titulo’, ‘Opciones’],
colModel: [
{ index: ‘Id’, hidden: true, search: false },
{ index: ‘Creada’, width: 50, align: ‘left’, searchoptions: { dataInit: datePick, sopt: [‘le’, ‘ge’, ‘eq’]} },
{ index: ‘Titulo’, width: 150, align: ‘left’, searchoptions: { sopt: [‘cn’]} },
{ index: ‘Opciones’, width: 50, formatter: formatOpciones, align: ‘center’, sortable: false, search: false }
],

pager: jQuery(‘#pager’),
rowNum: 8,
rowList: [8, 15, 20],
sortname: ‘Creada’,
sortorder: ‘desc’,
viewrecords: true,
imgpath: ‘/content/cupertino/images’,
height: 240,
width: 867,
hidegrid: false
//});
}).navGrid(jQuery(‘#pager’), { search: true, edit: false, add: false, del: false, searchtext: “Buscar” },
{}, // default settings for edit
{}, // default settings for add
{}, // delete instead that del:false we need this
{closeAfterSearch: false, drag: false, closeOnEscape: true }, // search options
{} /* view parameters*/

);

});

@Carlos
hi Calos, did you get the solution. I’m also facing the same problem. Please forward me the solution, if you have already figured out. Thank you.

Please Tony,
Why the number of fields in the xls file after the export does’nt depass 1000 fields???

Tony,

I’m trying to open a new window in the onCellSelect event and can’t get it to work.

onCellSelect: function(rowid,iCol,cellcontent){
if (iCol == 0)
$(‘a[href=”myserver/pti/parview/#shipdetail.cfm?ThisSN=’+cellcontent+'”]’).attr(“target”, “_blank”);
},

How can I do this? thanks, Jim

hi i’m trying with editing_data/edit_types/ and i want to set edit form with size and text input length ,how i set this edit form ?

@zeke0
You need insert this tag in the first line of html:

Demetri :
@Dominique
How to adjust jqGid font size:
I found solution in the wiki Documentation ‘How to Install’
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:how_to_install
just reduce the font size of body section,
…
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
…
…

You need insert this tag in the first line of html:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Hi, All. How are we get value of all column from jqgrid? What sintax do I used?

@Ozahata

That is exactly right! I sat with these styling issues for hours trying different things. The solution of having inline styles did not sit well with me and your solution fixed the problems.

Thanks for that