How to reload a jqGrid with new query string value - jqgrid

I load jqgrid with drop down values using onchange event.
But when i again choose some other value in drop down i need the jqgrid to show the corresponding values.
Here s how i load the jqgrid
function getGrid() {
var mOptometrist = $('#optOptometristList').val();// Drop down value
alert(mOptometrist);
//jQuery("#list").jqGrid().setGridParam({ url: 'Schedule.ashx?mOptometristId=' + mOptometrist + '' }).trigger("reloadGrid");
jQuery("#jQGridDemo").jqGrid({
url: 'Schedule.ashx?mOptometristId=' + mOptometrist + '',
datatype: "json",
colNames: ['Id', 'Day', 'Start Time', 'End Time', 'Interval', 'Session', "Patient", 'Slots', 'Room Number'],
colModel: [
{ name: 'SlNo', index: '_id', width: 20, stype: 'text', editable: true, editoptions: { disabled: true} },
{ name: 'DayOfWeek', index: 'Day', width: 150, stype: 'text', sortable: true, editable: true, edittype: "select", formatter: 'select', editoptions: { value: getAllSelectOptions()} },
{ name: 'StartTime', index: 'StartTime', width: 150, editable: true, formatter: 'date', formatoptions: { srcformat: 'u', newformat: 'H:i:s'} },
{ name: 'EndTime', index: 'EndTime', width: 60, editable: true, formatter: 'date', formatoptions: { srcformat: 'u', newformat: 'H:i:s'} },
{ name: 'Interval', index: 'Interval', width: 80, align: "right", editable: true },
{ name: 'Session', index: 'Session', width: 40, align: "right", editable: true },
{ name: 'PatientsPerSlot', index: 'Patient', width: 80, align: "right", editable: true },
{ name: 'Slots', index: 'Slots', width: 150, sortable: false, editable: true },
{ name: 'RoomID', index: 'RoomNumber', width: 100, sortable: false, editable: true }
],
rowNum: 10,
mtype: 'GET',
loadonce: false,
rowList: [10, 20, 30],
pager: '#jQGridDemoPager',
sortname: '_id',
viewrecords: true,
sortorder: 'desc',
caption: "List Employee Details",
editurl: 'Schedule.ashx?mOptometristId= ' + mOptometrist,
loadComplete: function () {
$("#jQGridDemo").setColProp('Day', { editoptions: { value: "1:Sunday;2:Monday;3:Tuesday"} });
}
});

You can use
url: "",
postData: {
mOptometristId: function () {
return $('#optOptometristList').val();
}
}
instead of
url: 'Schedule.ashx?mOptometristId=' + mOptometrist + ''
Inside of onchange event you need just call $("#jQGridDemo").trigger("reloadGrid");. See the answer for more details.

Related

Jqgrid - only one search option appears in the header column

I am working in a Jqgrid and have encountered a problem. I have looked at many examples and read alot of documentation but can't seem to determine why only 1 search option appears in the column header as opposed to the others such as "ge" "le" "eq" etc?
This is my code:
jQuery("#jQGridDemo").jqGrid({
url: 'http://localhost:58404/JQGridHandler.ashx',
datatype: "json",
colNames: ['Property ID', 'Property Ref', 'Short Address', 'Scheme Code', 'Scheme Name', 'Property Type', 'Tenure Type', 'Status'],
colModel: [
{ name: 'PropertyID', index: 'PropertyID', width: 70, align: "left", searchoptions: {sopt: ["ge","le","eq"]}, sortable: true},
{ name: 'PropertyRef', index: 'PropertyRef', width: 75, align: "left", stype: 'text', sortable: true},
{ name: 'ShortAddress', index: 'ShortAddress', width: 200, align: "center", search:true, stype: 'text', searchoptions: {sopt: ["cn","ge","le","eq"]}, sortable: true},
{ name: 'SchemeCode', index: 'SchemeCode', width: 80, align: "center", sortable: true },
{ name: 'SchemeName', index: 'SchemeName', width: 80, align: "center", stype: 'text', sortable: true },
{name: 'PropertyType',width: 80, align: "center",},
{ name: 'TenureType', index: 'TenureType', width: 80, align: "center", sortable: true },
{ name: 'Status', index: 'Status', width: 75, align: "center", sortable: true },
],
beforeProcessing: function (data) {
//Create the filters
getDropDownValues(data, 'PropertyType')
getDropDownValues(data, 'TenureType')
getDropDownValues(data, 'Status')
$(this).jqGrid('destroyFilterToolbar')
.jqGrid('filterToolbar', {
stringResult: true,
searchOperators: true
});
},
onSelectRow: function(id){
if(id && id!==lastsel2){
jQuery('#jQGridDemo').jqGrid('restoreRow',lastsel2);
jQuery('#jQGridDemo').jqGrid('editRow',id,true);
lastsel2=id;
}
},
height: 'auto',
width: 'auto',
rowNum: 30,
editable: true,
mtype: 'GET',
loadonce: true,
rowList: [30, 40, 50],
pager: '#jQGridDemoPager',
sortname: 'PropertyId',
viewrecords: true,
sortorder: 'desc',
caption: "Property Details",
editurl: 'http://localhost:58404/JQGridHandler.ashx'
});

Is it possible to show spinner while inline editing JQGrid?

I am using JQGrid. While inline editing the JQGrid and saving data to DB, it takes some time, during that time my page becomes inresponsive. So, during that timespan can I show spinner to show user that your edited data is "Updating..."
I am using the below Code for jqgrid init:
LoadProjectDetailsGrid = function () {
var myGrid = $('#jqgProjectLists');
myGrid.jqGrid("GridUnload");
myGrid.jqGrid({
url: '#Url.Action("GetProjectLists", "Config")',
editurl: '#Url.Action("UpdateProjectListGrid", "Config")',
datatype: 'json',
mtype: 'POST',
contentType: 'application/json; charset-utf-8',
colNames: ['ID', 'PJT', 'Full Name', 'Model Type', 'Pjt Code', 'Model State', 'Project Type', 'Dev. Department',
'Client Model Name1', 'Client Model Name2', 'Client Model Name3', 'Model Status', 'Action'],
colModel: [
{ name: 'Model_ID', index: 'Model_ID', width: 100, sortable: true, align: 'left', editable: false, search: false, hidden: true },
{ name: 'PJT_Nm', index: 'PJT_Nm', width: 150, sortable: true, align: 'left', editable: false, search: true, stype: 'text', searchoptions: { sopt: ['cn', 'eq', 'ne'] }, searchrules: { required: true } },
{ name: 'Model_Nm', index: 'Model_Nm', width: 140, sortable: true, align: 'left', editable: false, search: true, stype: 'text', searchoptions: { sopt: ['cn', 'eq', 'ne'] }, searchrules: { required: true } },
{ name: 'Model_Type', index: 'Model_Type', width: 80, sortable: true, align: 'center', editable: false, search: false },
{ name: 'PJT_Code', index: 'PJT_Code', width: 100, sortable: true, align: 'left', editable: false, search: false, hidden: true },
{ name: 'Model_State', index: 'Model_State', width: 110, sortable: true, align: 'center', editable: false, search: false },
{ name: 'PJT_Type', index: 'PJT_Type', width: 100, sortable: true, align: 'center', editable: false, search: false },
{ name: 'Dev_Dept_Nm_En', index: 'Dev_Dept_Nm_En', width: 200, sortable: true, align: 'left', editable: false, search: false },
{ name: 'Client_Model_Nm1', index: 'Client_Model_Nm1', width: 120, sortable: true, align: 'left', editable: true, search: false, edittype: "text", editoptions: { size: "20", maxlength: "29" }},
{ name: 'Client_Model_Nm2', index: 'Client_Model_Nm2', width: 120, sortable: true, align: 'left', editable: true, search: false, edittype: "text", editoptions: { size: "20", maxlength: "29" }},
{ name: 'Client_Model_Nm3', index: 'Client_Model_Nm3', width: 120, sortable: true, align: 'left', editable: true, search: false, edittype: "text", editoptions: { size: "20", maxlength: "29" }},
{ name: 'Model_Status', index: 'Model_Status', width: 100, sortable: true, align: 'center', editable: true, search: false, edittype: 'checkbox', editoptions: { value: "Y:N" }},
{ name: 'Action', index: 'Action', width: 70, sortable: false, formatter: 'actions', viewable: false, search: false, formatoptions: { keys: true, editformbutton: false, editbutton: true, delbutton: false } }
],
pager: '#jqgProjectListPager',
rowNum: 10,
rowList: [10, 20, 30, 100],
sortname: 'PJT_Nm',
sortorder: "desc",
autowidth: true,
shrinkToFit: true,
viewrecords: true,
gridview: true,
loadonce: true,
rownumbers: true,
rownumWidth: 30,
height: 'auto',
width: 'auto',
caption: " " + "PROJECT LIST",
loadtext: "Loading ...",
emptyrecords: "No data to display!",
multiselect: false,
prmNames: { id: "Model_ID" },
cellsubmit: "remote",
});
// Navi(View, Add,...)search: false,
myGrid.jqGrid('navGrid', '#jqgProjectListPager', { add: false, edit: false, del: false, search: true, view: true, refresh: true },
//edit options
{
},
//add options
{},
//del options
{
},
//search options
{
searchOnEnter: true,
closeOnEscape: true,
reloadAfterSearch: true
},
// veiw options
{
width: 500, height: 'auto',
closeOnEscape: true,
beforeShowForm: function (form) {
},
afterShowForm: function (form) {
},
showHideColumn: function (form) {
}
}
);
$("#jqgProjectLists").jqGrid('inlineNav', '#jqgProjectListPager',
{
add: false,
edit: true,
editicon: "ui-icon-pencil",
save: true,
saveicon: "ui-icon-disk",
savetext : "Save",
cancel: true,
cancelicon: "ui-icon-cancel",
canceltext: "Cancel",
}
);
//handles the grid resize on window resize
ResizeJQGrid(myGrid, $(window));
}
In ConfigController
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult UpdateProjectListGrid(ProjectListsDetails oProjectListRow)
{
_configMgr.UpdateProjectListGrid(oProjectListRow, CurrentCaUser);
JqGridDataRequest jqgdRequest = new JqGridDataRequest();
JqGridDataResponse response = _configMgr.GetProjectLists(jqgdRequest, oProjectListRow, CurrentCaUser);
var jsonData = new
{
total = response.TotalPages,
page = jqgdRequest.page,
records = response.TotalRecords,
rows = response.Rows
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
Well, you can show your spinner on beforeSubmit event and hide your spinner on afterSubmit event in edit options section of your jqgrid difinition, but you can use some different events from documentation.
//edit options
{
beforeSubmit : function(postdata, formid) {
$("#your-spinner").show();
return[true,''];
},
afterSubmit : function(response, postdata)
{
$("#your-spinner").hide();
return [true,'']
}
},

Unable to get property 'stype' of undefined or null reference

I using jqgrid filtertoolbar. I'm having some 4 select filter in that. When i tried to select one of the values in any select box i'm getting the following error.
Unable to get property 'stype' of undefined or null reference
Is there any general error or missing value that i have done anywhere in my code.
//Code:
Sample of colModel:
colModel:
jQuery.ajax({
url: 'ManageCandidateDetails.aspx/GetAllCandidateDetails',
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
// debugger;
genericResult = $.parseJSON(data.d);
// debugger;
jQuery("#CandidateDetailsGrid").jqGrid({
data: genericResult.candidateDetails,
datatype: "local",
// colNames: ['CandidateId', 'Email', 'Name'],
//colModel: [{ name: 'CandidateId', index: 'CandidateId', width: 75}, { name: 'Email', index: 'Email', width: 75 }, { name: 'Name', index: 'Name', width: 100}],
colNames: ['CandidateId', 'Name', 'Email', 'DOB', 'Gender', 'Qualification', 'Department', 'OtherQual', 'OtherDept', 'Exp(Years)', 'Exp(Months)', 'Mobile', 'Country', 'State', 'City', 'ZipCode', 'FilePath', 'Sel.Status', 'CreatedDate', 'ModifiedDate', 'ModifiedBy', 'Status', 'LastLoginTime'],
colModel: [{ name: 'CandidateId', index: 'CandidateId', width: 75, editable: true },
{ name: 'Name', index: 'Name', width: 100, editable: true },
{ name: 'Email', index: 'Email', width: 75, editable: true },
{ name: 'DOB', index: 'DOB', width: 50, editable: true, searchoptions: { dataInit: newDatePick }, editoptions: { dataInit: newDatePick} },
{ name: 'Gender', index: 'Gender', width: 50, editable: true },
{ name: 'Qualification', index: 'Qualification', width: 75, editable: true, stype: 'select', editoptions: { value: ":All;" + genericResult.qualification} },
{ name: 'Department', index: 'Department', width: 75, editable: true, stype: 'select', editoptions: { value: ":All;" + genericResult.department} },
{ name: 'OtherQual', index: 'OtherQual', width: 75, editable: true },
{ name: 'OtherDept', index: 'OtherDept', width: 75, editable: true },
{ name: 'ExperienceYears', index: 'ExperienceYears', width: 75, editable: true },
{ name: 'ExperienceMonths', index: 'ExperienceMonths', width: 75, editable: true },
{ name: 'Mobile', index: 'Mobile', width: 100, editable: true },
{ name: 'Country', index: 'Country', width: 100, editable: true, stype: 'select', formatter: 'select', edittype: 'select',
searchoptions: {
value: allCountries, stype: 'select'
},
editoptions: {
value: allCountries,
dataInit: removeTheOptionAll,
dataEvents: [
{ type: "change", fn: function (e) { changeStateSelect($(e.target).val(), e.target); } }
]
}
},
{ name: 'state', index: 'state', width: 100, formatter: "select", stype: "select",
editable: true, edittype: "select",
editoptions: { value: allStates, dataInit: removeTheOptionAll },
searchoptions: { value: allStates }
},
{ name: 'City', index: 'City', width: 50, editable: true },
{ name: 'ZipCode', index: 'ZipCode', width: 50, editable: true },
{ name: 'FilePath', formatter: function () { return "<img src='../Images/error.png' alt='my image' />"; }, unformat: imageUnFormat, index: 'FilePath', width: 50 },
{ name: 'SelectedStatus', index: 'SelectedStatus', width: 75, edittype: 'checkbox', formatter: 'checkbox', editable: true, editoptions: { value: "1:Yes;0:No" }, stype: 'select', searchoptions: { sopt: ['eq'], value: "All:All;1:Yes;0:No"} },
{ name: 'CreatedDate', index: 'CreatedDate', width: 75, formatoptions: { srcformat: "ISO8601Long", newformat: "d/m/Y h:i A" },
searchoptions: { dataInit: datePick }, editoptions: { dataInit: datePick }
},
{ name: 'ModifiedDate', index: 'ModifiedDate', width: 75, formatoptions: { srcformat: "ISO8601Long", newformat: "d/m/Y h:i A" },
searchoptions: { dataInit: datePick }, editoptions: { dataInit: datePick }
},
{ name: 'Modifiedby', index: 'ModifiedBy', width: 75 },
{ name: 'Status', index: 'Status', width: 50, edittype: 'checkbox', editable: true, stype: 'select', searchoptions: { value: "All:All;1:Yes;2:No"} },
{ name: 'LastLoginTime', index: 'LastLoginTime', width: 75, formatoptions: { srcformat: "ISO8601Long", newformat: "d/m/Y h:i A" },
searchoptions: { dataInit: datePick, attr: { title: 'Select Date'} }, editoptions: { dataInit: datePick }
}],
rowNum: 10,
mtype: 'GET',
loadonce: true,
rowList: [10, 20, 30],
pager: '#CandidateDetailsGridPager',
sortname: 'CandidateId',
viewrecords: true,
caption: "Candidate Details",
ignoreCase: true,
gridview: true,
rownumbers: true
});
jQuery("#CandidateDetailsGrid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
$('#CandidateDetailsGrid').jqGrid('navGrid', '#CandidateDetailsGridPager',
{
edit: true,
add: true,
del: true,
search: true,
searchtext: "Search",
addtext: "Add",
edittext: "Edit",
deltext: "Delete"
},
{ // edit option
beforeShowForm: function (form) {
}
},
{ // add option
addcaption: 'Add Candidate Detail',
beforeShowForm: function (form) {
//debugger;
$("#myFormError").remove();
$('#tr_LastLoginTime', form).hide();
$('#tr_CandidateId', form).hide();
$('#tr_Modifiedby', form).hide();
$('#tr_ModifiedDate', form).hide();
$('#tr_CreatedDate', form).hide();
},
onclickSubmit: function (response, postData) {
debugger;
$("#FormError").text("");
$("<tr id='myFormError'><td colspan='2'><div style='background-color:green;color:white; font-weight:bold; width:100%;padding-left:5px;'>Success</div></td></tr>").insertAfter("#FormError");
}
}
);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
}
});
//Unformat the image during the edit.
function imageUnFormat(cellvalue, options, cell) {
return cellvalue
}

how to set the jqgrid column width, and re-sizable, in a scrollable jqgrid?

i am using jqgrid and facing a problem with column width
here is my js code
jQuery(document).ready(function () {
var grid = jQuery("#grid");
grid.jqGrid({
url: '/Admin/GetUserForJQGrid',
datatype: 'json',
mtype: 'Post',
cellsubmit: 'remote',
cellurl: '/Admin/GridSave',
//formatCell: emptyText,
colNames: ['Id', 'Privileges', 'First Name', 'Last Name', 'User Name', 'Password', 'Password Expiry', 'Type', 'Last Modified', 'Last Modified By', 'Created By', ''],
colModel: [
{ name: 'Id', index: 'Id', key: true, hidden: true, editrules: { edithidden: true } },
{ name: 'Privileges', index: 'Privileges', width: "350", resizable: false, editable: false, align: 'center', formatter: formatLink, classes: 'not-editable-cell' },
{ name: 'FirstName', index: 'FirstName', width:350, align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
{ name: 'LastName', index: 'LastName',width:350, align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
{ name: 'UserName', index: 'UserName', width:300,align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
{ name: 'Password', index: 'Password',width:400, align: "left", sorttype: 'text', resizable: true, editable: false, editrules: { required: true }, classes: 'not-editable-cell' },
{
name: 'Password_Expiry',width:250, index: 'Password_Expiry', align: "left", resizable: true, editable: true, editoptions: {
size: 20, dataInit: function (el) {
jQuery(el).datepicker({
dateFormat: 'yy-mm-dd', onSelect: function (dateText, inst) {
jQuery('input.hasDatepicker').removeClass("hasDatepicker")
return true;
}
});
}
}
},
{
name: 'Type', width: "250", index: 'Type', sorttype: 'text', align: "left", resizable: true, editable: true, editrules: { required: true }, edittype: 'select', editoptions: {
value: {
'Normal': 'Normal',
'Sales': 'Sales',
'Admin': 'Admin',
'SuperAdmin': 'SuperAdmin'
},
dataEvents: [
{
type: 'change',
fn: function (e) {
var row = jQuery(e.target).closest('tr.jqgrow');
var rowId = row.attr('id');
jQuery("#grid").saveRow(rowId, false, 'clientArray');
}
}
]
}
},
{ name: 'Modified',width:250, index: 'Modified', sorttype: 'date', align: "left", resizable: true, editable: false, classes: 'not-editable-cell' },
{ name: 'ModifiedBy', width:250, index: 'ModifiedBy', sorttype: 'text', align: "left", resizable: true, editable: false, classes: 'not-editable-cell' },
{ name: 'CreatedBy', width:250,index: 'CreatedBy', sorttype: 'text', align: "left", resizable: true, editable: false, classes: 'not-editable-cell' },
{ name: 'Delete',width:50, index: 'Delete', width: 25, resizable: false, align: 'center', classes: 'not-editable-cell' }
],
rowNum: 10,
rowList: [10, 20, 50, 100],
sortable: true,
delete: true,
pager: '#pager',
height: '100%',
width: "650",
afterSubmitCell: function (serverStatus, rowid, cellname, value, iRow, iCol) {
var response = serverStatus.responseText;
var rst = 'false';
debugger;
if (response == rst) {
debugger;
setTimeout(function () {
$("#info_dialog").css({
left: "644px", // new left position of ERROR dialog
top: "380px" // new top position of ERROR dialog
});
}, 50);
return [false, "User Name Already Exist"];
}
else {
return [true, ""];
}
},
//rowNum: 10,
//rowList: [10, 20, 50, 100],
sortable: true,
loadonce: false,
ignoreCase: true,
caption: 'Administration',
search: false,
del: true,
cellEdit: true,
hidegrid: false,
pgbuttons : false,
pginput : false,
//viewrecords: true,
gridComplete: function () {
var ids = grid.jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var isDeleted = grid.jqGrid('getCell', ids[i], 'Delete');
if (isDeleted != 'true') {
grid.jqGrid('setCell', ids[i], 'Delete', '<img src="/Images/delete.png" alt="Delete Row" />');
}
else {
grid.jqGrid('setCell', ids[i], 'Delete', ' ');
}
}
}
}
);
grid.jqGrid('navGrid', '#pager',
{ resize: false, add: false, search: false, del: false, refresh: false, edit: false, alerttext: 'Please select one user' }
).jqGrid('navButtonAdd', '#pager',
{ title: "Add New users", buttonicon: "ui-icon ui-icon-plus", onClickButton: showNewUsersModal, position: "First", caption: "" });
});
i need a scrollable grid , when use come to this page i have to show the first 7 columns only just seven in full page. i have 11 columns in my grid rest of the columns can be seen by using scroll, but first 7 should be shown when grid loads. and every column should be re-sizable. can any body help me, i will 100% mark your suggestion if it works for me ...thank you ;) . if something is not explained i am here to explain please help me
and can i save the width of column permanently when user re-size the column, so when next time grid get loads the column should have the same width which is set by the user by re-sizing.. is it possible ?
I am not sure what you want,but you can auto adjust the width with JqGrid autowidth and shrinkToFit options.
Please refer this Post jqGrid and the autowidth option. How does it work?
this will do the trick.

jqGrid formatCell event doesn't fire

For some reason (unknown to me) the event 'formatCell' doesn't fire (no alert message shown). see code below:
$("#jqgrid").jqGrid({
datatype: "json",
colNames: ['CurrecncyID', 'Currency', 'Value', 'Calculated', 'Value', '%', 'Calculated'],
colModel: [
{ name: 'CurrecncyID', index: 'CurrecncyID', hidden: true, width: 40 },
{ name: 'CurrencyName', index: 'CurrencyName', width: 150 },
{ name: 'FullPrice', index: 'FullPrice', width: 100, editrules: { custom: true, custom_func: priceCheck }, editable: true, align: 'right', formatter: priceFormatter },
{ name: 'CalcFullPrice', index: 'CalcFullPrice', width: 100, align: 'right', formatter: priceFormatter },
{ name: 'ActualPrice', index: 'ActualPrice', width: 100, editrules: { custom: true, custom_func: priceCheck }, editable: true, align: 'right', formatter: priceFormatter },
{ name: 'Precent', index: 'Precent', width: 100, align: 'right', formatter: 'integer', formatoptions: { prefix: "% "} },
{ name: 'CalcActualPrice', index: 'CalcActualPrice', width: 100, align: 'right', formatter: priceFormatter },
],
onSelectRow: function (id) {
if (id && id !== lastsel) {
jQuery('#jqgrid').restoreRow(lastsel);
jQuery('#jqgrid').editRow(id, true);
lastsel = id;
}
},
formatCell: function (rowid, cellname, value, iRow, iCol) {
alert("before edit");
},
jsonReader: {
repeatitems: false
},
rowNum: 20,
rowList: [10, 20, 30],
pager: '#jqpager',
sortname: 'CurrecncyID',
viewrecords: true,
sortorder: "desc",
caption: "Prices List",
autowidth: true,
height: "100%",
loadtext: "Loading...",
editurl: "/handlers/myurl.ashx"
});`
There are three main editing modes used in jqGrid. The formatCell event is a part of the cell editing mode. It will be not fire in case of usage of editRow and restoreRow are the part of the inline editing mode. Probably you need use custom editable element in case of the usage of the inline editing mode.

Resources