Develop Reference

jqgrid header and data row are not align after resize

I am having a problem that i try to resize some column header, but when i do, the header and the respective data row are not aligned.
Here is the definition of my jqgrid.
Thanks in Advance ;)
Marcelo
var loadGrid = function () {
uCurriculosGrid.grid.data = $("#gridCurriculos").jqGrid({
datatype: "local",
height: "0",
shrinkToFit: false,
fixed: true,
width: 1240,
emptyrecords: 'Não existem curriculos para serem visualizados com esse filtro.',
colNames : uCurriculosGrid.grid.myColumnsState.colNames,
colModel: uCurriculosGrid.grid.myColumnsState.colModel,
ignoreCase: true,
multiselect: true,
multiboxonly: true,
caption: 'Curriculos',
pager: '#pager',
pgbuttons: false,
pginput: false,
editurl: "Administracao.aspx",
viewrecords: true,
onSelectRow: checkSelected,
onSelectAll: checkSelected,
beforeSelectRow: function (rowid, e) { return false; },
gridComplete: onGridComplete,
gridView: false,
postData: uCurriculosGrid.grid.myColumnsState.filters,
sortname: uCurriculosGrid.grid.myColumnsState.sortname,
sortorder: uCurriculosGrid.grid.myColumnsState.sortorder,
loadComplete: uCurriculosGrid.grid.loadComplete,
resizeStop: uCurriculosGrid.grid.resizeStop,
onSortCol: uCurriculosGrid.grid.onSortCol
}).navGrid('#pager',
{ add: false, edit: true, del: true, search: true, refresh: false, editfunc: editSelected, delfunc: deleteSelected }, //options
{ reloadAfterSubmit: true, viewPagerButtons: false, closeOnEscape: true, closeAfterEdit: true }, // Edit options
{}, // Add options
{},
{}
);
UPDATE: I know that the grid's configuration is being saved correcty in the localStorage because when i reload the page, the grid that wasn't aligned becomes aligned.
It gets more weird. When i edit my grid configuration with de columnChooser, and add some column to the Grid, it all works fine. But when i restore to default configurations, this error happens.

Try setting the property shrinkToFit as true;
shrinkToFit : true,
As given in the wiki
This option, if set, defines how the the width of the columns of the grid should be re-calculated, taking into consideration the width of the grid. If this value is true, and the width of the columns is also set, then every column is scaled in proportion to its width. For example, if we define two columns with widths 80 and 120 pixels, but want the grid to have a width of 300 pixels, then the columns will stretch to fit the entire grid, and the extra width assigned to them will depend on the width of the columns themselves and the extra width available.

BeforeLoad = function () {
$('#AdvertisementGrid td:nth-child(6)').attr('colspan',6);
}
It works for me. Here "#AdvertisementGrid" is grid id replace this id to your grid id.

Data size limit for display on jqgrid

This is a follow-up to my earlier question posted here. I have cases where we get large amount of data, around 200KB to be displayed on the jqgrid. In such case, the last sets of data are never displayed. Each record is split by a newline character. The data is in this format:
{"data":{"data":"\tat org.aaa.aaa.aaa.aaa.aaa.aaa(aaa.java:512)[147:org.aaa.aaa.aaa:9.1.1]\n\tat aaa.aaa.aaa.aaa.aaa.aaa(aaa.java:1789)[146:org.aaa:9.1.1]\n"}}
The code for grid is as follows:
$("#grid").jqGrid({
type: "GET",
url: "/getdata",
datatype: "json",
colNames: [''],
colModel: [
{name: 'data', align: 'left', sortable: false}
],
jsonReader: {
root: "data",
cell: "",
id: function () {
return function () {
return $.jgrid.randId();
}
},
page: function() { return 1; },
total: function() { return 1; },
records: function(obj) { return obj.data.length; }
},
loadonce: false,
viewrecords: true,
sortname:'',
rowNum: '9999',
autowidth: true,
ignoreCase: true,
height: "auto",
multiselect: false,
sortable: false,
autoencode: true,
loadComplete: function() {
$("tr.jqgrow:even").css("background", "#DDDDDC");
},
// We will handle the errors with ajax error handlers for now
loadError: function(error){
displayError(error.responseText);
},
beforeProcessing: function (data) {
var items = data.data.split("\n"), i, l, item;
data.logs = [];
for (i = 0, l = items.length; i < l; i++) {
item = $.trim(items[i]);
if (item.length > 0) {
data.data.push([item]);
}
}
}
});
I tried setting the rowNum to '', 99999, nothing worked. The total number of lines wwas The same lines seem to be getting chopped from display in jqgrid. Is there any limit to the amount of data that jqgrid can display? As of now, no pagination has been implemented on jqgrid.
Any pointers are greatly appreciated.
thanks,
Asha

First of all I recommend you to use correct type of all input parameters of jqGrid. In the documentation you will find the table which has "Type" column. The type of rowNum column is integer. So you should use rowNum: 9999 instead of rowNum: '9999'.
Additionally I strictly recommend you always use gridview: true option of jqGrid. In case of placing all data on one page such setting can improve the performance of filling of the grid in many times.
In the same way I don't recommend you to make any modification of the grid inside of loadComplete. It reduce the performance of jqGrid. You can define your custom CSS class for example
.myAltRows: { background: #DDDDDC }
and use the options altRows: true, altclass: "myAltRows". Alternatively you can use rowattr callback to set custom class or custom style on selected rows of the grid. See the answer for more details.
The last remark. I don't recommend you to include options which has default values (for example, type: "GET", loadonce: false, sortname:'', multiselect: false, sortable: false) or properties of colModel having default values (for example align: 'left'). You should examine default values column of the option and colModel options of the documentation.

jquery, jqgrid paging: cannot switch page

Here append similar questions but I cannot find answer to my one:
In html is
table id= grid and div id=pager:
Also I have mine js code:
var myGrid = $("#grid").jqGrid({
url: _options.gridFetch,
datatype: "json",
colModel:[
{name:'id',index:'id', width:55},
{name:'name',index:'name', width:555, editable:true},
{name:'is_promoted',index:'is_promoted', width:165, editable:true, formatter: $.adminCategoryEntries._boolFormatter, edittype: 'select', editoptions:{value:"1:Yes;0:No"}},
{name:'is_in_shop',index:'is_in_shop', width:165, editable:true, formatter: $.adminCategoryEntries._boolFormatter, edittype: 'select', editoptions:{value:"1:Yes;0:No"}},
{name:'actions', formatter:'actions', width: 85, formatoptions:{keys:true}},
],
pager: '#pager',
jsonReader : { repeatitems: false } ,
rowNum: 10,
rowList: [10, 20, 500],
viewrecords: true,
autowidth: true,
sortname: 'id',
sortorder: 'desc'
});
myGrid.jqGrid('navGrid','#pager',{edit:false,add:false,del:false,search:false});
I've use code from other stackoverflow tutorial.
And here is my issue: If I try to change number of showed rows in my navigator I can see all stored data (86 rows) but if I set rows to i.e 10 (value less than rows number)per page I always see in my navigator:
page 1 of 5
and I cannot switch it to another it always stays on first
json info:
>page: 1
>records: "86"
>rows: [{id:3, name:Ulkofilee/Naudanliha, is_promoted:1, is_in_shop:1},…]
>total: 5
thanks in advance
Radek

Are you getting the data from a server method you can control? It's somewhat cryptic, but the data coming from your _options.gridFetch needs to have a property named "total" defined that specifies the current page that should be viewed.

How can I make a jqgrid with a subgrid load faster?

This is an example of the code I have. I left out the colNames and colModel because I know that's not the problem. I'm just wondering if there is any way to make a jqgrid that has a subgrid load faster. When this grid has > 100 records, it is fairly slow. If I remove the subgrid code and put gridview: true on the grid, it loads sooooooooooooooo much faster, but obviously, I can't have gridview: true and a subgrid. Any suggestions?
$(scheduleGridName).jqGrid({
url: dataURL,
datatype: "json",
mtype: 'GET',
colNames: [...],
colModel: [...],
height: "auto",
width: '100%',
rowNum: 2000,
loadonce: true,
jsonReader: {
root: "SearchResults",
records: "NumberOfResults",
repeatitems: false
},
viewrecords: true,
subGrid: true,
subGridRowExpanded: getSubgrid
});

You have rowNum: 2000. So that is a lot of records plus a subGrid for each one. Try setting rowNum: 10. or a number that you find that loads fast enough. If that does not work then consider a different way to show the subgrid. You could create an "action" column that has a link to another grid to dig into the details.
This code example will add the html to the "Action" column.
gridComplete: function () {
var ids = jQuery("#grid").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
be = "<a href='../Company/EditUser?contactID=" + cl + "'>Edit</a></xsl:text>";
jQuery("#grid").jqGrid('setRowData', ids[i], {
Action: be
});
}
}
});

jqGrid not showing rows, only shows total number of rows

I'm having a problem that I can't sort it out.
Please take a look at this image first
As you can see, I have been able to request the JSON data from server. The pager shows that there were 4 records. But the records didn't shows in the table.
This is my javascript code
jQuery("#pickFlex66").jqGrid({
url: root + '<?=$mod?>' + '/listpicker',
datatype: "json",
altRows: true,
mtype: 'POST',
colNames:['Code','Company Name'],
colModel:[
{name:'company_code',index:'company_code', width:100},
{name:'company_name',index:'company_name', width:100}
],
rowNum:10,
width: 540,
height: 310,
rowList:[10,20,30],
pager: '#pagerFlex66',
sortname: 'company_code',
shrinkToFit: false,
viewrecords: true,
sortorder: "desc",
caption:"<?=lang("users_title")?>",
onSelectRow: function(id){
}
});
jQuery("#pickFlex66").jqGrid('navGrid','#pagerFlex66',{edit:false,add:false,del:false,search:false});
And here is my JSON data
{
"page": "1",
"total": 0,
"records": "4",
"rows": [{"id":"5","cell":["55-123","123"]},{"id":"3","cell":["123","IBM"]},{"id":"2","cell":["00000","BDO"]},{"id":"1","cell":["000-00","IT GROUP Inc "]}]
}
Is there a mistake in my javascript? Or maybe in my JSON data?

I agree with Briguy37 that the value "total": 0 is strange and of cause incorrect. Nevertheless jqGrid should do display all data.
I suppose that you have the problem in the part of your code which you not posted here. How you can see from the demo the code which you posted can do read and display the JSON data.

Here's a couple issues...haven't figured out why your results aren't getting populated yet, though:
Total in your returned JSON should be the number of pages. Because it is set to 0, that is why it is displaying 0. Also, you'll probably want to return rowCount as 10 in case you change the number of results per page.

You are missing a json reader, I had the exact same problem.
$("#list").jqGrid({
url : "my-json-table-action' />",
datatype: 'json',
jsonReader: {
root: 'gridModel',
id: 'idTT',
repeatitems: false,
},
resize: false,
hidegrid: false,
data: 'trabajosTerminales',
mtype: 'POST',
height: 'auto',
colNames:['No. de Registro', 'Título', 'Tipo', 'Periodo'],
colModel :[
{name:'numRegistro', index:'titulo', search: 'true', stype:'text', align:'center' searchrules:{required:true}, width:100 },
{name:'titulo', key:'true', index:'titulo', search: 'true', stype:'text', searchrules:{required:true}, width:800 },
{name:'tipo', key:'true', index:'tipo', search: 'true', stype:'text',align:'center', searchrules:{required:true}, width:100 },
{name:'periodo', key:'true', index:'titulo', search: 'true', stype:'text', searchrules:{required:true}, width:100 },
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
viewrecords: true,
gridview: true,
caption: 'Trabajos Terminales dirigidos',
});
jQuery("#list").navGrid('#pager',{edit:false,add:false,del:false});
});
Where the root element is the array that contains your data, in this case I'm returning my data in an array called 'gridModel', the id is not necessary. But you have to make sure to set the root element right, in your case it's called 'rows' instead 'gridModel'.