I can't seem to find the function that gets called after the editurl:"url" has completed.
I have:
colModel: [
{ name: 'Email', index: 'Email', editable: true },
{ name: 'ReferenceEmail', index: 'ReferenceEmail',hidden: true , editable: true, editrules: {edithidden:true} },
{ name: 'Title', index: 'Title',editable: true, edittype: "select", editoptions: { value: "Mr:Mr;Mrs:Mrs;Ms:Ms;Doctor:Doctor;Sir:Sir"} },
{ name: 'Forename', index: 'Forename', editable: true },
{ name: 'Surname', index: 'Surname', editable: true },
{ name: 'Study_Manager', index: 'Study_Manager',editable: true, edittype: "select", editoptions: { value: "True:True;False:False"} }
],
editurl: "/StudyManager/UserTable.aspx"
I need to set the ReferenceEmail = Email once edit has come back from the post to the server.
Byron, this should help:
jqGrid: Why aren't the events that I defined for a grid edit firing?
and on this reference page, you have afterComplete event which I think you should catch:
http://www.secondpersonplural.ca/jqgriddocs/_2eb0gp5ym.htm
cheers
I'm being an idiot:
$("#UserGrid").jqGrid('editRow', id, true, oneditfunc, reload);
then set
Function reload(rowid,result)
{
}
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.
I am using jqGrid V 4.6.0. and trying to implement grid with inline edit/delete functionality.I used formatter:'actions' for acheive this and also getting edit/delete icons in each row.But when i click on those icons i am getting following error in console :Uncaught TypeError: Cannot read property 'rowactions' of undefined and nothing happens in grid.same code and same example i've implemented before with jqGrid V4.4.4 and it worked well ,but in V4.6.0 i got this error.Please somebody help me.Thanks in advance :)
Code for reference:
jQuery("#theGrid").jqGrid({
url: '/Student/Grid',
datatype: "json",
colNames: ['Id', 'Firstname', 'Middlename', 'Lastname', 'Birthdate', 'Birthplace', 'State', 'Nationality', 'Religion', 'Ishandicaped ?', 'Actions'],
colModel: [
{ key: true, name: 'Id', sortable: true, resize: true, align: "center" },
{ key: false, name: 'FirstName', index: 'FirstName', editable: true, align: "center", editrules: { required: true } },
{ key: false, name: 'MiddleName', index: 'MiddleName', editable: true, align: "center", editrules: { required: true } },
{ key: false, name: 'LastName', index: 'LastName', editable: true, align: "center", editrules: { required: true } },
{
key: false, name: 'Birthdate', index: 'Birthdate', editable: true, align: "center", editrules: { required: true }, formatter: 'date', editoptions: {
dataInit: function (el) {
setTimeout(function () {
$(el).datepicker({
dateFormat: "dd-M-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
}, 200);
}
}
},
{ key: false, name: 'Birthplace', index: 'Birthplace', editable: true, align: "center", editrules: { required: true } },
{ key: false, name: 'State', index: 'State', editable: true, align: "center", edittype: "select", editoptions: { value: "GJ:Gujarat;MH:Maharashtra;DL:Delhi;BNG:Banglore;RJ:Rajasthan" }, editrules: { required: true } },
{ key: false, name: 'Nationality', index: 'Nationality', editable: true, align: "center", editrules: { required: true } },
{ key: false, name: 'Religion', index: 'Religion', editable: true, align: "center", editrules: { required: true } },
{
key: false, name: 'IsHandicaped', index: 'IsHandicaped', editable: true, align: "center", edittype: "checkbox", editoptions: { value: "True:False" }, formatter: Demo1
},
{
key: false,
name: 'Actions',
index: 'tax',
width: 80,
align: "center",
formatter: 'actions',
formatoptions: {
delOptions: { url: '/Student/Delete' }
}
}
],
rowNum: 10,
rownumbers: true,
autowidth: true,
rowList: [5, 10, 20],
pager: '#gridPager',
viewrecords: true,
sortorder: "desc",
reloadAfterSubmit: true,
altclass: 'table table-bordered table-striped',
jsonReader: {
repeatitems: false
},
caption:'Studentdata JqGrid V4.4.4',
editurl: '/Student/Edit',
mtype: "post",
height: '100%',
hiddengrid: false,
serializeRowData: function (postData) {
debugger;
// new row id is "new_row"
postData.Id == "jqg1" ? postData.oper = "add" : postData.oper = "add";
return postData;
},
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam',
{ datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after Add
return [true, ''];
} else {
$(this).jqGrid('setGridParam',
{ datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after Add
return [false, response.responseText];
}
}
}
});
I've following Grid to display data, now when I want to add new record it gives the error 'NO URL IS SET'
$(document).ready(function () {
$('#PRGrid').jqGrid({
//url from wich data should be requested
url: '#Url.Action("BindData")?FillType=' + getFillType(),
//event for inline edit
onSelectRow: function (currentSelectedRow) {
if (currentSelectedRow && currentSelectedRow != $.lastSelectedRow) {
//save changes in row
$('#PRGrid').jqGrid('saveRow', $.lastSelectedRow, false);
$.lastSelectedRow = currentSelectedRow;
}
//trigger inline edit for row
},
//type of data
datatype: 'json',
//url access method type
mtype: 'POST',
//columns names
colNames: ['Code', 'Name', 'No_Rooms', 'Dept_Code', 'Total_Items'],
//columns model
colModel: [
{ name: 'Code', index: 'Code', align: 'left', width: '120px', editable: true, edittype: 'select', editoptions: { maxlength: 25, dataUrl: '#Url.Action("GetRooms")',
dataEvents: [{
type: 'change', fn: function (e) {
var ret = $.ajax({
url: '#Url.Action("selectRoom")?id=' + $(this).val(),
async: false,
success: function (ret) {
$('#Name').val(ret.Name);
$('#No_Rooms').val(ret.qty);
$('#Dept_Code').val(ret.DeptCode);
$('#Total_Items').val(ret.Total_Items);}
});}
}]
}},
{ name: 'Name', index: 'Name', align: 'left', formatter: "text", width: '185px', editable: true, editrules: { required: true }, editoptions: { readonly: 'readonly'} },
{ name: 'No_Rooms', index: 'No_Rooms', align: 'left', formatter: "text", width: '102px', integer: true, editable: true, editrules: { required: true }, editoptions: { readonly: 'readonly'} },
{ name: 'Dept_Code', index: 'Dept_Code', align: 'left', formatter: "text", width: '78px', editable: true, editrules: { required: true }, editoptions: { readonly: 'readonly'} },
{ name: 'Total_Items', index: 'Total_Items', align: 'left', formatter: "text", width: '82px', integer: true, editable: true, editrules: { required: true }, editoptions: { readonly: 'readonly'} },
],
//pager for grid
pager: $('#PRGridPager'),
//number of rows per page
rowNum: 5,
//initial sorting column
sortname: 'Code',
//initial sorting direction
sortorder: 'asc',
recreateForm:true,
//we want to display total records count
viewrecords: true,
//grid height
height: '100%'
});
$('#PRGrid').jqGrid('navGrid', '#PRGridPager',
{ add: true, del: true, edit:false, search: true },
{width: '330', url:'#Url.Action("InsertPRGridRecord")', closeAfterAdd: true },
{width: '330', url:'#Url.Action("DeleteGridRecord")'});
var dialogPosition = $(this).offset();
Problem arrise when I want to add or delete the record from the grid,
Here I've defined both the methods InsertPRGridRecord() and DeleteGridRecord(), but it gives the same error 'NO URL IS SET' at the time of submitting the data on Add Record or Delete Record dialog.
I think the problem exist because you use incorrect the parameters of navGrid. Your current code uses '#Url.Action("DeleteGridRecord")' as URL of "Add" and '#Url.Action("InsertPRGridRecord")' as URL of "Edit". The URL of "Delete" is not specified.
I'm using a jqgrid with MVC. Here is my markup:
$("#list").jqGrid({
url: '/GstRate/GstRateGridData/',
datatype: 'json',
mtype: 'POST',
colNames: ['GstRateLookupId', 'Percentage Rate', 'Start Date', 'End Date', 'CreatedByUserName', 'CreatedDateTime', ''],
colModel: [
{ name: 'GstRateLookupId', index: 'GstRateLookupId', hidden: true, key: true, editable: true, editrules: { required: false }, editoptions: { defaultValue: '0'} },
{ name: 'PercentageRate', index: 'PercentageRate', editable: true, editrules: { required: true} },
{ name: 'StartDate', index: 'StartDate', width: 400, align: 'center', formatter: 'date', editable: true, editrules: { required: true }, formatoptions: { srcformat: 'd/m/y', newformat: 'd-m-y' }, editoptions: { dataInit: function (element) { $(element).datepicker({ dateFormat: 'd-m-y' }) } } },
{ name: 'EndDate', index: 'EndDate', width: 400, align: 'center', editable: true, formatter: 'date', formatoptions: { srcformat: 'd/m/y', newformat: 'd-m-y' }, editoptions: { dataInit: function (element) { $(element).datepicker({ dateFormat: 'd-m-y' }) } } },
{ name: 'CreatedByUserName', index: 'CreatedByUserName', hidden: true, editable: true, editrules: { required: false} },
{ name: 'CreatedDateTime', index: 'CreatedDateTime', hidden: true, editable: true, editrules: { required: false} },
{ name: 'act', index: 'act', width: 55, align: 'center', sortable: false, formatter: 'actions', formatoptions: { keys: true, delbutton: false} }
],
pager: $('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
viewrecords: true,
imgpath: '',
caption: 'Gst Rates',
editurl: '/GstRate/SaveGstRate/'
});
$("#list").navGrid('#pager', { edit: false, add: true, del: true, search: false }, {}, {}, { url: "/../GstRate/DeleteGstRate" });
This is working fine but I want to enhance it so that when a new entry is added the startdate value is readonly and defaults to the end date value of the last entry in the database.
The only way I can think of doing this is by somehow calling a server side method to populate the start date in the pop up create new dialog box.
I was thinking of using the dataUrl value in the editoptions to do this but this dataUrl only seems to work for when populating a select list. I don't want a select list here just a readonly text box.
Does anyone know how to achieve this?
I see two different solution ways:
You use beforeShowForm callback set input field of 'StartDate' to readonly and then send request to the server manually per $.ajax. Inside of success callback of the requests you can set the data in the input field of 'StartDate' received from the server.
If you fill the grid you use userdata to save additional information in the grid. Inside of dataInit of the 'StartDate' you get the data which you need from internal userData parameter and make the initialization of the input field.
Structure of my grid columns.
Now problem is that I want CompanyName only editable and sown in Edit ModelPopup
and
for adding ModelPopup I want all the below to be shown in popup.
How do I do that?
colModel: [
{ name: 'companyID', index: 'companyID', width: 60, editable: false,
editoptions: { readonly: true } },
{ name: 'companyName', index: 'companyName', width: 190, editable: true,
editrules: { required: true} },
{ name: 'companyCity', index: 'companyCity', width: 190, editable: true,
editrules: { required: true} },
{ name: 'companyState', index: 'companyState', width: 50, sortable: false,
align: 'center', editable: true, editrules: { required: true} },
{ name: 'action', index: 'action', width: 80, sortable: false, align: 'center',
editable: false, }
]
...
.navGrid('#pager10', { view:true, edit: true, add: true, del: true }
The most simple way to do this is to use beforeShowForm method. See my old answer on the same subject here.
In case of inline editing instead of form editing you can follow another suggestion from here.