I'm using jqGrid in my client side development. The truth is that I didn't choose it, it was integrated by other developer in entry development level and now there it is late to do something about that.
There is some functionality that I'm trying to change. I have a column of checkboxes and checkboxes are also selected on row click. I want this to work in another way - there must be no connection between checkbox and row state - so I want to disable checkbox select on row click. Is there any way to do this using the plugin?
$(this.options.grid).jqGrid({
height: 'auto',
width: width,
shrinkToFit: true,
colNames: columns.colNames,
colModel: columns.colModel,
rowNum: pageSize,
rowList: pageSizeValues,
viewrecords: true,
multiselect: true,
multiboxonly: true,
deepempty: true,
subGrid: false,
scrollrows: true,
altRows: true,
altclass: 'ui-widget-content-alt-row',
datatype: 'clientSide',
pager: pager,
toppager: false,
sortname: this.options.sortByVal,
sortorder: this.options.sortDirectionVal,
sortable: true,
jsonReader: reader,
editurl: 'clientArray',
beforeSelectRow: function(rowId, e) {
return true;
},
onSelectRow: function(rowId, status) {
return true;
},
Related
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.
I'm loading local file (I'm parsing csv file into json and then transfer the array to jqGrid). Table generated through jqGrid should allow user to modify, add and delete the data in the grid. Everything seemed to work perfectly until I wanted to add a row to my grid. One of the columns had a parameter key = true which is my id for the rows. When I try to add new row, the grid changes my id into jpg1. The others columns are fine. Below is the code I'm using:
$("#jqGrid").jqGrid({
datatype: "local",
data: myData,
editurl: "clientArray",
colModel: [
{
label: 'Kod',
name: 'Kod',
width: 60,
editable: true,
key: true,
sorttype: 'number'
},
{
label: 'Firma',
name: 'Firma',
width: 120,
editoptions:
{
size: 40,
sopt:['cn']
},
editable: true,
sorttype: 'string'
},
{
label: 'Adres',
name: 'Adres',
width: 80,
editoptions: {size: 40},
editable: true
},
{
label: 'Miasto',
name: 'Miasto',
width: 80,
editoptions:
{
size: 40,
sopt:['cn']
},
editable: true
}
],
height: 'auto',
autowidth: true,
shrinkToFit: false,
forceFit: false,
autoencode: true,
viewrecords: true,
caption: "Title",
pager: "#jqGridPager",
sortable: true,
ignoreCase: true,
sortname: 'Kod',
sortorder: 'asc',
rowNum: 5,
rowList: [5, 10, 20, "10000:All"],
ondblClickRow: function(rowid) {
$("#jqGrid").jqGrid('editGridRow', rowid,
{
editCaption: "The Edit Dialog",
zIndex:100,
recreateForm: true,
closeAfterEdit: true,
width: 900,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
});
}
});
$('#jqGrid').jqGrid('navGrid',"#jqGridPager",
{ edit: true, add: true, del: true, search: false, refresh: true, view: true, cloneToTop: true},
// options for the Edit Dialog
{
editCaption: "The Edit Dialog",
zIndex:100,
recreateForm: true,
closeAfterEdit: true,
reloadAfterSubmit: true,
width: 900,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Add Dialog
{
width: 900,
zIndex:100,
closeAfterAdd: true,
recreateForm: true,
reloadAfterSubmit: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Delete Dialog
delSettings,
// options for the Search Dialog
{
zIndex:100
},
// options for the View Dialog
{
width: '100%'
});
I'm attaching a screenshot that shows a problem:
Photo
The data I use is a file parsed into JSON array via Papaparse.js plugin.
EDIT:
I've added the test data if somebody would like to test the code.
var myData = [];
myData.push(
{
Kod: 1.1,
Firma: 'Hutchinson',
Adres: '5th Avenue',
Miasto: 'Wroclaw'
},
{
Kod: 2.1,
Firma: 'BMW',
Adres: '6th Avenue',
Miasto: 'Warsaw'
});
I will be grateful for any help.
If you need the grid only for local editing, you can consider just remove key: true property to solve the problem. It's the way, which I would recommend you. You can include id property in the input data which will be used as value of rowid (id of <tr> elements).
Alternatively you can change the block "options for the Add Dialog" to the following
// options for the Add Dialog
{
width: 900,
zIndex:100,
closeAfterAdd: true,
recreateForm: true,
reloadAfterSubmit: true,
onclickSubmit: function (options, postdata, frmoper) {
// save Kod in some other parameter
return {myKod: postdata.Kod};
},
afterSubmit: function (jqXHR,postdata, frmoper) {
// restore the correct value
postdata.Kod = postdata.myKod;
// inform jqGrid that it was not an error
return [true];
}
},
You still don't would be able to change the id of the row in the way.
By the way you wrote that you use jqGrid 4.7.1. I want remind you that jqGrid 4.7.0 is the last version which is free. It's the reason why I started free jqGrid project which still free. You can get it here (see readme and wiki).
The demo shows an example of the above code fixes using free jqGrid 4.8.
I was doing some tests and i want to move to another on loadlComplete in, but the grid dont reload.
If i exectue this statement on firebug the grid reload: jQuery("#participations").jqGrid('setGridParam',{page:2}).trigger("reloadGrid");
Why this dont work on loadcomplete?
jQuery("#participations").jqGrid({url:'bd/getParticipations_pageable.php',
datatype: "json",
postData:{contestId:contestId},
width:920,
height: "auto",
scrollOffset:0,
colNames:['','Participação', 'Email','Nome','Telemóvel'],
colModel:[
{name:'id',index:'id', width:210, sorttype:'int', hidden:false, sortable:false},
{name:'participation',index:'participation',sortable:false},
{name:'email',index:'email',width:35,sortable:false},
{name:'name',index:'name',width:35,sortable:false},
{name:'moreInfoBtn',index:'moreInfoBtn', width:43,sortable:false}
],
rowNum:15,
hidegrid: false,
pager: '#participationsPager',
sortname: 'id',
sortorder: "desc",
caption:"Participações",
gridComplete: function(){
var ids = jQuery("#participations").jqGrid('getDataIDs');
var rows = jQuery("#participations").jqGrid('getRowData');
var mydata = $("#participations").jqGrid('getGridParam','data');
jQuery("#participations").jqGrid('setGridParam',{page:2}).trigger("reloadGrid");
}
,loadComplete:function(){
},
}).navGrid("#participationsPager",{edit:false,add:false,del:false,search:false});
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.
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.