Below is my code
onSelectRow : function(id) {
$("#order_list").setGridParam({
'editurl' : 'clientArray'
});
}
});
jQuery("#order_list").jqGrid('navGrid',"#pjmap",{edit:false,add:false,del:false,search: false, refresh:false,cloneToTop:true});
jQuery("#order_list").jqGrid('inlineNav', '#order_list_toppager',{add:false,del:false,edit:true,search: false, refresh:false,cloneToTop:true, viewtext:"View", edittext:"Edit", savetext:"Save", canceltext:"Cancel"});
Hei
You can create your own functions for saving by adding a function in parameters for aftersavefunc. My code is like this:
$('#jqGridOutput').navGrid("#jqGridPagerOutput", { edit: false, add: false, del: true, refresh: false, view: false }, {}, {}, delSettings);
$('#jqGridOutput').inlineNav('#jqGridPagerOutput',
{
edit: true,
del: true,
add: true,
cancel: false,
editParams: {
aftersavefunc: function (id) { //what should happen on save edit row },
keys: true,
},
addParams: {
keys: true,
position: "last",
aftersavefunc: function (id) { //what should happen on save new row }
},
});
I think, this is what you are looking for if i understand you correctly?
Related
In the below grid, filtertooblar works for few columns and does not for few other.
I have verified that index and name for colModel is same for the columns for which filtering is not working.
The filters are coming through correctly when I check it in beforesearch event.
Here is one of the colModels that does not filter:
7:
formoptions: {label: 'If Yes to previous question, would your familiari… affect how you view this case or those involved?'}
frozen: false
index: "ifyestopreviousquestionwouldyourfamiliaritywiththeparticipantsaffecthowyouviewthiscaseorthoseinvolved"
name: "ifyestopreviousquestionwouldyourfamiliaritywiththeparticipantsaffecthowyouviewthiscaseorthoseinvolved"
search: true
sortable: true
And the filter is coming as below
{"groupOp":"AND","rules":[{"field":"ifyestopreviousquestionwouldyourfamiliaritywiththeparticipantsaffecthowyouviewthiscaseorthoseinvolved","op":"cn","data":"Yes"}]}
Can you please help? Thank you very much
var grid = $("#list-grid").jqGrid({
datatype: "local",
height: 'auto',
colNames: colNames,
colModel: colModels,
data: rows,
gridview: true,
sortable: true,
autowidth: true,
shrinkToFit: false,
editable: true,
scrollOffset: true,
ExpandColClick: true,
viewsortcols: [true, 'vertical', true],
loadonce: true,
onSelectRow: function() {
return false;
},
search:
{
caption: "Search...",
Find: "Find",
Reset: "Reset",
odata: ['equal', 'not equal', 'less', 'less or equal', 'greater', 'greater or equal', 'begins with', 'does not begin with', 'is in', 'is not in', 'ends with', 'does not end with', 'contains', 'does not contain'],
groupOps: [{ op: "AND", text: "all" }, { op: "OR", text: "any" }],
matchText: " match",
rulesText: " rules"
},
caption: '<h4>Report</h4>',
regional: 'en',
ondblClickRow: function(rowid) {
jQuery(this).jqGrid('viewGridRow', rowid);
},
loadComplete: function() {
var $this = $(this), ids = $this.jqGrid('getDataIDs'), i, l = ids.length;
for (i = 0; i < l; i++)
{
$this.jqGrid('editRow', ids[i], true);
}
},
sortable:
{
update: function(permutation) {
}
},
pager: "#pager"
}).navGrid('#pager', { view: true, del: false, edit: false, add: false, search: false, refresh: false,width: 800 },
{view:false}, // Edit Options
{ view: false}, // Add Options
{}, // Del Options
{ width: 800 }, // Search Options
{
closeOnEscape: true,
width: 1000,
beforeShowForm: function($form)
{
console.log('form', $form);
$form.find("td.DataTD").each(function() {
var html = $(this).html(); // <span> </span>
if (html.substr(0, 6) === " ")
{
$(this).html(html.substr(6));
}
});
}
} // View Options
).filterToolbar({
groupOp: 'AND',
defaultSearch: 'cn',
searchOnEnter: true,
searchOperators: false,
stringResult: true,
ignoreCase: true,
beforeSearch: function () {
var postData = $("#list-grid").jqGrid('getGridParam', 'postData');
console.log(postData);
}
});
//grid.data = row; // replace the data array to another data
//$("#list-grid").trigger("reloadGrid", { current: true });
//$("#list-grid").jqGrid('setFrozenColumns');
},
});
$("#list-grid").on("jqGridToolbarBeforeSearch", function (e) {
var filters = $(this).jqGrid("getGridParam", "postData").filters;
console.log(filters);
if (typeof filters === "string") {
filters = $.parseJSON(filters);
}
return e.result; // forward the result of the last event handler
});
</text>
}
});
$('#jqGrid').navGrid('#jqGridPager',
// the buttons to appear on the toolbar of the grid
{ edit: true, add: true, del: true, search: false, refresh: false, view: false, position: "left", cloneToTop: false },
// options for the Edit Dialog
{
editCaption: "The Edit Dialog",
recreateForm: true,
checkOnUpdate: true,
checkOnSubmit: true,
closeAfterEdit: true,
// afterShowForm: PayTypeValidation,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Add Dialog
{
closeAfterAdd: true,
recreateForm: true,
// afterShowForm: PayTypeValidation,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
//delete
{
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
}
});
Above is the code for add and edit but the delete section doesnot work,please suggest the code for inline delete of row in grid with clientarray
I am using JQGrid with Multiselect filter to filter individual columns.
Currently I am populating filters(e.g. SkillCategory column) using database master values
{
name: 'SkillCategory', index: 'SkillCategory', width: '5%', sortable: true, resizable: true, stype: 'select',
searchoptions: {
clearSearch: false,
sopt: ['eq', 'ne'],
dataUrl: 'HttpHandler/DemandPropertyHandler.ashx?demprop=skillcat',
buildSelect: createSelectList,
attr: { multiple: 'multiple', size: 4 },
position: {
my: 'left top',
at: 'left bottom'
},
dataInit: dataInitMultiselect
}
},
This approach is populating all available master list(for SkillCategory) in to filter.
I would like to show only available filter value based on those are present in available rows for particular column(for SkillCategory).
This should show "Programming" and "Data" as option for SkillCategory filter as rows contains only "Programming" and "Data" value for that column.
I found below code(sorry forgot the link)
getUniqueNames = function (columnName) {
var texts = $("#listTableSupply").jqGrid('getCol', columnName), uniqueTexts = [],
textsLength = texts.length, text, textsMap = {}, i;
for (i = 0; i < textsLength; i++) {
text = texts[i];
if (text !== undefined && textsMap[text] === undefined) {
// to test whether the texts is unique we place it in the map.
textsMap[text] = true;
uniqueTexts.push(text);
}
}
return uniqueTexts;
}
buildSearchSelect = function (uniqueNames) {
var values = ":All";
$.each(uniqueNames, function () {
values += ";" + this + ":" + this;
});
return values;
}
setSearchSelect = function (columnName) {
$("#listTableSupply").jqGrid('setColProp', columnName,
{
searchoptions: {
sopt: ['eq', 'ne'],
value: buildSearchSelect(getUniqueNames(columnName)),
attr: { multiple: 'multiple', size: 3 },
dataInit: dataInitMultiselect
}
}
);
}
Calling setSearchSelect("SkillCategory")
.... caption: 'Supply',
emptyrecords: "No records to view",
loadtext: "Loading...",
refreshtext: "Refresh",
refreshtitle: "Reload Grid",
loadComplete: loadCompleteHandler1,
ondblClickRow: function (rowid) {
jQuery(this).jqGrid('viewGridRow', rowid);
},
beforeRequest: function () //loads the jqgrids state from before save
{
modifySearchingFilter.call(this, ',');
}
}).jqGrid('bindKeys');
$('#listTableSupply').bind('keydown', function (e) {
if (e.keyCode == 38 || e.keyCode == 40) e.preventDefault();
});
setSearchSelect("SkillCategory");
$('#listTableSupply').jqGrid('navGrid', '#pagerSupply', {
cloneToTop: true,
refresh: true, refreshtext: "Refresh", edit: false, add: false, del: false, search: false
}, {}, {}, {}, {
multipleSearch: true,
multipleGroup: true,
recreateFilter: true
}); .....
But seems its not working. Only "All" value is populated.
Any idea how can I achieve this.
Update1:
As per Oleg's suggestion below is the working code which worked for me.
initializeGridFilterValue = function () {
//jQuery("#listTableSupply").jqGrid('destroyGroupHeader');
setSearchSelect("SkillCategory");
jQuery("#listTableSupply").jqGrid("filterToolbar", {
stringResult: true,
searchOnEnter: true,
defaultSearch: myDefaultSearch,
beforeClear: function () {
$(this.grid.hDiv).find(".ui-search-toolbar .ui-search-input>select[multiple] option").each(function () {
this.selected = false; // unselect all options
});
$(this.grid.hDiv).find(".ui-search-toolbar button.ui-multiselect").each(function () {
$(this).prev("select[multiple]").multiselect("refresh");
}).css({
width: "98%",
marginTop: "1px",
marginBottom: "1px",
paddingTop: "3px"
});
}
});
jQuery("#listTableSupply").jqGrid('setGridHeight', 300);
}
And setting it from loadComplete event like below:
function loadCompleteHandler1() {
initializeGridFilterValue();
}
I see that you use the code from my old answer. About your problem: I suppose that you first call filterToolbar which creates the filter toolbar and only later you call setSearchSelect which set new searchoptions.value property. Another possible problem is that you call setSearchSelect before the data will be loaded in the grid. If you use datatype: "local" with data parameter then the data are filled in the grid during creating of the grid. If you use datatype: "json" then you should first load the data from the server and then call setSearchSelect and filterToolbar inside of loadComplete. For example if you use loadonce: true then you can test the value of datatype parameter inside of loadComplete. If the value is "json" then you made initial loading of the data. So you should call setSearchSelect, then if required call destroyFilterToolbar and finally call filterToolbar to create filter toolbar which selects will have all required values.
where in one cell edittype is select with key value pair like below.
colModel: [
{name: 'Code', index: 'Code', width: '16%', editable: true, sortable: true },
{ name: 'ABC', index: 'ABC', width: '16%', editable: true, edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT"} },
{ name: 'Emailid', index: 'Emailid', width: '16%', editable: true, sortable: true },
],
Now while adding new row if i selected the FedEx for ABC column it will send the FE to EditURL Link not FedEX so i want to send the FEDEX using extraParam to EditURL.
So please anyone let me know how to implement it.
For this my code is below
UPDATED CODE
var grid = jQuery("#list5").jqGrid({
url: '/home1/GetUserData',
datatype: "json",
mtype: "POST",
colNames: ['Code', 'LoginID', 'Emailid'],
colModel: [
{name: 'Code', index: 'Code', width: '16%', editable: true, sortable: true },
{ name: 'LoginID', index: 'LoginID', width: '16%', editable: true, sortable: true },
{ name: 'Emailid', index: 'Emailid', width: '16%', editable: true, edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT"} },
],
rowNum: 10,
autowidth: true,
height: '100%',
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);
jQuery('#list5').jqGrid('editRow', id, true, pickdates);
$("#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, editParams: {extraparam: XYZ()}});
});
function XYZ()
{
// from here i want to return the text of combo of selected row.
}
Update code of Oleg
var grid = jQuery("#list5"),
editingRowId,
myEditParam = {
keys: true,
oneditfunc: function (id) {
editingRowId = id;
},
afterrestorefunc: function (id) {
editingRowId = undefined;
},
extraparam:
// we get the text of selected option from the column
// 'Emailid' and include the data as additional
// parameter 'EmailidText'
// EmailidText: function () {
// return $("#" + editingRowId + "_Emailid>option:selected").text();
//}
// **my changes here bind ABC Function which return key , value pair of object** IS THIS POSSIBLE
function () {
ABC();
}
};
grid.jqGrid({
url: '/home1/GetUserData',
datatype: "json",
...
onSelectRow: function (id) {
var $this = $(this), gridIdSelector = '#' + $.jgrid.jqID(this.id);
$this.jqGrid('setGridParam', {
editurl: (id === "new_row" ?
"/home1/InsertUserData" :
"/home1/EditUserData")
});
if (editingRowId !== id) {
$(gridIdSelector + "_iledit").click();
}
}
});
$grid.jqGrid('navGrid', '#pager',
{ edit: false, add: false, search: false, refresh: false},
{}, {}, { url: '/home1/DeleteUserData' });
// inlineNav has restoreAfterSelect: true per default so we don't need to call
// restoreRow explicitly
$grid.jqGrid('inlineNav', '#pager',
{ edit: true, add: true, editParams: myEditParam,
addParams: {addRowParams: myEditParam } });
The code could be about the following
var grid = jQuery("#list5"),
editingRowId,
myEditParam = {
keys: true,
oneditfunc: function (id) {
editingRowId = id;
},
afterrestorefunc: function (id) {
editingRowId = undefined;
},
extraparam: {
// we get the text of selected option from the column
// 'Emailid' and include the data as additional
// parameter 'EmailidText'
EmailidText: function () {
return $("#" + editingRowId + "_Emailid>option:selected").text();
}
}
};
grid.jqGrid({
url: '/home1/GetUserData',
datatype: "json",
...
onSelectRow: function (id) {
var $this = $(this), gridIdSelector = '#' + $.jgrid.jqID(this.id);
$this.jqGrid('setGridParam', {
editurl: (id === "new_row" ?
"/home1/InsertUserData" :
"/home1/EditUserData")
});
if (editingRowId !== id) {
$(gridIdSelector + "_iledit").click();
}
}
});
$grid.jqGrid('navGrid', '#pager',
{ edit: false, add: false, search: false, refresh: false},
{}, {}, { url: '/home1/DeleteUserData' });
// inlineNav has restoreAfterSelect: true per default so we don't need to call
// restoreRow explicitly
$grid.jqGrid('inlineNav', '#pager',
{ edit: true, add: true, editParams: myEditParam,
addParams: {addRowParams: myEditParam } });
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.