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).
Related
I have a grid that when the page is changed the scrollbar is still at the bottom of the grid. Is there a property in the jqgrid for it to automatically scroll back to the top of the grid.
Here are the properties for my grid:
options = {
datatype: 'local',
colModel: [],
colNames: [],
height: 'auto',
autowidth: true,
forceFit: true,
shrinkToFit: typeof(settings.shrink) != "undefined" ? false : true,
gridview: true,
recordpos: 'left',
scroll: false,
viewrecords: true,
hoverrows: false,
loadonce: true,
toppager: 'pager',
pagerpos: 'right',
pginput: false
}
After some more reasearch I found the answer. JQGrid also has a pagerOptions.onPaging event which allows you to execute code when changing pages.
Here is the fix I used.
pagerOptions.onPaging = function () {
window.scrollTo(0, $("#header").height());
};
When the page changes it scrolls the page up until the header.
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 am really new to the jqGrid. 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. I tried to resolve my problem using various answers from here like:
Adding new row to jqGrid using modal form on client only
There I have found the example made by Oleg for the 4.7 version of jqGrid and reproduced the same code for my purpose. The result was that I am able to delete row which I added after the grid initialisation but I am unable to delete any other row which was loaded from the array.
Another interesting thing is that I am able to modify the rows loaded from array, the only thing I cannot do with the grid is to delete rows loaded from array. I appreciate any advices.
Here is part of the code with jqGrid:
var delSettings = {
onclickSubmit: function () {
var $this = $(this), p = $this.jqGrid("getGridParam"), newPage = p.page;
if (p.lastpage > 1) {// on the multipage grid reload the grid
if (p.reccount === 1 && newPage === p.lastpage) {
// if after deliting there are no rows on the current page
// which is the last page of the grid
newPage--; // go to the previous page
}
// reload grid to make the row from the next page visable.
setTimeout(function () {
$this.trigger("reloadGrid", [{page: newPage}]);
}, 50);
}
return true;
}
};
$("#jqGrid").jqGrid({
datatype: "local",
data: results.data,
editurl: "clientArray",
colModel: [
{
label: 'Id',
name: 'Id',
width: 60,
editable: true,
key: true,
sorttype: 'number'
},
{
label: 'Company',
name: 'Company',
width: 90,
editoptions: {size: 40},
editable: true,
sorttype: 'string'
},
{
label: 'Address',
name: 'Address',
width: 100,
editoptions: {size: 40},
editable: true
},
{
label: 'City',
name: 'City',
width: 80,
editoptions: {size: 40},
editable: true
}
],
height: '100%',
viewrecords: true,
caption: "Baza klientów Klimatest",
pager: "#jqGridPager",
sortable: true,
ignoreCase: true,
cmTemplate: {editable: true, searchoptions: {clearSearch: true }},
rowNum: 5,
rowList: [5, 10, 20],
});
// toolbar searching
$('#jqGrid').jqGrid('filterToolbar', { defaultSearch: 'cn'});
$('#jqGrid').jqGrid('navGrid',"#jqGridPager",
{ edit: true, add: true, del: true, search: true, refresh: true, view: true},
// options for the Edit Dialog
{
editCaption: "The Edit Dialog",
recreateForm: true,
closeAfterEdit: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Add Dialog
{
closeAfterAdd: true,
recreateForm: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Delete Dialog
delSettings,
// options for the Search Dialog
{
},
// options for the View Dialog
{
});
// add first custom button
$('#jqGrid').navButtonAdd('#jqGridPager',
{
buttonicon: "ui-icon-calculator",
title: "Column chooser",
caption: "Columns",
position: "last",
onClickButton: function() {
// call the column chooser method
jQuery("#jqGrid").jqGrid('columnChooser');
}
});
EDIT
Data source is the result of parsed CSV file via Papaparse.js plugin (array of objects), which looks like this:
Id: "100,1"
Address: "Strefowa 8"
Company: "DSSE Sp. z o.o."
City: "Warsaw"
I edited the code just like Oleg suggested and I'm still able to delete only records which are added via interface of jqGrid.
I don't know if it may help, but when I click delete icon and confirm that I want to delete selected row, that row is no longer highlighted, but still visible. Thanks for feedback.
You have clear error in your code near // options for the View Dialog block. The View option should be included after delete and search options (see the documentation). So your current code don't use delSettings options.
I recommend you additionally to include test data in your next questions, because some problems exist only with some specific format of input data.
UPDATED: The problem is in the data which you use. The value for Id which you use contains comma ("100,1"). It's not allowed for jqGrid. First of all id in HTML should not use characters which have special meaning in CSS. The second problem: delGridRow method uses commas in separator to delete multiple rows at once. So the usage of id="100,1" will follows to attempt to delete tow rows: one row with id=100 and the second one with the id=1. By the way I'm developing now jqGrid in my fork of GitHub. I fixed many restrictions with the usage of special characters in ids. So you will be do able to use id="100,1" and successfully delete the rows if you would use jqGrid from my fork.
I recommend you to use underscore if you need to construct id which consist from multiple numbers: Id: "100_1" instead of Id: "100,1".
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
Hi I am trying to get showlink formatter working by following this document from trirand.
What I want to achieve is a hyperlink I can click for a edit view to update/edit records. But for some reason, the column are empty where I want show a hyperlink.
Here is my code snippets, and link is the last column:
<script type="text/javascript">
$(document).ready(function () {
$("#grid_products").jqGrid({
jsonReader: {
repeatitems: false,
id: 'Guid'
},
url: '/Product/jqgridJSON/',
datatype: 'json',
mtype: 'GET',
colNames: ['ProductCode', 'ProductDescription', 'DefaultSellPrice', 'LastCost', 'Edit'],
colModel: [
{ name: 'ProductCode', index: 'Productcode' },
{ name: 'ProductDescription', index: 'ProductDescription' },
{ name: 'DefaultSellPrice', formatter: 'currency', index: 'DefaultSellPrice' },
{ name: 'LastCost', formatter: 'currency', index: 'LastCost' },
{ name: 'MyLink',
edittype: 'select',
formatter: 'showlink',
formatoptions: { baseLinkUrl: '/Product/Update/', idName: 'Guid' }
},
],
pager: '#pager',
rowNum: 10,
rowList: [20, 50, 100, 200],
sortname: 'ProductCode',
sortorder: 'asc',
viewrecords: true,
width: 'auto',
height: 'auto',
caption: 'Products'
}).navGrid('#pager', { edit: true, add: false, del: false });
});
</script>
#{
ViewBag.Title = "JSONGrid";
}
<h2>JSONGrid</h2>
<table id="grid_products"></table>
<div id="pager"></div>
The formatter from jqGrid is working for currency, but for some reason, it just didn't shown for hyperlink.
Update:
Got it working by using custom formatter.
...
{ name: 'MyLink',
formatter: myLinkFormatter,
},
...
function myLinkFormatter (cellvalue, options, rowObjcet) {
return 'Edit this product';
}
I suppose that you fill no value in JSON input for the 'MyLink' column. Because of this the hyperlink is empty. If you want to place the link with any fixed text in column I would recommend you to use custom formatter. See the recent answer for an example.
One more possible solution way is to use formatter: 'showlink' and include jsonmap: function() { return "Edit"; } to the 'MyLink' column definition. In the case you will not need to include in the JSON data "MyLink":"Edit" for every row of data. It's important to understand that the trick works only in case of usage jsonReader: {repeatitems: false} (so it should work for your grid).
If you have another problem you should include in the text of your question the JSON data which you use.
Some small remarks to your current code:
the usage of edittype: 'select' together with formatter: 'showlink' has no sense. You should remove it if you will do use formatter: 'showlink'.
the parameter height: 'atuo' should be height: 'auto'.
pager: $('#pager') is better to replace to pager: '#pager'. If you use pager: $('#pager'), the jqGrid will replace it internally to pager: '#pager' and the object $('#pager') will be discarded.
If you use jsonReader: { id: 'Guid'} and you don't plan to show the guids to the user you can remove the 'Guid' column from the grid. The id (the Guid in your case) will be used to assign ids of <tr> elements (table rows) of the grid. So you don't need to hold the same information twice