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.
Related
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, ''];
},
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.
I wrote a table with JqGrid, but I found every row`s property of table is "tr id = 0" Following is my code and screenshot. What caused this error? Any help will be appreciated.
jQuery(grid_selector).jqGrid({
datatype: "json",
url:"getAllUserInfo.do",
mtype: 'POST',
height: 250,
colNames: ['Operation', 'userID', 'UserName', 'FullName', 'Department', 'Role', 'Telephone', 'MobilePhone', 'Mail', 'Status'],
colModel: [
{name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,search:false,
formatter: 'actions',
formatoptions: {
keys: true,
delOptions: {recreateForm: true, beforeShowForm: beforeDeleteCallback},
onSuccess:function(respone){
var msg=respone.responseText;
if(msg=='success')
return true;
else
{
alert(msg);
return [false,msg];
}
},
editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback,}
}
},
{name: 'userID', index: 'userID', width: 60, sorttype: "int", editable:false, sortable:false, search:false, align:'center' },
{name: 'userName', index: 'userName', width: 100, editable: true, sorttype: "text",searchoptions:{sopt:['eq','ne','in','ni']},editrules:{required:true},align:'center'},
{name: 'fullName', index: 'fullName', width: 100, editable: true, sorttype: "text", searchoptions:{sopt:['eq','ne','in','ni']},editoptions: {size: "20", maxlength: "30"}},
{name: 'department', index: 'department', width: 100, editable: true, sorttype: "text", searchoptions:{sopt:['eq','ne','in','ni']},editoptions: {size: "20", maxlength: "30"},editrules:{required:true}},
{name: 'role', index: 'role', width: 70, editable: true, sorttype: "text",searchoptions:{sopt:['eq','ne','in','ni']}, editrules:{required:true}},
{name: 'telephone', index: 'telephone', width: 70, editable: true, sorttype: "text", searchoptions:{sopt:['eq','ne','in','ni']},editrules:{required:true,number:true}},
{name: 'mobilePhone', index: 'mobilePhone', width: 150,editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','in','ni']}},
{name: 'mail', index: 'mail', width: 150,editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','in','ni']}},
{name: 'status', index: 'status', width: 60, editable:true, edittype:"text", searchoptions:{sopt:['eq','ne']}}
],
viewrecords: true,
rowNum: 10,
rowList: [10, 20, 30],
pager: pager_selector,
altRows: true,
multiselect: true,
multiboxonly: true,
onCellSelect:function(rowid, e){
},
gridComplete:function (){
$("#grid-table").closest("div.ui-jqgrid-view")
.children("div.ui-jqgrid-titlebar")
.css("text-align", "center").css("line-height","40px")
.children("span.ui-jqgrid-title")
.css("float", "none");
},
loadComplete: function () {
var table = this;
setTimeout(function () {
var msg= $("#grid-table").getGridParam('userData');
styleCheckbox(table);
updateActionIcons(table);
updatePagerIcons(table);
enableTooltips(table);
}, 0);
var re_records = $("#grid-table").getGridParam('records');
if(re_records == 0 || re_records == null){
if($(".norecords").html() == null){
$("#grid-table").parent().append("<div class=\"norecords\">No Records</div>");
}
$(".norecords").show();
}
else
{
$(".norecords").hide();
}
},
editurl:"userInfoOperate.do",
caption: "UserList",
autowidth: true,
});
Check it whether rows data has column with "id" as the name, just like the picture shows below. JqGrid will use the value of "id" column in rows data as the id value of tr tags, if it does have an id column in rows data.
I have bind the jqGrid from MVC controller , below is my jqgrid code . I want to export selected checkbox row data to csv , i have gone through all code's but every one providing sample local data, but i am binding from server to jqGrid,so when i select the checkbox rows in jqGrid and click on "Export " button the entire row should export to csv, can anybody have the solution ?
$('#jQGrid').jqGrid({
search: true,
multiboxonly: true,
colNames: ["PayloadCorrelationId", "Export", "Asset", "DateReported", "ErrorType", "Error", "Latitude", "Longitude", "Payloadurl"],
colModel: [
{ name: 'CorrelationId', jsonmap: 'CorrelationId', hidden: true, width: 2 },
{ name: "", editable: true, edittype: "checkbox", width: 45, sortable: false, align: "center", formatter: "checkbox", editoptions: { value: "1:0" }, formatoptions: { disabled: false } },
{ name: 'Device', jsonmap: 'Device', width: 60 }, { name: 'DateReported', jsonmap: 'DateReported', width: 100 },
{ name: 'ErrorType', jsonmap: 'ErrorType', width: 85 },
{ name: 'Error', jsonmap: 'Error', width: 140 },
{ name: 'Latitude', jsonmap: 'Latitude', width: 80 }, { name: 'Longitude', jsonmap: 'Longitude', width: 80 },
{ name: 'Payloadurl', jsonmap: 'Payloadurl', width: 180, formatter: 'link' }],
cellEdit: true,
pager: jQuery('#divpager'),
rowList: [5, 20, 50, 100],
rowNum:5,
sortorder: "desc",
datatype: 'json',
width: 900,
height: 'auto',
viewrecords: true,
mtype: 'GET',
gridview: true,
loadonce: true,
url: '/DataIn/DataInSearchResult/',
emptyrecords: "No records to display",
onSelectRow: true,
onSelectRow: function (id, status) {
var rowData = jQuery(this).getRowData(id);
configid = rowData['CorrelationId'];
alert(configid);
// Add this
var ch = jQuery(this).find('#' + id + ' input[type=checkbox]').prop('checked');
if (ch) {
jQuery(this).find('#' + id + ' input[type=checkbox]').prop('checked', false);
} else {
jQuery(this).find('#' + id + ' input[type=checkbox]').prop('checked', true);
}
// end Add
rowChecked = 1;
currentrow = id;
},
loadComplete: function () {
var ts = this;
if (ts.p.reccount === 0) {
$(this).hide();
} else {
$(this).show();
$("#lblTotal").html($(this).getGridParam("records") + " Results");
}
}
});
Just to clarify, There must be any buttons on clicking which the csv will generate from the selected check box. If it is so then loop through the grid data to filter out checked rows. You can loop through the grid data easily on firing the button event. Based on the resultant data create the csv.
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");