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.
Related
So, I am using jqGrid and due to the nature of this project, I need to build out the colModel dynamically. Meaning, I need to build the model itself dynamically. I am retrieving data fine with my JSON call.
So, I build an array of objects and then assign that array to the colModel property. No errors, but the data doesn't show up.... I am doing something very similar with colNames and it works fine. Does anyone see what I am missing? I have worked on this yesterday afternoon and all morning today and can't find any reason it shouldn't work.
As you can see, it am assigning the siteVal array at the top of my code to the colModel property.
var siteVal = [{name: 'InvtId', index: 'InvtId', width: 20, editable: false, sortable: false, align: 'left', hidden: true}];
siteVal.push({name: 'Descr', index: 'Descr', width: 320, sortable: false, editable: false, align: 'left'});
siteId.forEach(function(site){
curSite = site.substr(0,1)+"Val";
siteVal.push({name: curSite, index:curSite, width: 20, editable: false, sortable: false, align: 'left', hidden: true});
})
siteVal.push({name: 'Qty', index: 'Qty', width: 100, editable: true, sortable: false, align: 'right', hidden: true});
var colData = ['', 'Description'];
colData = colData.concat(siteId);
colData = colData.concat('Quantity');
console.log(colData);
jQuery("#list3").jqGrid({
url: 'OrdersInput.php?do=getdelvprice&state=' + $("#State").val() + '&city=' + $("#City").val() + '&FType=' + $("#FType").val() + '&siteid=' + $("#Plant").val(),
datatype: 'json',
mtype: 'GET',
colNames: colData,
colModel: siteVal,
loadonce: true,
height: 525,
width: 605,
rowNum: 1000,
key: false,
cellEdit: true,
cellsubmit: 'clientArray',
gridComplete: function() {
$("#MsgDel2").html("");
}
});
In using console.log to see the array right after I build it, this is what I get.
{"name":"InvtId","index":"InvtId","width":20,"editable":false,"sortable":false,"align":"left","hidden":true},
{"name":"Descr","index":"Descr","width":320,"sortable":false,"editable":false,"align":"left"},
{"name":"TVal","index":"TVal","width":20,"editable":false,"sortable":false,"align":"left","hidden":true},
{"name":"MVal","index":"MVal","width":20,"editable":false,"sortable":false,"align":"left","hidden":true},
{"name":"PVal","index":"PVal","width":20,"editable":false,"sortable":false,"align":"left","hidden":true},
{"name":"DVal","index":"DVal","width":20,"editable":false,"sortable":false,"align":"left","hidden":true},
{"name":"WVal","index":"WVal","width":20,"editable":false,"sortable":false,"align":"left","hidden":true},
{"name":"BVal","index":"BVal","width":20,"editable":false,"sortable":false,"align":"left","hidden":true},
{"name":"Qty","index":"Qty","width":100,"editable":true,"sortable":false,"align":"right","hidden":true}
This looks exactly as I think it should look in that it completely mimics the existing code where the colModel is defined statically. The thing is this must be dynamic to account for future growth...
I feel like a real idiot..... I was copying text from another line of code and didn't realize that I had included the last attribute... hidden:true
So, of course it wasn't showing up as I was telling it not to show. Guess that is what I get for copying and pasting code.
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.
Does Jqgrid allow us to add pager which we are using dataType local and don't want the whole data to be loaded at once. I am trying to do the same without success. It only shows the first page and show Page 1 Of 1 on the pager when there are many more records to be displayed.
Probably you fill the grid contain in the wrong way. Look at the example to see how you can use data parameter of jqGrid.
I have this same issue. I have a "local" jqgrid setup and it's showing my data but the pager values aren't completely accurate. Until I figured out that I needed to muck with the 'localReader' property. On the jqgrid wiki I saw that the jsonReader can have functions that define how to get the page, records, etc. It also states that the localReader can do whatever the jsonReader does so I gave it shot. Here's what I am doing.
var grid = $('#table').jqGrid({
datatype: 'local',
altRows: true,
colModel: [
{name: '0', label: "Name"},
{name: '1', label: "Color"},
],
pager: "#pager",
rowNum: 15,
sortname: '0',
viewrecords: true,
gridview: true,
height: '100%',
autowidth: '100%'
});
var reader = {
root: function(obj) { return results.rows; },
page: function(obj) { return results.page; },
total: function(obj) { return results.total; },
records: function(obj) { return results.records; },
grid.setGridParam({data: results.rows, localReader: reader}).trigger('reloadGrid');
My "results" is an object like this:
{page: "1", total: "70", records: "1045", rows:[.....]}
This seems to work as desired.
I'm trying to add buttons to a new top toolbar. I already have a toolbar at the top for search filtering, but I would like to place a new toolbar above it to add buttons for a menu.
The menu is the the same as the ones in the bottom left of the grid. Juse makes it easier for the user if they have row list set high, so they dont have to scroll down to the bottom.
What would be the best way to do this? Examples welcome, im pritty new to this.
This is my code to create the toolbar and buttons.
JS
// Toolbar
$("#customer_grid").jqGrid('filterToolbar', {searchOnEnter: false});
// Bottom left buttons
$("#customer_grid").jqGrid('navButtonAdd',"#customer_grid_pager",{caption:"Add Customer",title:"Add Customer",buttonicon :'ui-icon-plus',
onClickButton:function(){
}
});
$("#customer_grid").jqGrid('navButtonAdd',"#customer_grid_pager",{caption:"Clear",title:"Clear Search",buttonicon :'ui-icon-refresh',
onClickButton:function(){
$("#customer_grid")[0].clearToolbar()
}
});
$("#customer_grid").jqGrid('navButtonAdd',"#customer_grid_pager",{caption:"Close",title:"Close Search",buttonicon :'ui-icon-close',
onClickButton:function(){
}
});
Many Thanks
First of all I recommend you to read this and this old answer which describe how the toppager works. If you use toppager:true jqGrid option the additional pager toolbar will be created above the searching toolbar. If you use cloneToTop:true option of the navigator all standard navigation buttons will be added in the both toolbars. Because the name of the toppager will be constructed based on the fix rule from the id of the grid: "list_toppager" for the grid id="list" (in your case "customer_grid_toppager") you can use the same navButtonAdd method which you use to add the button to the top navigation bar like to the bottom navigation bar. You should just use another id of the pager ("#customer_grid_toppager" instead of "#customer_grid_pager" in your case).
I modified the demo from the answer for you to the following demo, which do what you need:
The corresponding code follows:
var mygrid = $("#list"),
pagerSelector = "#pager",
mydata = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"10",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"11",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"12",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"13",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"14",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"15",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"16",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"17",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"18",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
],
myAddButton = function(options) {
mygrid.jqGrid('navButtonAdd',pagerSelector,options);
mygrid.jqGrid('navButtonAdd','#'+mygrid[0].id+"_toppager",options);
};
mygrid.jqGrid({
datatype: 'local',
data: mydata,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id',width:70,sorttype:'int',
searchoptions:{sopt:['eq','ne','lt','le','gt','ge']}},
{name:'invdate',index:'invdate',width:80,align:'center',sorttype:'date',
formatter:'date',formatoptions:{srcformat:'Y-m-d', newformat:'d-M-Y'},
srcfmt:'d-M-Y', datefmt:'d-M-Y',
searchoptions: {
sopt:['eq','ne','lt','le','gt','ge'],
dataInit:function(elem) {
setTimeout(function() {
$(elem).datepicker({
dateFormat: 'dd-M-yy',
autoSize: true,
//showOn: 'button', // it dosn't work in searching dialog
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
},100);
}
}},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
height: '100%',
width: 720,
toppager: true,
gridview: true,
pager: pagerSelector,
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'id',
sortorder: 'asc',
viewrecords: true,
caption: 'Add buttons to both top and bottom toolbars'
});
mygrid.jqGrid('navGrid',pagerSelector,
{cloneToTop:true,edit:false,add:false,del:false,search:true});
mygrid.jqGrid('filterToolbar',
{stringResult:true, searchOnEnter:true, defaultSearch:'cn'});
myAddButton ({
caption:"Add Customer",
title:"Add Customer",
buttonicon :'ui-icon-plus',
onClickButton:function(){
alert("Add Customer");
}
});
myAddButton ({
caption:"Clear",
title:"Clear Search",
buttonicon:'ui-icon-refresh',
onClickButton:function(){
mygrid[0].clearToolbar();
}
});
myAddButton ({
caption:"Close",
title:"Close Search",
buttonicon:'ui-icon-close',
onClickButton:function(){
alert("Close Search");
}
});
I am facing problem with pagination in jqgrid with array data having 18 records, but the records are not displaying in pages even I specified pagination:true,pager:jQuery('#pager1'). Can you please help me to implement pagination instead of scrolling.
<script type="text/javascript">
jQuery("#list4").jqGrid({
datatype: "clientSide",
height: 200,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
multiselect: true,
pagination:true,
pager:jQuery('#pager1'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'id',
sortorder: 'asc',
viewrecords: true,
page: 1,
loadonce: true,
totalpages: 2,
totalrecords:18,
showpage:true,
imgpath: "/themes/default/images",
caption: "Manipulating Array Data"
});
var mydata = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"10",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"11",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"12",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"13",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"14",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"15",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"16",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"17",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"18",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
];
for(var i=0;i<=mydata.length;i++)
jQuery("#list4").addRowData(i+1,mydata[i]);
You main problem is you should reset rowNum after the adding the large number of rows. The line
jQuery("#list4").setGridParam({ rowNum: 10 }).trigger("reloadGrid");
at the end of your code will fix the problem. I recommend you to add the line
jQuery("#list4").jqGrid('navGrid','#pager1',{edit:false,add:false,del:false});
directly after the definition of the jqGrid. You will then have not only data paging, but also data filtering (searching) and refresh (reset filter).
Some more small remarks:
in the definition of the mydata array you should remove ',' before ']'.
in the for loop you should use i<mydata.length instead of i<=mydata.length.
you should remove from the definition of jqGrid following parameters which are either non existent (like pagination) or have no sense in the context (like loadonce: true): pagination, page, loadonce, totalpages, totalrecords, showpage, imgpath.
You receive the best results if you constructs jqGrid with respect of data: myData parameter, or set all data from mydata at once (see description of addRowData method in http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#array_data).
Oleg is correct.
Adding jQuery("#list4").setGridParam({ rowNum: 10 }).trigger("reloadGrid");
works.
Although it might not work if formatter property is set where the rowObject values will be undefined.(if they are used)
Therefore make sure in your formatter method u always check for their availability.
e.g.
function getFormattedFileName(cellvalue, options, rowObject) {
if(!rowObject.fileName) {// this is due to ...trigger("reloadGrid");
return cellvalue; // the value is already formatted, let's just return it
}
return rowObject.fileName.trim();
}