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.

export jqgrid data into excel on checkbox selection

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.

jqGrid addRowData slowing the process

I have an array of 1000 records and i pass it javascript function. it take almost 20 sec to show data in jqgrid.
I know that addDataRow method is very slow but i could not find any other alternative.
Is there any way i can make it much faster ?
Script:
function GetCommodityGrid(array) {
// alert("Methods");
// var rows = array;
alert(rows.length);
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
// url: 'TestGrid/GridData',
datatype: 'local',
//
colNames: ['COM_NAME', 'COM_CODE', 'DELV_UNITS', 'LOT_SIZE', 'TICK_SIZE', 'TICK_VALUE'],
colModel: [
{ name: 'COM_NAME', index: 'COM_NAME', width: 90, editable: true },
{ name: 'COM_CODE', index: 'COM_CODE', width: 100, editable: true },
{ name: 'DELV_UNITS', index: 'DELV_UNITS', width: 80, align: "right", editable: true },
{ name: 'LOT_SIZE', index: 'LOT_SIZE', width: 80, align: "right", editable: true },
{ name: 'TICK_SIZE', index: 'TICK_SIZE', width: 80, align: "right", editable: true },
{ name: 'TICK_VALUE', index: 'TICK_VALUE', width: 150, sortable: false, editable: true }
],
rowList: ReturnRowList(),
// loadonce: false, // hit only once on the server
rownumbers: true, // show the numbers on rows
pager: '#pager',
sortname: 'COM_NAME',
viewrecords: true, // show the total records on the end of the page
editurl: "TestGrid/EditRecord",
caption: "JSON Example"
});
for (var x = 0; x <= rows.length -1; x++) {
$("#list").addRowData(x, rows[x]);
}
// jQuery("#list").setGridParam({ rowNum: 10 }).trigger("reloadGrid");
$("#list").jqGrid("navGrid", "#pager", { add: false },
{ //the Edit options
closeAfterEdit: true,
afterSubmit: function (response) {
// you should return from server OK in sucess, any other message on error
alert("after Submit");
if (response.responseText == "OKK") {
alert("Update is succefully")
return [true, "", ""]
}
else {
alert("Update failed")
$("#cData").click();
return [false, "", ""]
}
}
});

In general passing your array to data option should do the trick:
jQuery("#list").jqGrid({
datatype: 'local',
data: rows,
...
});
Depending on how your array looks you might also need to add:
...
localReader: { repeatitems: true },
...
On rare cases when your data are extremely specific (you haven't included them in your question) some further changes to localReader might be required.

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");

jqGrid not displaying pagination links

I have some legacy code here and I am using jqGrid in order to paginate some XML data. The XML contains 354 record and the first 20 of them are displayed as soon as the page loads, but then jqGrid does not display the links to browse the other records and paginate them.
I am sure jqGrid is getting the full XML and it even says Viewing 1 - 20 of 354, but doesn't really let me paginate.
And if I enter the number of the pagination ("2" for page 2, for example) and enter it, it makes an HTTP request (which returns 200 status) and does nothing!
This is the JS code for the pagination:
$(document).ready(function() {
erc_id = $('#erc_id').val();
jQuery("#list4").jqGrid({
url: "/ercs/" + erc_id + "/exemplares.xml",
datatype: "xml",
width: 650,
pager: "gridPager",
height: 'auto',
xmlReader: {
root: "exemplares",
row: "exemplar",
repeatitems: false,
id: "id"
},
colNames: ['Código', 'Referência', 'Num. Controle', 'Dt. Moldagem', 'Traço'],
colModel: [
{
name: 'codigo',
index: 'codigo',
width: 60,
sortable: false},
{
name: 'referencia',
index: 'referencia',
width: 160,
sortable: false},
{
name: 'numero-controle',
index: 'numero-controle',
width: 60,
sortable: false,
align: 'center'},
{
name: 'data-moldagem',
index: 'data-moldagem',
width: 60,
sortable: false},
{
name: 'traco',
index: 'traco',
width: 60,
sortable: false,
xmlmap: "traco>reference"},
],
viewrecords: true,
caption: "Exemplares",
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id = subgrid_id + "_t";
my_row_id = row_id
$("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
row_id = row_id.replace("5687", "");
jQuery("#" + subgrid_table_id).jqGrid({
url: "/ercs/" + erc_id + "/exemplares/" + row_id + "/cps.xml",
datatype: "xml",
height: 'auto',
width: 550,
xmlReader: {
root: "cps",
row: "cp",
repeatitems: false,
id: "id"
},
colNames: ['Número', 'Carga', 'Idade', 'Prensa', 'Retifica', 'Ruptura', 'retifica', 'N cont antigo'],
colModel: [
{
name: "numero",
index: "numero",
width: 60,
sortable: false},
{
name: "carga",
index: "carga",
width: 50,
sortable: false,
align: 'center'},
{
name: "idade",
index: "idade",
width: 30,
sortable: false,
align: 'center'},
{
name: "prensa",
index: "carga",
width: 30,
sortable: false,
align: 'center'},
{
name: "carga",
index: "carga",
width: 50,
sortable: false,
align: 'center'},
{
name: "ruptura",
index: "ruptura",
width: 50,
sortable: false,
align: 'center'},
{
name: "retifica",
index: "retifica",
width: 50,
sortable: false,
align: 'center'},
{
name: "numero-controle-antigo",
index: "numero-controle-antigo",
width: 50,
sortable: false,
align: 'center'}
]
});
},
ondblClickRow: function(id) {
id = id.replace("5687", "");
if (typeof my_row_id !== "undefined") {
my_row_id = my_row_id.replace("5687", "");
window.location = "/ercs/" + erc_id + "/exemplares/" + my_row_id + "/cps/" + id + "/edit"
} else {
window.location = "/ercs/" + erc_id + "/exemplares/" + id + "/edit"
}
},
});
});​
If you know what is possibly causing this error please tell me.

I would recommend adding a gridComplete function to your grid definition and then you'll be able to easily inspect some of the values that control paging:
gridComplete: function(){
var r = $(this).getGridParam('records');
var p = $(this).getGridParam('page');
var rec = $(this).getGridParam('reccount');
var row = $(this).getGridParam('rowNum');
}
Here is where they are all documented:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:pager#properties