We Keep Coding

After row saved call back in jqgrid

I need to able to tap into an event after row has been updated, I use inline editing. There is a beforeSend event in ajaxRowOptions but no matching after.
How do I implement an after save callback?
Here is my grid:
$('#myGrid').jqGrid({
datatype: 'local',
jsonReader: common.jqgrid.jsonReader('Code'),
editurl: common.getServerPath() + 'myAjax/updateSomething/',
ajaxRowOptions: {
beforeSend: function (jqXhr, settings) {
//something here
}
}
},
mtype: 'POST',
pager: '#myPager',
colNames: ['Method', 'Type', 'Package', 'Disc %'],
colModel: [
{
name: 'Code',
index: 'Code',
width: 25,
sortable: false
},
{
name: 'MethodType',
index: 'MethodType',
width: 10,
sortable: false,
align: 'center'
},
{
name: 'ProfNo',
index: 'ProfNo',
width: 15,
sortable: false,
align: 'center'
},
{
name: 'Discount',
index: 'Discount',
width: 15,
sortable: false,
edittype: 'text',
align: 'right',
editable: true,
editrules: {
number: false,
custom: true,
custom_func: validateDiscount
}
}],
scroll: true,
hidegrid: false,
altRows: true,
altclass: 'gridAltRowClass',
height: 330,
scrollOffset: 0,
width: 770,
rowNum: 500,
footerrow: true,
userDataOnFooter: true
});
and
validateDiscount: function (value) {
if (isNaN(value)) {
return [false, 'Discount must be a number.'];
}
else {
var numValue = parseFloat(Number(value).toFixed(2));
if (numValue >= 100.00) {
return [false, 'is not a valid value. Discount must be a number less than 100.'];
}
}
return [true, ''];
},

How to unchecked all checked checkbox upon loading of dialog box contain JQgrid?

Hello as title above I have a problem that when I checked my checkedbox name ( $("#divLeaveIsHalfDay").click(function () ) that call the dialog box to open and contains my JQgrid name LeaveHalfDay.
function LeaveHalfDay() {
var url1 = URL;
$("#LeaveHalfDayDataEntryList").jqGrid({
url: url1,
datatype: 'json',
mtype: 'POST',
colNames: ['RowId', 'With Halfday <br /> Morning', 'With Halfday <br /> Afternoon', 'Date', 'Day'],
colModel: [
{ name: 'rowId', index: 'rowId', hidden: true, editable: true, sortable: false, width: 80, align: 'left' },
{name: 'cbox_leave_half', index: 'cbox_leave_half', editable: true, formatter: cboxFormatterLeaveHalfDay, formatoptions: { disabled: false }, edittype: 'checkbox', editoptions: { value: "True:False" }, sortable: false, width: 70, align: 'center' },
{ name: 'cbox_leave_halfPM', index: 'cbox_leave_halfPM', editable: true, formatter: cboxFormatterLeaveHalfDayPM, formatoptions: { disabled: false }, edittype: 'checkbox', editoptions: { value: "True:False" }, sortable: false, width: 70, align: 'center' },
{ name: 'LStartDate', index: 'LStartDate', editable: false, sortable: false, width: 70, align: 'left' },
{ name: 'LDate', index: 'LDate', editable: false, sortable: false, width: 55, align: 'left' }
],
pager: $('#LeaveHalfDayDataEntryPager'),
rowNum: 5,
rowList: [5, 10, 20],
sortname: '',
sortorder: '',
viewrecords: true,
imgpath: '/Content/themes/redmond/images/',
height: '100%',
loadComplete: function (result, rowid) {
var ids = jQuery("#LeaveHalfDayDataEntryList").getDataIDs();
var len = ids.length, newLine;
if (len < 5) {
AddNewRowToGrid(len, "#LeaveHalfDayDataEntryList");
}
}
});
return false;
}
I want to unchecked all checked, checked boxes upon showing of my dialog box.
This are my checked boxes cbox_leave_half and cbox_leave_halfPM in my grid. Thanks.

Search and sorted doesn't work in JqGrid (json)

I am working with JqGrid.
I have some JSON from server
[{"Id":1,"Name":"product1","Price":234,"Size":"Small"},{"Id":18,"Name":"product2","Price":3242,"Size":"Large"}]
and Jquery code
$("#table").jqGrid({
url: '#Url.Action("GetProductsAtJSON", "Product")',
datatype: 'json',
mtype: 'GET',
colNames: ['Id', 'Name', 'Price', 'Size'],
colModel: [
{ name: 'Id', index: 'Id', width: 55, key: true, editable: true, editoptions: { readonly: true }, sortable: true, search:true },
{ name: 'Name', index: 'Name', width: 150, editable: true, editoptions: { size: 25 }, editrules: { required: true }, search: true },
{ name: 'Price', index: 'Price', width: 100, align: 'center', editable: true, editoptions: { size: 25 }, editrules: { required: true, number: true, minValue: 1, maxValue: 10000 } },
{ name: 'Size', index: 'Size', width: 150, editable: true, edittype: "select", editoptions: { value: "0:Large;1:Medium;2:Small" } }
],
pager: '#pager',
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'Id',
sortorder: "asc",
viewrecords: true,
caption: 'All product',
height: '400',
jsonReader: {
repeatitems: false,
loadonce: true,
id: "Id",
root: function (obj) { return obj; },
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.length; }
}
});
I have read the documentation and a lot of forums, but I don't understand why sorting and search doesn't work. Maybe my JSON format is incorrect and I must write total page records, but that's not working either. I use key: true from rows id, but it's not working.
What am I doing wrong?

There are some small errors in your code:
loadonce: true is jqGrid option and not the property of jsonReader
You should use sorttype property for columns which content should be interpreted not as a text. For example you should add sorttype: "integer" to the definition of 'Id' and 'Price' columns
I recommend you to consider whether the value editoptions: {value: "0:Large;1:Medium;2:Small"} is what you need. It will be important for edition only.
I recommend you additionally to use gridview: true to improve performance of the grid, use autoencode: true to interpret the values in JSON input as textes instead of HTML fragments and use height: 'auto' to have better look of the grid.
To have local searching of data you need either use navGrid or filterToolbar.
The demo is an example of fixing of your code.

How to prevent from being collapsed jqgrid while sorting

i have implemented jqgrid in my project of asp.net mvc and its working fine , i have problem while sorting. on load i keep groupCollapse = true and i need it but when i open any group and when click for sorting its being collapsed. is there any solution to prevent open group from being collapsed while sorting.
my code here
jQuery("#tblEmployeeReport").jqGrid({
data: ParsedJson,
datatype: "local",
height: 'auto',
width: 'auto',
rowNum: 50,
rowList: [50, 100],
colNames: ['Date', 'Clock In', 'Clock Out', 'Working Hr'],
colModel: [
{ name: 'DayDate', index: 'DayDate', width: 90, sorttype: "date", resizable: false, },
{ name: 'ClockIn', index: 'ClockIn', width: 100, resizable: false, },
{ name: 'ClockOut', index: 'ClockOut', width: 100, resizable: false, },
{ name: 'Working_Hr', index: 'Working_Hr', width: 100, resizable: false, },
],
pager: "#EmployeeReportPager",
viewrecords: true,
sortorder: "desc",
caption: "Employee Report",
sortname: 'DayDate',
grouping: true,
resizable: false,
groupingView: {
groupField: ['DayDate'],
groupText: ['<b>{0} - {1} Employee</b>'],
groupCollapse: true,
groupOrder: ['asc']
}
});
jQuery("#tblEmployeeReport").jqGrid('navGrid', '#EmployeeReportPager', { add: false, edit: false, del: false });

got a solution of my que. just add two more events and implement logic
Updated Code,
var expandedEmpGroups = [];
jQuery("#tblEmployeeReport").jqGrid({
data: ParsedJson,
datatype: "local",
height: 'auto',
width: 'auto',
rowNum: 50,
rowList: [50, 100],
colNames: ['Date', 'Clock In', 'Clock Out', 'Working Hr'],
colModel: [
{ name: 'DayDate', index: 'DayDate', width: 90, sorttype: "date", resizable: false, },
{ name: 'ClockIn', index: 'ClockIn', width: 100, resizable: false, },
{ name: 'ClockOut', index: 'ClockOut', width: 100, resizable: false, },
{ name: 'Working_Hr', index: 'Working_Hr', width: 100, resizable: false, },
],
pager: "#EmployeeReportPager",
viewrecords: true,
sortorder: "desc",
caption: "Employee Report",
sortname: 'DayDate',
grouping: true,
resizable: false,
groupingView: {
groupField: ['DayDate'],
groupText: ['<b>{0} - {1} Employee</b>'],
groupCollapse: true,
groupOrder: ['asc']
},
onClickGroup: function (hid, collapsed) {
var i;
i = $.inArray(hid, expandedEmpGroups) > -1;
if (!collapsed && i == false) {
expandedEmpGroups.push(hid);
}
else if (collapsed && i == true) {
//Grouphid.splice(i, 1);
expandedEmpGroups.splice($.inArray(hid, expandedEmpGroups), 1);
}
},
loadComplete: function () {
var $this = $(this)
if (expandedEmpGroups.length > 0) {
for (var i = 0; i <= expandedEmpGroups.length; i++) {
if (typeof (expandedEmpGroups[i]) != "undefined") {
$this.jqGrid("groupingToggle", expandedEmpGroups[i]);
}
}
}
}
});
jQuery("#tblEmployeeReport").jqGrid('navGrid', '#EmployeeReportPager', { add: false, edit: false, del: false });
The array variable expandedEmpGroups[] isdefined in the outer scope.

Dynamic Data to Jqgrid

i'm using jqgrid for listing data .now when ever i click search button i want to dynamically assign data to jqgrid which come from a controller action using ajax.but data still remains as the first load.any ideas?
$('#listatt').jqGrid({
datatype: 'local',
viewrecords: true,
sortname: 'RowNumber',
sortorder: 'desc',
cellsubmit: 'clientArray',
editurl: 'clientArray',
cellEdit: true,
data: mydata,
colNames: ['Sl.#', 'id', 'empid', 'Name', 'Code', 'Time', 'Status', 'Type', 'Reason'],
//columns model
colModel: [
{ name: 'RowNumber', index: 'RowNumber', align: 'left', editable: true, edittype: 'text', width: '35px' },
{ name: 'sl_No', index: 'sl_No', align: 'left', search: false, stype: 'text', searchoptions: { sopt: ['eq'] }, width: '10px', hidden: true },
{ name: 'emp_ID', index: 'emp_ID', align: 'left', editable: true, edittype: 'text', width: '35px', hidden: true },
{ name: 'emp_Name', index: 'emp_Name', align: 'left', search: false, stype: 'text', editable: false, searchoptions: { sopt: ['eq'] }, width: '200px' },
{ name: 'emp_Code', index: 'emp_Code', align: 'left', search: false, stype: 'text', editable: false, searchoptions: { sopt: ['eq'] }, width: '250px' },
{ name: 'attTime', index: 'attTime', template: dateTemplate
},
{ name: 'inOut', index: 'inOut', width: 100, editable: true, edittype: 'select', editoptions: { value: "0:Select;1:In;2:Out" }, hidden: true },
{ name: 'attType_ID', index: 'attType_ID', width: 100, formatter: "select", editable: true, edittype: 'select', editoptions: { value: "0:Absent;1:Present;2:Half Day"} },
{ name: 'attReasons', index: 'attReasons', width: 200, sortable: false, editable: true, edittype: "textarea", editoptions: { rows: "2", cols: "10"} }
],
//pager for grid
pager: $('#pager'),
//number of rows per page
rowNum: 20,
rowList: [10, 20, 40, 80, 100],
viewrecords: true,
//grid height
height: '380px',
height: '500px',
shrinkToFit: true
});
--ajax call
$.ajax({
url: '#Url.Action("GetGridDataSequence")',
data: { branchID: $("#branchID").val(), divisionID: $("#divisionID").val(), shiftID: $("#shiftID").val(), chkout: $("#chkout").is(':checked'), attdate: $("#attdate").val() },
dataType: "json",
type: "POST",
error: function () {
alert("An error occurred.");
},
success: function (data) {
$('#listatt').jqGrid('setGridParam',
{
datatype: 'local',
data: data
})
.trigger("reloadGrid");
}
});
--controller
public string GetGridDataSequence(int branchID, int divisionID, int shiftID, Boolean chkout,DateTime attdate)
{
Attendence Attendence = new Attendence();
AttendenceInfo AttendenceInfo = new AttendenceInfo();
var dt = Attendence.AttendenceSelectAll(Convert.ToInt32(this.Session["CompanyID"]), branchID, divisionID, shiftID, attdate, chkout);
var jason = JsonConvert.SerializeObject(dt);
return jason;
}

Instead you can try something like this,
function loadGrid(data){
$('#listatt').jqGrid({
datatype: 'local',
data: data,
....
});
}
And in your ajax success function,
success: function (data) {
$("#listatt").jqGrid('GridUnload');
loadGrid(data);
}

I think you need change datatype of Grid from 'local' to 'json' and add property "url"
in my project (for example):
url: 'Home/ExpensesGet?DateFrom=' + getToday(-1),
//type of data
datatype: 'json',
//url access method type
mtype: 'GET',
....