I'm using jqgrid and I have a edit dialog coming up: I don't want the default width of 300 but instead 700.
I've search and found some examples and I changed my code to:
$("#list").navGrid('#pager', { edit: false, add: true, del: true, search: false }, {width:700}, {}, { url: "/../Invoice/DeleteInvoiceLine" });
This should change the width to 700? It doesn't?
There are separate settings for Add and Edit dialog. You use edit: false, add: true options of navGrid, but set the width of the Add dialog only. If you really need to have only Add dialog
$("#grid_id").navGrid('#gridpager', { edit: false, search: false },
{/*Edit options*/}, { width: 700 }, { url: "/../Invoice/DeleteInvoiceLine" });
To have Edit dialog only you can use
$("#grid_id").navGrid('#gridpager', { add: false, search: false },
{ width: 700 }, {/*Add options*/}, { url: "/../Invoice/DeleteInvoiceLine" });
If you need have both Add and Edit dialog with different options you should use recreateForm: true options additionally:
$("#grid_id").navGrid('#gridpager', { search: false },
{ width: 700, recreateForm: true },
{ width: 600, recreateForm: true },
{ url: "/../Invoice/DeleteInvoiceLine" });
Related
I am using the following setting which loads all the data from the server at once:
loadonce: true
Now I attempt to reload the grid after an edit:
// options for the Edit Dialog
{
closeAfterEdit: true,
closeOnEscape: true,
reloadAfterSubmit: true,
editCaption: "Edit User",
width: 1140,
height: 370,
afterSubmit: function () {
$('#jqGrid').jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
return [true,'']; // no error
},
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
The data is refreshed from the server however, there is an issue: For example, If I edit a record in page 2, it shows page 2 on the navbar on the bottom but it always brings up the data from page 1. Any help would be appreciated. Thanks.
Update #1
I tried the following code:
var $self = $(this), p = $self.jqGrid("getGridParam");
p.datatype = "json";
$self.trigger("reloadGrid", { page: p.page, current: true });
Then I edit and click on submit, it still loads page 1 data even though the navbar stays on page 2. Then I click the forward arrow to go to page 3, then the back arrow to go to page 2 again and now it shows the page 2 data.
Update #2
Here is additional relevant code of all I am doing and still not working:
...
cmTemplate: { editable: true, editrules: { edithidden: true } },
pager: "#jqGridPager",
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'lastName, firstName',
sortorder: 'asc',
loadonce: true,
viewrecords: true,
gridview: true,
recreateForm: true,
width: 1140,
height: "auto",
multiselect: false,
altRows: false,
shrinkToFit: true,
scroll: false
}
});
...
$('#jqGrid').navGrid('#jqGridPager',
// the buttons to appear on the toolbar of the grid
{
edit: true,
add: true,
del: true,
search: true,
view: true,
refresh: true,
position: "left",
cloneToTop: false,
beforeRefresh: function () {
//Note: This function is only called after user clicks the refresh button
$('#jqGrid').jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
}
},
// Options for the Edit Dialog
{
closeAfterEdit: true,
closeOnEscape: true,
reloadAfterSubmit: false,
editCaption: "Edit User",
width: 1140,
height: 370,
afterSubmit: function () {
var $self = $(this), p = $self.jqGrid("getGridParam");
p.datatype = "json";
$self.trigger("reloadGrid", { page: p.page, current: true });
return [true, '']; // no error
},
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
...
FINAL OUTCOME
I finally got the issue resolved! I switched from the not free Guriddo jqGrid to free jqGrid by Oleg and the bug was gone! I originally could not get the navigation buttons to appear on the free jqgrid but the reason they didnt appear is because I had the tag iconSet: "fontAwesome" and I did not reference that font. When I removed that tag completely, everything worked perfect. You can use that tag but you must reference the iconset url. In my case I did not need a different icon set.
You can use page option of reloadGrid (see the answer for the corresponding demo). You can use $(this).jqGrid("getGridParam", "page") to get page parameter, which hold the current page.
afterSubmit: function () {
var $self = $(this), p = $self.jqGrid("getGridParam");
p.datatype = "json";
$self.trigger("reloadGrid", { page: p.page, current: true });
return [true]; // no error
}
I used current: true option of reloadGrid to select the currently selected row after reloading of the grid.
I am doing an inline add, using the inline Nav feature. It successfully sends the data of all "edit: true" columns, but there is one other column from the grid that I need to send with the Add. It is a hidden column and by using "editrules: { edithidden: false }, I can send the value with an edit, but not an ADD. How to do I send hidden, non-edit columns with an ADD?
{ name: 'RecipKey', index: 'RecipKey', hidden: true, editable: true, editrules: { edithidden: false } },
...
$("#activity-grid").jqGrid('inlineNav', '#grid-pager',
{
edit: true, add: true, del: true, cancel: true,
editParams: { keys: true },
addParams: { keys: true }
});
following the reference http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods:
you can pass extraparam on addRowParams when you use the method addRow.
example:
jQuery("#list").jqGrid('addRow',
parameters =
{
addRowParams : {extraparam:{ "param1":"1","param2":"2"}}
}
);
I have a jQgrid that loads data initially via an ajax call from backend(java struts). Again, this is one time load and once loaded, the jqGrid should operate on the data available locally.
Initially, datatype:json and once loadcomplete, set datatype:local.
Now is there a way to use filterToolbar for local datatype with the following options in free jqgrid;
autocomplete enabled in the toolbar
excel like filtering options
Jqgrid Options:
jQuery("#listTable").jqGrid({
url:'/WebTest/MainAction.do',
datatype: "json",
colNames: ['Label','Value'],
colModel: [
{name:'label',index:'label',width: 40,search:true, stype:'text',sorttype:'int'},
{name:'value',index:'value',width: 56,search:true, stype:'text',sorttype:'text'}
],
autowidth: true,
autoResizing: { compact: true, widthOfVisiblePartOfSortIcon: 13 },
rowNum: 10,
rowList: [5, 10, 20, "10000:All"],
viewrecords: true,
pager: true,
toppager: true,
rownumbers: true,
sortname: "label",
sortorder: "desc",
caption: "Test 235",
height: "200",
search: true,
loadonce: true,
loadComplete: function (data) {
},
gridComplete: function(){
jQuery("#listTable").jqGrid('setGridParam', { datatype: 'local' });
}
}) .jqGrid("navGrid", { view: true, cloneToTop: true})
.jqGrid("filterToolbar")
.jqGrid("gridResize");
All the features are enabled by default if I understand you correctly. The server just have to return all data instead of one page of data to make loadonce: true property work correctly. You need just call filterToolbar after creating the grid. All will work like with local data. You should consider to set sorttype property for correct local sorting and stype and searchoptions for correct filtering of data.
To have "autocomplete" and "excel like filtering options" you need additionally to follow the answer which set autocomplete or stype: "select", searchoptions: { value: ...} properties based on different values of input data. You can do this inside of beforeProcessing callback. The code from the answer use this.jqGrid("getCol", columnName) which get the data from the grid. Instead of that one have access to data returned from the server inside of beforeProcessing callback. So one can scan the data to get the lists with unique values in every column and to set either autocomplete or stype: "select", searchoptions: { value: ...} properties.
UPDATED: I created JSFiddle demo which demonstrates what one can do: http://jsfiddle.net/OlegKi/vgznxru6/1/. It uses the following code (I changed just echo URL to your URL):
$("#grid").jqGrid({
url: "/WebTest/MainAction.do",
datatype: "json",
colNames: ["Label", "Value"],
colModel: [
{name: "label", width: 70, template: "integer" },
{name: "value", width: 200 }
],
loadonce: true,
pager: true,
rowNum: 10,
rowList: [5, 10, "10000:All"],
iconSet: "fontAwesome",
cmTemplate: { autoResizable: true },
shrinkToFit: false,
autoResizing: { compact: true },
beforeProcessing: function (data) {
var labelMap = {}, valueMap = {}, i, item, labels = ":All", values = [],
$self = $(this);
for (i = 0; i < data.length; i++) {
item = data[i];
if (!labelMap[item.label]) {
labelMap[item.label] = true;
labels += ";" + item.label + ":" + item.label;
}
if (!valueMap[item.value]) {
valueMap[item.value] = true;
values.push(item.value);
}
}
$self.jqGrid("setColProp", "label", {
stype: "select",
searchoptions: {
value: labels,
sopt: ["eq"]
}
});
$self.jqGrid("setColProp", "value", {
searchoptions: {
sopt: ["cn"],
dataInit: function (elem) {
$(elem).autocomplete({
source: values,
delay: 0,
minLength: 0,
select: function (event, ui) {
var grid;
$(elem).val(ui.item.value);
if (typeof elem.id === "string" && elem.id.substr(0, 3) === "gs_") {
grid = $self[0];
if ($.isFunction(grid.triggerToolbar)) {
grid.triggerToolbar();
}
} else {
// to refresh the filter
$(elem).trigger("change");
}
}
});
}
}
});
// one should use stringResult:true option additionally because
// datatype: "json" at the moment, but one need use local filtreing later
$self.jqGrid("filterToolbar", {stringResult: true });
}
});
I have an "actions" column in my grid and it's set to display the edit dialog when the edit icon is clicked. The form comes up fine, however, there doesn't seem to be a way to pass in options for the dialog box itself. When it comes up, it always has the scroll bars, default button text, etc. I have my ondblClickRow event also pulling up the edit dialog, but it allows me to set the height, width, modal, etc properties of the box. Ideally, I could wire up the ondblClickRow and the edit button click to a function, but that doesn't seem to be an option either.
colModel: [ { name: 'fx',
index: 'fx',
width: 60,
formatter: 'actions',
formatoptions: { editformbutton: true },
sortable: false,
sorttype: 'int',
summaryType: 'count', summaryTpl: '({0}) total' },
ondblClickRow: function(){
var gr = $("#mygrid").jqGrid('getGridParam', 'selrow');
$("#mygrid").jqGrid('editGridRow',
gr,
{height: 200,
width: 500,
modal: true,
resize: false,
reloadAfterSubmit: false,
bSubmit: 'Save',
recreateForm: false
});
}
Any ideas?
You can use formatoptions to specify any options of the editing. If you use formatter: 'actions' with formatoptions: { editformbutton: true } then form editing will be used. All other properties of form editing you can specify by delOptions and editOptions properties of formatoptions. If you starts editGridRow directly with some options I would recommend you to share the same options. The most easy way will be to save the options in a variable and to use it in both cases:
var myEditOptions = {
height: 200,
width: 500,
modal: true,
resize: false,
reloadAfterSubmit: false,
bSubmit: 'Save',
recreateForm: true,
closeAfterAdd: true,
closeAfterEdit: true
},
myDeleteOptions = {
// just an example of delGridRow options
reloadAfterSubmit: false,
closeOnEscape: true
};
$("#gridId").jqGrid({
colModel: [
{ name: 'fx', width: 60, formatter: 'actions', sortable: false,
formatoptions: {
editformbutton: true,
editOptions: myEditOptions,
delOptions: myDeleteOptions
}
},
...
],
...
ondblClickRow: function (rowid) {
$(this).jqGrid('editGridRow', rowid, myEditOptions);
}
});
I am new to jQuery, and I need to use jqGrid in my project.
I have one problem with edit/delete/insert; I have only one URL, editurl, then in the controller I am using the oper property to decide whether it is an insert or delete operation.
But I want to have a separate URL for the edit, delete and insert operations in jqGrid. Could you please let me know how to achieve that?
Client side code:
$(document).ready(function () {
var lastsel2;
var grid = jQuery("#list5").jqGrid({
url: '/home1/GetUserData',
datatype: "json",
mtype: "POST",
colNames: ['Code', 'LoginID', 'Emailid', 'CreateDate'],
colModel: [
// { name: 'act', index: 'act', width: 75, sortable: false },
{name: 'Code', index: 'Code', width: 55, editable: true },
{ name: 'LoginID', index: 'LoginID', width: 90, editable: true },
{ name: 'Emailid', index: 'Emailid', width: 100, editable: true },
{ name: 'CreateDate', index: 'CreateDate', width: 100, editable: true }
],
rowNum: 10,
width: 700,
height: 300,
rowList: 10,
pager: $("#pager2"),
editurl: "/home1/EditUserData",
onSelectRow: function (id) {
if (id && id !== lastsel2) {
if (id == "new_row") {
grid.setGridParam({ editurl: "/home1/InsertUserData" });
}
else {
grid.setGridParam({ editurl: "/home1/EditUserData" });
}
jQuery('#list5').restoreRow(lastsel2);
$("#list5_ilsave").addClass("ui-state-disabled");
$("#list5_ilcancel").addClass("ui-state-disabled");
$("#list5_iladd").removeClass("ui-state-disabled");
$("#list5_iledit").removeClass("ui-state-disabled");
lastsel2 = id;
}
},
caption: "Simple data manipulation"
});
jQuery("#list5").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: true, search: false, refresh: false }, {}, {}, { url: '/home1/DeleteUserData' });
jQuery("#list5").jqGrid('inlineNav', "#pager2", { edit: true, add: true, del: true, search: false, refresh: false });
});
You can pass options for all the actions with navGrid method like this:
jQuery('#list5').jqGrid('navGrid', '#pager2', { edit: true, add: true, del: true },
//edit options
{ url: '/home1/EditUserData' },
//add options
{ url: '/home1/AddUserData' },
//delete options
{ url: '/home1/DeleteUserData' }
);
Please read more here and here.
UPDATE
In case of inlineNav method jqGrid is always passing the same set of parameters (editParams) to saveRow method. As the effect the edit/add request will be made to the same URL. You are sticked with checking oper to distinguish edit for add.
In the subject of reloading the grid you can use editParams to set aftersavefunc to trigger realoadGrid like this:
jQuery('#list5').jqGrid('inlineNav', '#pager2', { edit: true, add: true, editParams: {
aftersavefunc: function(rowId, response) { jQuery('#list5').trigger('reloadGrid'); }
}});
But you should remember that it will also cause a refresh after edit (because of the same reason as described above) - you may try to use response parameter to distinguish those two. I have also removed del, search and refresh from the code as inlineNav doesn't have those options.