We Keep Coding

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.

Jqgrid row height changes on mouseover

Here is my colNames:
colNames: ['', '<span class="ui-icon ui-icon-flag"></span>', 'NTPEP Number', 'Manufacturer', 'Product', 'Status','','Data', 'Actions'],
Here is my colModel:
colModel: [{ name: 'tc_id', index: 'tc_id', align: 'left', hidden: true, resizable: false, key: true },
{ name: 'Flag', index: 'Flag', width:30,align: 'left', resizable: false, formatter: function (cellvalue, options, rowObject) { return "<div id= flag_" + rowObject[0] + " class='flag'><span class='ui-icon ui-icon-flag'></span></div>" } },
{ name: 'NTPEP_Number', index: 'NTPEP_Number', width: 150, align: 'left', resizable: false, formatter: fontColorFormat },
{ name: 'Manufacturer', index: 'Manufacturer', width: 200, align: 'left', resizable: false },
{ name: 'Product', index: 'Product', width: 150, align: 'left', resizable: false, formatter: fontColorFormat },
{ name: 'Status', index: 'Status', width: 80, align: 'left', resizable: false },
{ name: 'Locked_Flag', index: 'Locked_Flag', width: 30, align: 'left', resizable: false,formatter:lockedFlag},
{ name: 'Data', sortable: false, edittype: 'select', width: 70, align: 'left', sortable: false, formatter: function (cellvalue, options, rowObject) { return "<div id= action_" + rowObject[0] + " class='action'><div class='btn-group' id='actions'><div class='collapse navbar-collapse'><ul class='actions'><li class='dropdown'><a href='#' class='dropdown-toggle grid-icon' data-toggle='dropdown'></a><ul class='dropdown-menu'><li><a href='#'>Product</a></li><li><a href='#'>Test</a></li></ul></li></ul></div></div><div class='clear'></div></div>"; }, resizable: false },
{ name: 'Actions', index: 'Actions', sortable: false, edittype: 'select', width: 85, align: 'left', sortable: false, formatter: function (cellvalue, options, rowObject) { return "<div id= action1_" + rowObject[0] + " class='action1'><div class='btn-group' id='actions'><div class='collapse navbar-collapse'><ul class='actions'><li class='dropdown'><a href='#' class='dropdown-toggle grid-icon' data-toggle='dropdown'></a><ul class='dropdown-menu'><li><a href='#'>Product</a></li><li><a href='#'>Test</a></li></ul></li></ul></div></div><div class='clear'></div></div>"; }, resizable: false }],
rowNum: 20,
rowList: [2, 10, 20, 50], // page size dropdown
pager: jQuery('#pager_Alerts'),
pgbuttons: true,
viewrecords: true,
pagerpos: 'right',
recordpos: 'left',
shrinkToFit: false,
sortorder: "asc",
sortname: "tc_id",
loadtext: "Loading",
width: 795,
height: "100%",
hoverrows: false,
onCellSelect: function (rowid, iCol, cellcontent, e) {}
In Chrome,when i move the mouse over rows,row height increase automatically like as follow.
This is not desired behavior:
While in IE,it works fine ,just like normal jqgrid row.
Kindly tell me,what is the problem?Is it css problem or i am missing some property?

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',
....

Call Jquery grid inside a function

I have a jquery grid.
I want to change the data of jquery grid on dropdown change event.
So I need to call the jqgrid inside the change event.
below is my code
$("#ddlCategory").change(function () {
UserJqGrid();
GetMapDataOnChange();
});
The first function return a jqgrid and the 2nd function will return a map.
But only 1st time the jqgrid load.After that on change the dropdown list the data of the grid not updated.
my UserJqGrid() function is
$("#list").jqGrid({
url: "<?php echo base_url() ; ?>userController/GetUserGirdData?catIds=" + str + "&cityId=" + cityId,
datatype: 'json',
mtype: 'GET',
colNames: ['Object Id', 'Name', 'Longitute', 'Latitute', 'Country', 'City'],
colModel: [{
name: "id",
index: "id",
key: true,
width: 20,
editable: true,
key: true,
editoptions: {
readonly: true,
size: 10
}
}, {
name: "objName",
index: "objName",
width: 100,
editable: true
}, {
name: "longi",
index: "longi",
width: 30,
align: "left",
editable: true
}, {
name: "lati",
index: "lati",
width: 30,
align: "left",
editable: true
}, {
name: "countryName",
index: "countryName",
width: 50,
align: "left",
editable: true
}, {
name: "cityName",
index: "cityName",
width: 50,
align: "left",
sortable: false,
editable: true
}, ],
pager: '#pager',
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'id',
sortorder: 'desc',
viewrecords: true,
width: 900,
gridview: true,
shrinkToFit: true,
//rownumbers: true,
height: 200,
caption: 'Shipping Method',
editurl: '../php/EditShipping.php'
});
jQuery("#list").jqGrid('navGrid', '#pager', {
edit: true,
add: true,
del: false,
excel: false,
search: false
});

I solved my problem.
I call this reload event of grid.As the grid is already created so we don't need to call the whole function again.Just need to reload the grid with new data.
jQuery("#list")
.jqGrid('setGridParam',
{
url:"<?php echo base_url() ; ?>userController/GetUserGirdData?catIds=" + str + "&cityId=" +cityId,
datatype: 'json',
mtype: 'GET'
}).trigger("reloadGrid");