Related
When I'm trying to save all rows from jqGrid table, hidden parameters are not always passed to controller. For example when I have 20 rows to save, 3 are without hidden parameters and the rest 17 are ok. I have 4.8.0 version of jqGrid. My question is if it is something wrong in my code or just some error in jqGrid
$.each($(gridObject.TableId).jqGrid('getDataIDs'), function (i, val) {
$(gridObject.TableId).jqGrid('editRow', val, true);
$(gridObject.TableId).saveRow(val, undefined, gridObject.ControllerAddress + 'Edit', undefined);
});
Wrong passed parameters
Correct passed parameters
Table definition:
$(gridObject.TableId).jqGrid({
url: gridObject.ControllerAddress + 'Get',
postData:
{
forSessionId: gridObject.PostData.ForSessionId,
pepper: Math.random()
},
colNames: ['Participant',
'Attended <input type="checkbox" id="allAttended" />',
'Passed <input type="checkbox" id="allPassed" />',
'Id', 'UserId', 'SessionId'],
colModel: [
// displayed always
{ name: 'ParticipantName' },
{
name: 'Attended', sortable: false, edittype: 'checkbox', formatter: 'checkbox', formatoptions: { disabled: false },editable: true,
editoptions: {
value: GridsDictionaries.Checkbox.Default.value,
dataEvents: [{
type: 'change', fn: function (e) {
if ($(this).prop('checked')==false) {
var passedCheckbox = $(this).closest('tr').find('td[aria-describedby=participations_table_Passed] input[type=checkbox]');
$(passedCheckbox).removeProp('checked');
}
}
}]
}
},
{
name: 'Passed', sortable: false, edittype: 'checkbox', formatter: 'checkbox', formatoptions: { disabled: false }, editable: true,
editoptions: {
value: GridsDictionaries.Checkbox.Default.value,
dataEvents: [{
type: 'change', fn: function (e) {
if ($(this).prop('checked')) {
var attendedCheckbox = $(this).closest('tr').find('td[aria-describedby=participations_table_Attended] input[type=checkbox]');
$(attendedCheckbox).prop('checked', true);
}
}
}]
}
},
// hidden
{ name: 'Id', hidden: true, key: true },
{ name: 'ParticipantId', hidden: true, editable: true },
{ name: 'SessionId', hidden: true, editable: true },
],
autowidth: true,
pager: "",
caption: "List of participants",
//ondblClickRow: gridObject.ToggleEdition, onPaging: gridObject.OnPaging,
loadComplete: function () {
$.each($(gridObject.TableId).jqGrid('getDataIDs'), function (i, val) {
$(gridObject.TableId).jqGrid('editRow', val, true);
$(gridObject.TableId + ' tr#' + val).unbind('keydown');
});
},
});
This is not a error in the code, but feature. As of the creation of jqGrid the hidden fields are not editable and its values are not posted a to the server (local data).
I highly recommend you to discover the documentation of Guriddo jqGrid.
In the link above is explained how to edit these fields.
When I edit row and press Enter to send data to web method, it sends a row number instead of the id (eg. instead of id=111 it sends '3' which represents the 3rd row on the grid). How do I get the id value instead?
Here is code:
$(document).ready(function () {
var id;
var lastsel;
jQuery("#rowed3").jqGrid({
url:'Default3.aspx/GetData',
datatype: "xml",
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
ajaxRowOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
serializeRowData: function (postData) {
return JSON.stringify(postData);
},
mtype:'GET',
xmlReader: {
root: "programs",
row: "program",
repeatitems: false
},
colNames:['id','field1','field2'],
colModel:[
{ name: 'id', index: 'id', width: 55, hidden: false, editable: false, editrules: { edithidden: false }, hidedlg: true },
{ name: 'field1', index: 'field1', width: 90, editable: true },
{ name: 'field2', index: 'field2', width: 100, editable: true }
],
rowNum:10,
rowList:[10,20,30],
pager: '#prowed3',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
onSelectRow: function(id){
if(id && id!==lastsel){
jQuery('#rowed3').jqGrid('restoreRow',lastsel);
jQuery('#rowed3').jqGrid('editRow',id,true);
lastsel=id;
}
//$("#rowed3").jqGrid('setGridParam', { editurl: 'Default3.aspx/EditRow' });
},
onCellSelect: function(rowid,iCol,cellcontent,e) {
alert(cellcontent);},
//ondblClickRow: function(rowid) {
// jQuery('#rowed3').jqGrid('editRow',id,true);
//},
editurl: "Default3.aspx/EditRow",
caption: "Using events example"
});
jQuery("#rowed3").jqGrid('navGrid',"#prowed3",{edit:false,add:false,del:false});
});
[WebMethod]
//[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Xml)]
public static string EditRow(string id,string field1,string field2)
{
string x = id; ;
return x;
}
In colModel BOTH key:true and editable:true need to be set.
I didn't think editable of my hidden ID field was relevant, hence why original comment didn't just work
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 } });
Ive got a jqGrid where i have a some columns and 1 of the columns is a dropdownlist(select) populated from database.
What i want is : When im not in editmode column with dropdowns just have to show text which have to be taken from query, and when im in edit mode it should show dropdown list.
exactly like here: http://www.trirand.com/blog/jqgrid/jqgrid.html go into row editing/input tipyes
here is the code for my grid:
<script type="text/javascript">
var lastsel;
$(document).ready(function () {
$.getJSON('#Url.Action("ConstructSelect")', function (data) {
setupGrid(data);
});
});
function setupGrid(data) {
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '#Url.Action("GetStoreList")',
datatype: 'json',
mtype: 'GET',
colNames: ['Butiks kategori', 'Butik Navn', 'By', 'Sælger'],
colModel: [
{ name: 'Id', index: 'Id', width: 50 },
{ name: 'Butiks Kategori', index: 'StoreId', width: 200, edittype: 'text', align: 'center', editable: false },
{ name: 'Buttiks Navn', index: 'StoreName', width: 200, edittype: 'text', align: 'center', editable: false },
{ name: 'Country', index: 'Country', width: 80, sortable: true, editable: true, edittype: "select", editoptions: { value: data }}],
onSelectRow: function (id) {
if (id && id !== lastsel) {
jQuery('#list').jqGrid('restoreRow', lastsel);
jQuery('#list').jqGrid('editRow', id, true);
lastsel = id;
}
},
editurl: '#Url.Action("GridSave")',
rowNum: 50000,
rowList: [5, 10, 20, 50],
pager: '#page',
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
height: "500px",
imgpath: '/scripts/themes/base/images'
});
jQuery("#list").jqGrid('navGrid', "#page", { edit: false, add: false, del: false });
});
}
</script>
P.S. Ill link code as soon as i am back home
UPDATED: Thanks for an answer, im new to jq, so im making alot of mistakes ofc., but now im back to where i was before, the dropdownlist is not populated with data. i cleaned up the code as u said, so it looks like this now:
btw. The ConstructSelect return a list of Strings
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '#Url.Action("GetStoreList")',
ajaxSelectOptions: { type: "POST", dataType: "json" },
datatype: 'json',
mtype: 'GET',
colNames: ['Butiks kategori', 'Butik Navn', 'By', 'Sælger'],
colModel: [
{ name: 'Kategori', index: 'Kategori', width: 50, key: false},
{ name: 'Navn', index: 'Navn', align: 'center', editable: false },
{ name: 'By', index: 'By', align: 'center', editable: false },
{ name: 'Sælger', index: 'Sælger', editable: true, edittype: "select",
editoptions: { dataUrl: '#Url.Action("ConstructSelect")',
buildSelect: function (data) {
var response = jQuery.parseJSON(data.responseText);
var s = '<select>';
if (response && response.length) {
for (var i = 0, l = response.length; i < l; i++) {
var ri = response[i];
s += '<option value="' + ri + '">' + ri + '</option>';
}
}
return s + "</select>";
}
}
}],
onSelectRow: function (id) {
if (id && id !== lastsel) {
jQuery('#list').jqGrid('restoreRow', lastsel);
jQuery('#list').jqGrid('editRow', id, true);
lastsel = id;
}
},
editurl: '#Url.Action("GridSave")',
rowNum: 50000,
rowList: [5, 10, 20, 50],
pager: '#page',
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
height: "900px"
});
jQuery("#list").jqGrid('navGrid', "#page", {edit:false, add:false, del:false});
});
Okay, slight modifications was needed to get it working :
var response = typeof(data) === "string" ? jQuery.parseJSON(data.responseText):data;
aparently u have to tell buildselect that the data u want to modify is String
But i still have the problem that it doesnt show from begining which sellers is already selected!
Okay after restart it mysticly worked... it is solved now
What you need to do is to use
editoptions: { dataUrl: '#Url.Action("ConstructSelect")' }
instead of
editoptions: { value: data }
Depend on the format of the output of the action ConstructSelect you can need to use an additional property buildSelect of the editoptions. jqGrid expected that the server response on the HTTP 'GET' request of dataUrl will be HTML fragment which represent <select>. For example:
<select>
<option value="de">Germany</option>
<option value="us">USA</option>
</select>
If the server return other formatted data, like JSON data
["Germany","USA"]
or
[{"code":"de","display":"Germany"},{"code":"us","display":"USA"}]
you can write JavaScript function which convert the server response to the HTML fragment of the <select> and set the value of the property buildSelect to the function.
In the answer you will find an example of the function.
If your action support only HTTP POST and no GET you will have to use ajaxSelectOptions: { type: "POST" } parameter additionally, to overwrite the type of the corresponding ajax requests. In the same way you can overwrite other ajax parameters. For example you can use
ajaxSelectOptions: { type: "POST", dataType: "json"}
(defaults are type : "GET" and dataType: "html")
Some other small remarks to the code:
you should not place $(document).ready(function () { inside of another $(document).ready(function () {.
You use 'Id' instead of 'id'. So jqGrid will not find the id property. You can a) rename
'Id' to 'id' b) include additional parameter jsonReader: {id: 'Id'} c) include additional property key: true in the definition of the column 'Id'. Any from the ways will solve the described problem.
You can remove default properties like edittype: 'text', sortable: true or editable: false. See jqGrid documentation which describes the default values of all colModel properties.
You should remove imgpath parameter of jqGrid. The parameter is not exist since many many versions of jqGrid (see here).
Am using jqgrid, loading data once, sorting and filtering locally and doing a refresh after each update/insert/delete. It works fine, besides that if I am using a filter (on top of grid), the filter remains the same after refresh, but the filter is not re-applied on the newly loaded data.
I have tried to call mygrid[0].triggerToolbar() after reloading grid with trigger('reloadGrid'), but there is no effect.
Thanks for any help or pointers :-)
Code below:
var lastsel;
var mygrid;
var currentLang;
//setup grid with columns, properties, events
function initGrid(lang, productData, resellerData, resellerSearchData) {
mygrid = jQuery("#list2").jqGrid({
//data loading settings
url: '/public/Gadgets/LinkGadget/ProductLinks/' + lang,
editurl: "/public/Gadgets/LinkGadget/Edit/" + lang,
datatype: "json",
mtype: 'POST',
jsonReader: {
root: "rows",
cell: "",
page: "currpage",
//total: "totalrecords",
repeatitems: false
},
loadError: function (xhr, status, error) { alert(status + " " + error); },
//column definitions
colNames: ['Id', 'ProductId', 'Reseller Name', 'Link', 'Link Status'],
colModel: [
{ name: 'Id', index: 'Id', width: 40, sortable: false, resizable: true, editable: false, search: false, key: true, editrules: { edithidden: true }, hidden: true },
{ name: 'ProductId', index: 'ProductId', width: 190, sortable: true, sorttype: 'text', resizable: true, editable: true, search: true, stype: 'select', edittype: "select", editoptions: { value: productData }, editrules: { required: true} },
{ name: 'ResellerName', indexme: 'ResellerName', width: 190, sortable: false, sorttype: 'text', resizable: true, editable: true, search: true, stype: 'select', edittype: "select", editoptions: { value: resellerData }, editrules: { required: true }, searchoptions: { sopt: ['eq'], value: resellerSearchData} },
{ name: 'Link', index: 'Link', width: 320, sortable: true, sorttype: 'text', resizable: true, editable: true, search: true, edittype: "textarea", editoptions: { rows: "3", cols: "50" }, editrules: { required: true }, searchoptions: { sopt: ['cn']} },
{ name: 'LinkStatus', index: 'LinkStatus', width: 100, sortable: false, resizable: true, editable: false, search: false, formatter: linkStatusFormatter}],
//grid settings
//rowList: [10, 25, 50],
rowNum: 20,
pager: '#pager2',
sortname: 'ProductId',
sortorder: 'asc',
height: '100%',
viewrecords: true,
gridview: true,
loadonce: true,
viewsortcols: [false, 'vertical', true],
caption: " Product links ",
//grid events
onSelectRow: function (id) {
if (id && id !== lastsel) {
if (lastsel == "newid") {
jQuery('#list2').jqGrid('delRowData', lastsel, true);
}
else {
jQuery('#list2').jqGrid('restoreRow', lastsel);
}
jQuery('#list2').jqGrid('editRow', id, true, null, afterSave); //reload on success
lastsel = id;
}
},
gridComplete: function () {
//$("#list2").setGridParam({ datatype: 'local', page: 1 });
$("#pager2 .ui-pg-selbox").val(25); //changing the selected values triggers paging to work for some reason
}
});
//page settings
jQuery("#list2").jqGrid('navGrid', '#pager2',
{ del: false, refresh: false, search: false, add: false, edit: false }
);
//refresh grid button
jQuery("#list2").jqGrid('navButtonAdd', "#pager2", { caption: "Refresh", title: "Refresh grid", buttonicon: 'ui-icon-refresh',
onClickButton: function () {
reload();
}
});
//clear search button
jQuery("#list2").jqGrid('navButtonAdd', "#pager2", { caption: "Clear search", title: "Clear Search", buttonicon: 'ui-icon-refresh',
onClickButton: function () {
mygrid[0].clearToolbar();
}
});
//add row button
jQuery("#list2").jqGrid('navButtonAdd', '#pager2', { caption: "New", buttonicon: 'ui-icon-circle-plus',
onClickButton: function (id) {
var datarow = { Id: "newid", ProductId: "", ResellerName: "", Link: "" };
jQuery('#list2').jqGrid('restoreRow', lastsel); //if editing other row, cancel this
lastsel = "newid"; // id;
var su = jQuery("#list2").addRowData(lastsel, datarow, "first");
if (su) {
jQuery('#list2').jqGrid('editRow', lastsel, true, null, afterSave); //reload on success
jQuery("#list2").setSelection(lastsel, true);
}
},
title: "New row"
});
//delete row button
jQuery("#list2").jqGrid('navButtonAdd', "#pager2", { caption: "Delete", title: "Delete row", buttonicon: 'ui-icon-circle-minus',
onClickButton: function () {
if (lastsel) {
if (confirm('Are you sure you want to delete this row?')) {
var url = '/public/Gadgets/LinkGadget/Edit/' + currentLang;
var data = { oper: 'del', id: lastsel };
$.post(url, data, function (data, textStatus, XMLHttpRequest) {
reload();
});
lastsel = null;
}
else {
jQuery("#list2").resetSelection();
}
}
else {
alert("No row selected to delete.");
}
}
});
jQuery("#list2").jqGrid('filterToolbar');
}
//Used by initGrid - formats link status column by adding button
function linkStatusFormatter(cellvalue, options, rowObject) {
if (rowObject.Id != "newrow")
return "<input style='height:22px;width:90px;' type='button' " + "value='Check link' " + "onclick=\"CheckLink(this, '" + rowObject.Id + "'); \" />";
else
return "";
}
//Used by initGrid - reloads grid
function reload() {
//jqgrid setting "loadonce: true" will reset datatype from json to local after grid has loaded. "datatype: local"
// does not allow server reloads, therefore datatype is reset before trying to reload grid
$("#list2").setGridParam({ datatype: 'json' }).trigger('reloadGrid');
//mygrid[0].clearToolbar();
lastsel = null;
//Comments: after reload, toolbar filter is not applied to refreshed data. Tried row below without luck
//mygrid[0].triggerToolbar();
}
//after successful save, reload grid and deselect row
function afterSave() {
reload();
}
Your data is not getting re binded to the grid after save/update delete