Develop Reference

How add new row in jqGrid

enter image description here
I got a jqgrid, and I am trying to add a row by click the "+" botton, which is marked red. But the template is blank.
Below is scripts in JavaScripts.
$("#table_list_1").jqGrid({
url: "usermanage/getMainTableJson",
datatype:"json",
mytype:"GET",
height: 250,
autowidth:true,
colNames:['id','username','realname','email','createtime','updatetime'],
colModel:[
{name:'id',index:'id', width:'10%',align:'center'},
{name:'username',index:'username', width:'15%',align:'center'},
{name:'realname',index:'realname', width:'20%', align:"center"},
{name:'email',index:'email', width:'25%', align:"center"},
{name:'createdate',index:'createdate', width:'15%', align:"center", sortable:false},
{name:'updatedate',index:'updatedate', width:'15%',align:"center", sortable:false}
],
rownumbers:false,
sortname:'id',
sortorder:'asc',
viewrecords:true,
rowNum:10,
rowList:[10,20,40],
pager:$('#pager_list_1'),
add:true,
edit:true,
addtext:'Add',
edittext:'Edit'
});
$("#table_list_1").jqGrid('navGrid', '#pager_list_1',
{edit: true, add: true, del: true, search: true},
{height: 200, reloadAfterSubmit: true}
);

You should add editable: true property to the column, which you want to allow to edit. You can use cmTemplate property to specify default values for any property. Thus you can use for example the option
cmTemplate: { editable: true }
and to add editable: false to the column id. As the result all properties with exception id will be seen in the Add/Edit dialog.

Unexpected behavior in jqGrid when trying to setRowData

I am working on a task where I need to update entire row data in jqgrid.
Here is a sample fiddler: https://jsfiddle.net/99x50s2s/47/
In the above fiddler, please update a row and then try to scroll to the right.
Code:
var $thisGrid = jQuery("#sg1");
$thisGrid.jqGrid({
datatype: "local",
gridview: true,
loadonce: true,
shrinkToFit: false,
autoencode: true,
height: 'auto',
width: 400,
viewrecords: true,
sortorder: "desc",
scrollrows: true,
loadui: 'disable',
colNames:["", 'Inv No', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{
name: "Symbol", index: "Symbol", width: 70, align: 'center', frozen: true,
formatter: function (cellValue, options, rowObject) {
return '<button class="btn btn-info btn-xs update" type="button" title="Update" >' +
'<span class="glyphicon glyphicon-remove-circle"></span> Update</button>';
}
},
{name:'id',width:60, sorttype:"int"},
{name:'name', width:100},
{name:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax', width:80, align:"right",sorttype:"float"},
{name:'total', width:80,align:"right",sorttype:"float"},
{name:'note', width:150}
],
caption: "Test Data",
onCellSelect: function (rowid,
iCol,
cellcontent,
e) {
if (iCol == 0) {
var newdata = [
{id:"1",name:"new test1 name for testing purpose",note:"new note1",amount:"500.00",tax:"50.00",total:"510.00"},
];
$thisGrid.jqGrid('setRowData', rowid, newdata[0]);
}
}
}).jqGrid('setFrozenColumns');
var mydata = [
{id:"1",name:"test1",note:"note1",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",name:"test3",note:"note3",amount:"400.00",tax:"25.00",total:"360.00"},
{id:"4",name:"test4",note:"note4",amount:"500.00",tax:"60.00",total:"350.00"},
{id:"5",name:"test5",note:"note5",amount:"600.00",tax:"70.00",total:"340.00"}
];
for(var i=0;i<=mydata.length;i++)
$thisGrid.jqGrid('addRowData',i+1,mydata[i]);
I am wondering how I can fix this behavior? Any help is appreciated.
Note:
jqGrid version: 4.6.0
Applied: Frozen column and cell text wrap.
EDIT:
snapshot taken from the fiddler with solution:

I wrote you already in the past that the version 4.6.0 don't support editing of grids with frozen columns.
To make the code working one have to do many things after every change of the grid content. One have to adjust position of frozen divs and to set explicitly the height and the width of every row in the frozen div. You can find examples from the code which one have to use here and here.
There are exist more easy solution now. If you just replace the version jqGrid 4.6 to the current one code of free jqGrid from github
<link href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css" rel="stylesheet"/>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/i18n/grid.locale-en.js"></script>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
then your code start working as expected: https://jsfiddle.net/OlegKi/99x50s2s/48/
So you can either to do many things yourself or to get the code which already do this.

ExtJS 4 Grid unwanted scrolling on load and node selection

I have a problem with the ExtJS 4 grid. I am using ExtJS 4.2.1, and whenever I load data into my grid using the loadRawData function, it automatically scrolls to the bottom, or near the bottom. Also, I am using grouping in the grid, and whenever I expand or collapse the node, it auto scrolls to the bottom again. This is really frustrating, and I can't seem to find a solution. I tried any solutions in this post from the Sencha forums, but nothing seemed to work.
This is my grid config:
gridPanel = new Ext.grid.Panel({
header: false,
title: 'Resultset',
id: 'resultTable',
width: 400,
split: true,
collapsible: true,
collapseMode: 'mini',
store: {
model: 'resultset',
autoLoad: false,
pageSize: 100,
proxy: {
type: 'ajax',
url: STORE_URL,
reader: {
type: 'json',
root: 'rows'
}
},
groupField:'tid'
},
features: [{ftype:'grouping'}],
deferRowRender: false,
columns: createColumns(),
selModel: {
checkOnly: true,
moveEditorOnEnter: false,
width: 20,
mode: 'MULTI'
},
selType: 'rowmodel',
tbar: [ createMenubar() ],
bbar:[ createPagingBar() ],
/*viewConfig: {
preserveScrollOnRefresh: true
}*/
});
And then when I load the data, I just do something like this:
var store = gridPanel.getStore();
store.loadRawData(data, false);
Any help would be appreciated!

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.

Jqgrid and Zend framework trouble

I have a list of products on my site. I draw it with jqGrid. Also I have a form, to create new product, or update existing one. Is there any way to set in jqGrid, that when I press 'edit' button in grid, it redirects me to page like
'mysite/product/edit/id/{id}'
Here is my grid script:
$(document).ready(function() {
$("#list").jqGrid({
url:'product/getjson',
datatype: "json",
colNames:['id','Name', 'description', 'Publication date','Picture'],
colModel:[
{name:'id',index:'id', width:55},
{name:'name',index:'name', width:90},
{name:'description',index:'description', width:200},
{name:'pubDate',index:'pubDate', width:200, align:"right"},
{name:'picPath',index:'picPath', width:200, align:"right"},
],
rowNum:10,
rowList:[10,20,30],
pager: '#pager2',
sortname: 'id',
viewrecords: true,
sortorder: "desc", caption: 'Products'});
$("#list").jqGrid('navGrid','#pager2',{edit:true,add:true,del:true});
})

You can change url with respect of onclickSubmit function (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#editgridrow):
$("#list").jqGrid({
url:'product/getjson',
// ...
});
$("#list").jqGrid('navGrid','#pager2',{edit:true,add:true,del:true},
{ onclickSubmit: function(rp_ge, postdata) {
rp_ge.url = 'mysite/product/edit/id/' + postdata.list_id;
}
});

Try to add editurl field in your config:
$("#list").jqGrid({
editurl:'mysite/product/edit/'
});
id will be passed in row data