Related
I am playing a little bit with the jqGrid setup and some things aren't clear to me like the proper usage of pager. The idea is to add some custom buttons to the top and bottom bars.
This is the code I have been playing with:
$("#order_logs").jqGrid({
url: 'api_order_logs',
datatype: "json",
colModel: $('#colmodel').data('values'),
width: 980,
height: 300,
pager: true,
toppager: true,
hoverrows: true,
shrinkToFit: true,
autowidth: true,
rownumbers: true,
viewrecords: true,
rowList: [25, 50, 100],
data: [],
rownumWidth: 100,
iconSet: "fontAwesome",
gridview: true,
sortable: {
options: {
items: ">th:not(:has(#jqgh_grid_cb,#jqgh_grid_rn,#jqgh_grid_actions),:hidden)"
}
},
jsonReader: {
root: 'rows',
page: 'page',
total: 'total',
records: 'records',
cell: '',
repeatitems: false
},
cmTemplate: {autoResizable: true, editable: true},
autoResizing: {compact: true, resetWidthOrg: true},
autoresizeOnLoad: true,
forceClientSorting: true
}).jqGrid('navGrid', '#gridpager', {
edit: false,
add: false,
del: false,
search: false,
refresh: true,
refreshstate: "current",
cloneToTop: true
}).jqGrid('navButtonAdd', '#gridpager', {
caption: 'Export',
title: 'Export',
buttonicon: 'fa fa-download',
onClickButton: function () {
// #todo
}
}).jqGrid('navButtonAdd', '#gridpager', {
caption: 'Email',
title: 'Email',
buttonicon: 'fa fa-envelope-o',
onClickButton: function () {
// #todo
}
}).jqGrid('navButtonAdd', '#gridpager', {
caption: 'Print',
title: 'Print',
buttonicon: 'fa fa-print',
onClickButton: function () {
// #todo
}
});
With the usage of pager: true the grid display as follow:
Meaning no custom buttons at top nor bottom.
With the usage of pager: #gridpager the grid display as follow:
Meaning only custom buttons on the bottom bar but not on the top one.
Certainly I am missing something but I can't find what that is. I've been checking some docs here, here and last here but still not clear to me how to deal with this in the right way.
In addition to this if you notice I am trying to use the fontAwesome iconset but images are missing, should I add the CSS file on my templates?
PS: I am using the latest version of jqGrid-free
It's very easy. Which sense is repeating the same value '#gridpager' as jqGrid option, as the parameter of navGrid and navButtonAdd?
jqGrid can contain maximal two pagers: bottom pager and top pager. The top pager can be created by usage of the option toppager: true. You don't use the option toppager: true. Then the only legal value of the first parameter of navGrid and navButtonAdd will be '#gridpager'. Correct?
Now, one can use getGridParam method to get any option of jqGrid after the grid is created. For example one can get the value of pager parameter using
var pagerIdSelector = $("#order_logs").jqGrid("getGridParam", "pager");
Free jqGrid allows to use
}).jqGrid('navGrid', { ... });
instead of
}).jqGrid('navGrid', '#gridpager', { ... });
It tests the type of the first parameter. If the type of the first parameter isn't "string" then it uses $(this).jqGrid("getGridParam", "pager") to get the value.
Now we can remind about the possibility to use toppager: true to create top pager. In the case jqGrid creates an empty <div> for the top pager, it generates, it assigns unique id for the <div>. Finally jqGrid changes the value of toppager parameter from true to the value like #order_logs_toppager, there the first part of the id (order_logs) is the id of the grid. Free jqGrid allows to use true as the value of pager parameter. In the case one can simplify the HTML and remove unneeded empty div
<div id="gridpager"><div>
If one uses both pager: true and toppager: true options and uses navGrid or navButtonAdd without pager parameters then jqGrid places the buttons on both pagers. If you need to place some buttons only on one pager then you can use the code like below. If place some buttons on both pagers and then place another buttons on specific pagers:
var $grid = $("#order_logs");
$grid.jqGrid({
...
pager: true,
toppager: true,
...
});
// create nav bar and place Refresh button on both pagers
$grid.jqGrid('navGrid', {
edit: false,
add: false,
del: false,
search: false,
refreshstate: "current",
});
var bottomPagerIdSelector = $grid.jqGrid("getGridParam", "pager"),
topPagerIdSelector = $grid.jqGrid("getGridParam", "toppager");
// place Export button only on bottom pager
// and Email button only on top pager
$grid.jqGrid('navButtonAdd', bottomPagerIdSelector, {
caption: 'Export',
title: 'Export',
buttonicon: 'fa fa-download',
onClickButton: function () {
// #todo
}
}).jqGrid('navButtonAdd', topPagerIdSelector, {
caption: 'Email',
title: 'Email',
buttonicon: 'fa fa-envelope-o',
onClickButton: function () {
// #todo
}
});
The final remarks. You use forceClientSorting: true option, which works only in combination with loadonce: true. jqGrid can sort all the data only it it has all data.
The value of sortable parameter is wrong. The selectors like jqgh_grid_cb contains "grid" in the middle, which should be the id of the grid. In your case it could be "order_logs" instead of "grid" (jqgh_grid_cb shoule be replaced to jqgh_order_logs_cb).
We are building a heads-down data entry application using Kendo, and make heavy use of Kendo Grid. Using selectable='row' or selectable='col' in the grid is problematic because the user is entering data without using the mouse, but navigating the grid using tab key. The visual row/cell selector does not follow the actual active row and cell.
Question: How can I get the row index and/or the uid of the row in the grid with selectable turned off and without using grid.select()?
Here's the grid setup code:
$("#" + target).kendoGrid({
dataSource: gridDs,
edit: gridCellEdit,
height: applet.height,
editable: {
createAt: 'bottom'
},
filterable: true,
sortable: true,
navigatable: true,
resizable: true,
reorderable: true,
scrollable: { virtual: true },
columns: gridColumns,
dataBound: monitorKeyboard
}
});
function gridCellEdit(e) {
var uid = $('#grid_active_cell').closest('tr').data('uid');
console.log(uid);
}
Use whatever means you have at hand to resolve the row element the user is currently on and then simply do:
$(target-tr).data('uid');
If I'm understanding your question correctly, this will be
$('#grid_active_cell').closest('tr').data('uid');
If I misunderstood, please elaborate.
Answer: You can reference the uid field directly using e.model.uid. For example:
$("#" + target).kendoGrid({
dataSource: gridDs,
edit: gridCellEdit,
height: applet.height,
editable: {
createAt: 'bottom'
},
filterable: true,
sortable: true,
navigatable: true,
resizable: true,
reorderable: true,
scrollable: { virtual: true },
columns: gridColumns,
dataBound: monitorKeyboard
}
});
function gridCellEdit(e) {
console.log(e.model.uid);
}
I have applied custome scrollbar to div "ui-jqgrid-bdiv",sorting is not working of jqgrid.Without custom scrollbar sorting is working fine.After applying custom scrollbar,after clicking on column it is giving blank grid.
CODE:-
$(window).load(function(){
$(".FilterContainer,.ui-jqgrid-bdiv").mCustomScrollbar({
scrollButtons:{enable:true},
theme:"light-thick"
});
});
jQuery(gridOption).jqGrid({
data: applyBestMachineData,
datatype: "local",
colNames:[displayName,'', 'kA$','%','kA$','%','kA$','%'],
colModel:[
{name:'machineBestMachine',index:'machineBestMachine',width:350, sortable: false,classes: "machineBestMachinecol"},
{name:'machineValue',index:'machineValue', width:60,sortable: false, classes: "machineValue"},
{name:'applyBestMachineValue',index:'applyBestMachineValue', width:75,sortable: true, classes: "col2",sorttype:"text"},
{name:'applyBestMachinePer',index:'applyBestMachinePer', width:75, align:"center", sortable: true,classes: "col1",sorttype:"text"},
{name:'applyBestMachineOperation',index:'applyBestMachineOperation', width:65, align:"center",sortable: true, classes: "col2",sorttype:"text"},
{name:'applyBestMachineOperationPer',index:'applyBestMachineOperationPer', width:65,align:"right", sortable: false,classes: "col1"},
{name:'applyBothValue',applyBothValue:'applyBothValue', width:65,sortable: false, classes: "col2"},
{name:'applyBothPer',index:'applyBothPer', width:65,sortable: false, classes: "col1"}
],
rowNum:2000,
rowTotal: 2000,
scroll:1,
loadonce:true,
mtype: "GET",
rownumWidth: 40,
gridview: true,
autowidth: true,
height:gridHeight,
//sortable: false,
viewrecords: true,
onSelectRow: function(id) {
var rowData = jQuery(this).getRowData(id);
var machineBestMachineVar = rowData['machineBestMachine'];
var machineBestMachineValue = machineBestMachineVar.split('<');
openEvaluationItemDetailPopUp(machineBestMachineValue[0]);
},
loadComplete: function() {
//alert(this);
$(gridOption+" tr:even").addClass('myAltRowClassEven');
$(gridOption+" tr:odd").addClass('myAltRowClassOdd');
// $("#applyMachineGrid tr:even").addClass('myAltRowClassEven');
// $("#applyMachineGrid tr:odd").addClass('myAltRowClassOdd');
}
});
I got answer:-
Just remove scroll=1 property
I actual got a problem with my jqGrid and I couldn't find any similar problem on the net. Maybe I don't took the write tags for it, sorry tho.
Okay lets start talking about the real problem. I'm using inline editing, and I customized the buttons a bit. I wanna use "ENTER" and "ESC"-Keys as shortcuts. This works fine. I'm manipulating the data in my grid local and only if the user is pressing a specialised button I'll save the data in a file. This files are used to fill the grid too. So if the user now is editing any row in the grid which isn't in my file yet, and he is canceling the editing by pressing ESC, the complete row of data is getting deleted.
Anyone who can help me out? My grid:
// Table
jQuery("#tbl").tableDnD({scrollAmount:0});
jQuery("#tbl").jqGrid({
url:'../path/to/my/script.pl',
datatype: "json",
postData:{'art':'empfang'},
jsonReader: {
repeatitems: false
},
colNames:['1','2','3','4','5'],
colModel:
[
{name:'1',index:'1', width:200, align:"left", sortable:true,editable:true, edittype:"text"},
{name:'2',index:'2', width:200, align:"left", sortable:true,editable:true, edittype:"select",editoptions:{value:b}},
{name:'3',index:'3', width:200, align:"left", sortable:true,editable:true, edittype:"text"},
{name:'4',index:'4', width:220, align:"left", sortable:true,editable:true, edittype:"select",editoptions:{value:""}},
{name:'5',index:'5', width:200, align:"left",sortable:true,editable:true, edittype:"select",editoptions:{value:""}}
],
rowNum:2000,
rowTotal: 2000,
loadtext: 'Reading data...',
height: '100%',
width: '100%',
hidegrid: false,
sortable: true,
toppager: true,
gridview: true,
viewrecords: true,
rownumbers: true,
loadonce: true,
editurl: 'dummy.php',
pager: '#tbl_toppager',
loadComplete: function(data){
$("#tbl").setColProp('4', { editoptions: { value: data.userdata.4} });
$("#tbl").setColProp('5', { editoptions: { value: data.userdata.directory_listing} });
},
gridComplete: function() {
$("#_empty","#tbl").addClass("nodrag nodrop");
jQuery("#tbl").tableDnDUpdate();
},
caption: "Testgrid",
ondblClickRow: function(id){
jQuery('#tbl').editRow(id, true);
}
});
jQuery("#tbl").jqGrid('filterToolbar');
jQuery("#tbl").jqGrid(
'navGrid',
'#tbl_toppager',
{
del: true,
add: false,
edit: false,
refresh: false,
search: true
},
{
}, // edit options
{
}, // add options
{
reloadAfterSubmit: false,
jqModal: true,
closeOnEscape: true
}, // del options
{
jqModal: true,
closeOnEscape: true
} // search options
);
jQuery("#tbl").jqGrid(
'inlineNav',
'#tbl_toppager',
{
editParams: { keys: true },
addParams: { addRowParams: { keys: true } }
}
); // Inline Editing
jQuery("#tbl_toppager_right").hide();
jQuery("#tbl_toppager_center").hide();
jQuery("#tbl").navSeparatorAdd(
"#tbl_toppager_left",
{
sepclass : "ui-separator",
sepcontent:""
}
).jqGrid(
'navButtonAdd',
'#tbl_toppager_left',
{
caption: "",
buttonicon: "ui-icon-document",
title: "Save data in file",
position: "last",
onClickButton: function () {
$("#write_file").dialog('open');
}
}
);
Thanks in advice. Regards.
In the official demo of JQGrid they provide an example which do nearly the same of what you request
...
onSelectRow: function(id){
if(id && id!==lastsel){
jQuery('#rowed3').jqGrid('restoreRow',lastsel);
jQuery('#rowed3').jqGrid('editRow',id,true);
lastsel=id;
}
}
...
where lastsel is a global variable
So you can use jQuery('#rowed3').jqGrid('restoreRow',idOfLineToRestore);
in your escape event
Grid cant load data from servlete and page navigation not work but when make "loadonce:false" grid load but not page navigation wrok -
jQuery("#list").jqGrid({
url:'JQGridServlet?action=fetchData',
datatype: "xml",
height: 550 ,
width:840, // 'B2C' 'AD''AC'
colNames:['srNo','DNO','C_Id','Customer_Name','FR','PA','mty','Act','Location','Detail_Address'],
colModel:[
// {name:'act1',index:'act1', width:20,sortable:false},
{name:'srNo',index:'srNo', width:35,sortable:true,editable:false,hidden:true},
// {name:'delboy',index:'delboy', width:35,sortable:true,editable:false},
{name:'DNO',index:'DNO', width:33,sortable:true,editable:false,editoptions: { readonly: 'readonly' },focus:false},
{name:'FR',index:'FR', width:25,sortable:false,editable:true,editrules:{number:true}},
{name:'PA',index:'PA', width:25,sortable:false,editable:true,editrules:{edithidden:true,number:true}},
{name:'mty',index:'mty', width:25,sortable:false,editable:true,editrules:{edithidden:true,number:true}},
{name:'act',index:'act', width:13,sortable:false},
{name:'Location',index:'Location', width:50,sortable:false},
{name:'Detail_Address',index:'Detail_Address',width:150,sortable:false
}
],
paging: true,
rowNum:50,
rowList:[50,100,150],
pager: $("#page"),
sortname: 'DNO',
sortorder: 'asc',
sortable: true,
footerrow: true,
userDataOnFooter: true,
//loadonce:true,
viewrecords:true,
gridview: true,
altRows : true,
onSelectRow : function(id)
{
if (id && id !== lastsel)
{
// alert(parseInt(id)+1);
DNO = $('#list').getCell(id,'DNO');
jQuery("#list").jqGrid('setGridParam',{editurl: 'JQGridServlet?action=Edit&DNO='+DNO});
jQuery('#list').saveRow(lastsel, true, 'clientArray');
jQuery('#list').editRow(id, true, null, null);
jQuery("#list").jqGrid('restoreRow',lastsel);
lastsel = id;
}
},
//MY servelet code:
if (request.getParameter("action").equals("fetchData"))
{
System.out.println("in fetchData");
}
but not go in side that action when "loadonce:true".
please any body suggest to how to solve this problem.