We Keep Coding

Jqgrid: disable some checkbox based on JSON values

I want to disable the row and checkbox if Total Value is Les then 500K or LTV ratio is less 45%. Additionally prevent selection of disabled rows to support select all checkbox in the header of the multiselect column
FIDDLE
$("#output").jqGrid({
url: "/echo/json/",
mtype: "POST",
datatype: "json",
postData: {
json: JSON.stringify(jsonData)
},
colModel: [
/** { name: 'ClientID', label:'ClientID',width: 80, key: true },****/
{
name: 'Symbol',
width: 65,
formatter: "showlink",
formatoptions: {
baseLinkUrl: "http://www.cnn.com",
idName: "",
addParam: function(options) {
return {
bankid: options.rowData.Symbol,
timePeriod: options.rowData.ShareQuantity
};
}
}
}, {
name: 'Description',
width: 165
}, {
name: 'ShareQuantity',
align: 'right',
width: 85,
classes: "hidden-xs",
labelClasses: "hidden-xs",
formatter: 'currency',
formatoptions: {
prefix: " ",
suffix: " "
}
}, {
name: 'SharePrice',
label: 'Share Price',
align: 'right',
width: 100,
classes: "hidden-xs",
labelClasses: "hidden-xs",
template: "number",
formatoptions: {
prefix: " $",
decimalPlaces: 4
}
},
/*{ label: 'Value1',
name: 'Value1',
width: 80,
sorttype: 'number',
formatter: 'number',
align: 'right'
}, */
{
name: 'TotalValue',
label: 'Total Value',
width: 160,
sorttype: 'number',
align: "right",
formatter: 'currency',
formatoptions: {
prefix: " $",
suffix: " "
}
}, {
name: 'LTVRatio',
label: 'LTV Ratio',
width: 70,
sorttype: 'number',
align: "right",
formatter: 'percentage',
formatoptions: {
prefix: " ",
suffix: " "
}
}, {
name: 'LTVCategory',
label: 'LTV Category',
classes: "hidden-xs",
labelClasses: "hidden-xs",
width: 120,
width: 165
},
{
name: 'MaxLoanAmt',
label: 'MaxLoanAmount',
width: 165,
sorttype: 'number',
align: "right",
formatter: 'currency',
formatoptions: {
prefix: " $",
suffix: " "
}
}
],
additionalProperties: ["Num1"],
/*beforeProcessing: function (data) {
var item, i, n = data.length;
for (i = 0; i < n; i++) {
item = data[i];
item.Quantity = parseFloat($.trim(item.Quantity).replace(",", ""));
item.LTVRatio = parseFloat($.trim(item.LTVRatio *10000).replace(",", ""));
item.Value = parseFloat($.trim(item.Value).replace(",", ""));
item.Num1 = parseInt($.trim(item.Num1).replace(",", ""), 10);
item.Num2 = parseInt($.trim(item.Num2).replace(",", ""), 10);
}
}, */
iconSet: "fontAwesome",
multiselect: true,
loadonce: true,
rownumbers: true,
cmTemplate: {
autoResizable: true,
editable: true
},
autoresizeOnLoad: true,
autoResizing: {
resetWidthOrg: true,
compact: true
},
autowidth: true,
height: 'auto',
forceClientSorting: true,
sortname: "Symbol",
footerrow: true,
caption: "<b>Collateral Value</b> <span class='pull-right' style='margin-right:20px;'>Valuation as of: " + mmddyyyy + "</span>",
loadComplete: function() {
var $self = $(this),
sum = $self.jqGrid("getCol", "Price", false, "sum"),
sum1 = $self.jqGrid("getCol", "MaxLoanAmt", false, "sum");
//ltvratio = $self.jqGrid("getCol","LTVRatio:addas", "Aved Loan Amount");
$self.jqGrid("footerData", "set", {
LTVCategory: "Max Approved Loan Amount:",
Price: sum,
MaxLoanAmt: sum1
});
}
});

You can use rowattr to disable the rows:
rowattr: function (item) {
var ratio = parseInt(item.LTVRatio, 10);
if (item.TotalValue < 500000 || ratio < 45) {
return {"class": "ui-state-disabled ui-jqgrid-disablePointerEvents"};
}
}
see the modified demo https://jsfiddle.net/OlegKi/615qovew/117/

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 shows + sign even after subgrid has no data using xml

I am using jqGrid to show data with subgrid.
Data is in xml format.
$("#UDFs").jqGrid({
ajaxGridOptions: { contentType: 'application/xml; charset=utf-8' },
datatype: 'xmlstring',
datastr: data,
xmlReader: { root: "Response", row: "Data>UDFS>row", repeatitems: false, id: "FieldID" },
subGrid: true,
subgridtype: 'xml',
subGridOptions: { "plusicon": "ui-icon-triangle-1-e", "minusicon": "ui-icon-triangle-1-s", "openicon": "ui-icon-arrowreturn-1-e" },
subGridRowExpanded: function (subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id + "_t";
pager_id = "p_" + subgrid_table_id; $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>");
jQuery("#" + subgrid_table_id).jqGrid(
{
datastr: $($.parseXML(data)).find('Response>Data>UDFS>row:has(FieldID:contains('+ row_id+'))').XmlToString(),
datatype: "xmlstring",
colNames: [ 'Code', 'Name'],
colModel: [
{ name: "Code", index: "Code", width: 130 },
{ name: "Name", index: "Name", width: 70 }
],
xmlReader: { root: "row", row: "ValidValues>row", repeatitems: false, id: "FieldID" },
rowNum: 20,
pager: pager_id,
height: '100%'
});
jQuery("#" + subgrid_table_id).jqGrid('navGrid', "#" + pager_id, { edit: false, add: false, del: false })
},
colNames: ['#', 'TableID', 'SAPType', 'SAPSubType', 'SAPValidation', 'FieldID', 'AliasID', 'Descr', 'TypeID', 'SizeID', 'EditSize', 'Dflt', 'NotNull', 'RTable', 'RelUDO', 'ValidValues'],
colModel: [
{
index: 'Tick',
name: 'Tick',
width: 50,
resizable: false,
editable: true,
align: 'center',
edittype: 'checkbox',
formatter: "checkbox",
formatoptions: { disabled: false },
classes: 'check',
editrules: { required: false }, editoptions: { size: 39, value: "True:False" }
},
{ name: 'TableID', index: 'TableID', align: "left", width: 40, hidden: true },
{ name: 'SAPType', index: 'SAPType', align: "left", width: 80 },
{ name: 'SAPSubType', index: 'SAPSubType', align: "left", width: 80 },
{ name: 'SAPValidation', index: 'SAPValidation', align: "left", width: 80 },
{ name: 'FieldID', index: 'FieldID', align: "left", width: 40, hidden: false },
{ name: 'AliasID', index: 'AliasID', align: "left", width: 180 },
{ name: 'Descr', index: 'Descr', align: "left", width: 180 },
{ name: 'TypeID', index: 'TypeID', align: "left", width: 80 },
{ name: 'SizeID', index: 'SizeID', align: "left", width: 80 },
{ name: 'EditSize', index: 'EditSize', align: "left", width: 80 },
{ name: 'Dflt', index: 'Dflt', align: "left", width: 80 },
{ name: 'NotNull', index: 'NotNull', align: "left", width: 80 },
{ name: 'RTable', index: 'RTable', align: "left", width: 80 },
{ name: 'RelUDO', index: 'RelUDO', align: "left", width: 80, hidden: false },
{ name: 'ValidValues', index: 'ValidValues', align: "left", width: 80, formatter: formatToLink, unformat: UnformatFromLink }
],
rowNum: 15,
mtype: 'POST',
pager: "#UDFsMap",
gridview: true,
rownumbers: true,
loadonce: true,
forceFit: true,
width: 1100,
height: 250,
caption: 'Select UDF from the below list.',
multiselect: false,
loadComplete: function () {
$(this).HideBusy();
},
ondblClickRow: function (rowid, iRow, iCol, e) {
selectedRowId = $("#ObjType").jqGrid('getGridParam', 'selrow');
ObjectTypeID = $("#ObjType").jqGrid('getCell', selectedRowId, 'ObjectTypeID');
// $("#SelectCustomer").dialog('close');
// xmlDoc1 = $.parseXML(xmlString);
// $xml1 = $(xmlDoc1);
// $(this).SetValuesToControl("Landscape", $xml1);
// $("#uxTask").attr("binding", "true");
}
}).jqGrid('navGrid', '#UDFsMap', { edit: false, add: false, del: false, search: true });
When grid displays on page, it shows Plus (+) sign / arrow even if the subgrid does not have data.
Is it possible to hide / remove this Plus (+) sign / arrow when there is no data in subgrid?
UPDATED:
I tried your proposed solution and saw samples also, it works for me from 2nd page onwards. its not working for 1st page.
loadComplete: function (data) {
var grid = $("#UDFs");
var $self = $(this), rowIds = $self.jqGrid("getDataIDs"), item, i, l = rowIds.length;
for (i = 0; i < l; i++) {
item = $self.jqGrid("getLocalRow", rowIds[i]);
debugger;
if (item.ValidValues == null || item.ValidValues.length === 0) {
// subggrid is empty
$("#" + rowIds[i]).find(">.ui-sgcollapsed").unbind("click").html("");
}
}
$(this).HideBusy();
},
When the grid load, it works from 2nd page onward. Please see the screen shot. In the last column (ValidValues), if exist then show subgrid / plus sign otherwise hide.
In below screen shot it is working.

I recommend you to hide the "+" icon of rows which have no subgrids inside of loadComplete callback. The first parameter of callback loadComplete contains all parsed XML data (datastr: data) which you use to fill the grid. See the old answer which describes the main idea of the hiding of the rows. You can get the ids of the rows of the current page by usage of getDataIDs and to find the corresponding item in XML data by the id. Then you can examine the information about subgrids and to hide the icon.
The demo demonstrates the approach in case of usage JSON data. You can do the same with XML data too. You need just change the criteria for testing the input data for the existence of subgrid.
UPDATED: The code which you posed in UDPATED works only with the second part because you use datatype: 'xmlstring'. At the first loading the data in loadComplete are XML data and you should be more careful how to parse it. My demo used JSON instead of XML data. So you should use the demo which I posted as the template, but you have to modify it based on the format of the data which you use.

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