I am trying to change the label text of StudentOrEmployeeId which is currently 'Name'. My change event is working but unable to change the name.May I am missing something
colNames: ['IssueType', 'Issued To','Name']
{ name: 'IssueType', index: 'IssueType', align: 'center', editable: true, edittype: 'select',
editoptions:
{
value: "0:Student;1:Teacher",
dataEvents: [{
type: 'change',
fn: function (e) {
if ($('#IssueType option:selected').val() == 0)
{
jQuery('tr#StudentOrEmployeeId > td.CaptionTD').html('Student Id')
}
else
{
jQuery('tr#StudentOrEmployeeId > td.CaptionTD').html('Employee');
}
}
}], }
},
{ name: 'StudentOrEmployeeId', 'index': 'StudentOrEmployeeId', editable: true, },
label property of formoptions of colModel can be used to specify the label of Add/Edit form.
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 jquery.maskedinput-1.3.js
In column 1, are the phone types. In column 2 the phone numbers.
{ name: 'PhoneTypeId', index: 'PhoneTypeId', hidden: true, editable: true, sortable: true},
{ name: 'Phone', index: 'Phone', width: 150, editable: true, editoptions: { dataInit: function (elem) { $(elem).mask("(999) 999-9999"); }, dataEvents: [{ type: 'change', fn: function (e) { hasChanges=true } }]}, editrules:{required: true}, sortable: true },
I'd like to dynamically change the mask based on the type of phone. Is this possible?
My data is json serialized objects:
datatype: "local",
data: #Html.Raw(ViewBag.Phones)
editurl: 'clientArray'
Thanks,
Gen
You can add change event (using dataInit) of the phone type and based on this you can change the mask (if this plugin allows this). Initially when you start editing (depending on the edit type - form edit or inline edit) you can use some events before editing by example beforeShowForm for form edit or beforeEditRow for inline edit. If you use Guriddo jqGrid JS you can look at the documentation here
EDIT:
In case the field phonetype is not editable by the user then
{ name: 'Phone', index: 'Phone', width: 150, editable: true,
editoptions:{
dataInit: function (elem, options) {
// use the id of the row
var id = options.rowId;
// content of the phonetype cell
var phonetypeval = $(this).jqGrid('getCell', id, 'PhoneTypeId')
if( phonetypeval === 'something') {
mask = 'mask1';
} else {
mask = 'mask2';
}
$(elem).mask(mask);
},
dataEvents: [{
type: 'change', fn: function (e) { hasChanges=true } }
]}
, editrules:{required: true},
sortable: true}
Note that this code is valid for inline and form edit.
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.
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)
{
}