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/
Related
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.
guys i am using jqgrid ... i want to get id of the row upon clicking on the image only without selecting the whole row first .. here is my code
<script type="text/javascript">
$(document).ready(function() {
$("#jqGrid").jqGrid({
url: 'data.json',
datatype: "json",
styleUI: "Bootstrap",
colModel: [{
label: 'Order ID',
name: 'OrderID',
key: true,
width: 75,
hidden: true
}, {
label: 'From Date',
name: 'FromDate',
width: 150,
editable: true,
edittype: "text",
id: "ui-datepicker-div",
editoptions: {
dataInit: function(element) {
$(element).datepicker({
autoclose: true,
format: 'yyyy-mm-dd',
orientation: 'auto bottom'
});
},
},
}, {
label: 'To Date',
name: 'ToDate',
width: 150,
editable: true,
edittype: "text",
editoptions: {
dataInit: function(element) {
$(element).datepicker({
autoclose: true,
format: 'yyyy-mm-dd',
orientation: 'auto bottom'
});
},
},
}, {
label: 'Customer ID',
name: 'CustomerID',
width: 150
}, {
label: 'Ship Name',
name: 'ShipName',
width: 200
}, {
label: 'Row Data',
name: 'RowData',
align: 'center',
formatter: function() {
return "<img src='resources/icon.jpg' onclick='OpenDialog()' alt='Data Row' />";
width = 15;
}
}, ],
loadonce: true,
......
});
});
...........
function OpenDialog() {
var result = "";
var grid = $("#jqGrid");
var rowKey = grid.getGridParam("selrow");
rowData = grid.getLocalRow(rowKey);
for (var item in rowData) {
if (item == 'RowData') {
break;
}
result += rowData[item] + ', ';
}
alert(result);
}
any help please how to get id of row upon only clicking on the image ??.. thanks a lot .. thanks in advance
use this html:
onclick='OpenDialog(this)'
and in OpenDialog use closest jquery method:
function OpenDialog(element) {
var id = $(element).closest('tr').attr('id');
...
}
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.
I have set the jqGrid row edit on ondblClickRow event. once a row is double clicked I want to enable save icon on navigation bar. How can I do that.
ondblClickRow: function (rowid) {
jQuery(this).jqGrid('editRow', rowid, true, null, null);
},
Please help
thanks
jQuery(document).ready(function ($) {
grid = $("#SupplementsGrid");
getColumnIndexByName = function (grid, columnName) {
var cm = grid.jqGrid('getGridParam', 'colModel'), i = 0, l = cm.length;
for (; i < l; i += 1) {
if (cm[i].name === columnName) {
return i; // return the index
}
}
return -1;
};
var DataEditUrl = baseSiteURL + 'HotelSupplements/Edit';
var DataAddUrl = baseSiteURL + 'HotelSupplements/Create';
var lastSel;
grid.jqGrid({
url: gridDataUrl,
editurl: DataEditUrl,
mtype: 'POST',
datatype: 'local',
colNames: ['StartDate', 'EndDate', 'Man', 'RoomType', 'SuppType', 'Supplement', 'BuyRate', 'Val', 'ChargeBy', 'ChargeOn', 'Status', 'DaysOfTheWeek', 'HotelSupplementID'],
colModel: [
{
name: 'StartDate', index: 'StartDate',
resizable: true, formatter: 'date', editoptions: { dataInit: function (elem) { $(elem).datepicker({ minDate: 0 }); } }, editable: true, formatoptions: { newformat: 'm/d/Y' }, width: 125, align: 'left',
editrules: { custom: true, custom_func: function (value, colname) { return validateTwoDates('StartDate', 'EndDate', grid.jqGrid('getGridParam', 'selrow')) } }
},
{ name: 'EndDate', index: 'EndDate', formatter: 'date', editoptions: { dataInit: function (elem) { $(elem).datepicker({ minDate: 0 }); } }, editable: true, formatoptions: { newformat: 'm/d/Y' }, width: 100, align: 'left' },
{ name: 'Mandatory', index: 'Mandatory', editable: true, width: 45, align: 'center', edittype: "checkbox", editoptions: { value: "true:false" } },
{
name: 'RoomTypes', index: 'RoomTypes', width: 300, editable: true, edittype: 'select',
editoptions: {
value: roomTypesFormatterEdit,
custom_element: function (value, options) {
return $.jgrid.createEl.call(this, "select",
$.extend(true, {}, options, { custom_element: null, custom_value: null }),
value);
},
custom_value: function ($elem, operation, value) {
if (operation === "get") {
return $elem.val();
}
},
multiple: true
},
align: 'left', formatter: roomTypesFormatter
},
{
name: 'SupplementTypeID', index: 'SupplementTypeID', width: 115, align: 'left', formatter: supplementTypesFormatter, editable: true, edittype: 'select',
editoptions: {
value: supplementTypesFormatterEdit,
dataEvents: [
{
type: 'change', // keydown
fn: function (e) {
suppTId = $("#" + this.id).val();
myValue = '';
filterSupplementsByTypeID(suppTId);
//grid.jqGrid('setColProp', 'SupplementID', { editoptions: { value: supplementsFormatterEdit} });
var row = $(e.target).closest('tr.jqgrow');
var rowId = row.attr('id');
for (k = 0; k < filteredSupplements.length; k++) {
myValue += '<option value=' + filteredSupplements[k].SupplementID + '>' + filteredSupplements[k].Name + '</option>';
}
$("select#" + rowId + "_SupplementID", row[0]).html(myValue);
}
}
]
}
},
{
name: 'SupplementID', index: 'SupplementID', width: 120, align: 'left', formatter: supplementsFormatter, editable: true, edittype: 'select',
editoptions: {
value: supplementsFormatterEdit
}
},
{ name: 'BuyRate', index: 'BuyRate', editable: true, width: 90, align: 'left', sorttype: 'int', editrules: { custom: true, custom_func: validNum } },
{
name: 'ChargeValueTypeID', index: 'ChargeValueTypeID', width: 70, align: 'left', formatter: ChargeValueTypesFormatter, editable: true, edittype: 'select',
editoptions: {
value: chargeValueTypesFormatterEdit
}
},
{
name: 'ChargeByTypeID', index: 'ChargeByTypeID', width: 100, align: 'left', formatter: ChargeByTypesFormatter, editable: true, edittype: 'select',
editoptions: {
value: chargeByTypesFormatterEdit
}
},
{
name: 'ChargeOnTypeID', index: 'ChargeOnTypeID', width: 100, align: 'left', formatter: ChargeOnTypesFormatter, editable: true, edittype: 'select',
editoptions: {
value: chargeOnTypesFormatterEdit
}
},
{ name: 'Active', index: 'Active', width: 60, align: 'left', editable: true, edittype: "checkbox", editoptions: { value: "true:false" } },
{
name: 'DaysOfTheWeek', index: 'DaysOfTheWeek', width: 250, align: 'left', editable: true, edittype: 'select', formatter: function (cellvalue, options, rowObject) {
output = '';
if (rowObject.MonValid) {
output += 'Monday,';
} if (rowObject.TueValid) {
output += 'Tuesday,';
} if (rowObject.WedValid) {
output += 'Wednesday,';
} if (rowObject.ThuValid) {
output += 'Thursday,';
} if (rowObject.FriValid) {
output += 'Friday,';
} if (rowObject.SatValid) {
output += 'Saturday,';
} if (rowObject.SunValid) {
output += 'Sunday,';
}
output = output.substring(0, output.length - 1);
if (output != '') {
return output;
} else {
return cellvalue;
}
}, editoptions: {
value: 'Monday:Monday;Tuesday:Tuesday;Wednesday:Wednesday;Thursday:Thursday;Friday:Friday;Saturday:Saturday;Sunday:Sunday',
custom_element: function (value, options) {
return $.jgrid.createEl.call(this, "select",
$.extend(true, {}, options, { custom_element: null, custom_value: null }),
value);
},
custom_value: function ($elem, operation, value) {
if (operation === "get") {
return $elem.val();
}
},
multiple: true
}
},
{
name: 'HotelSupplementID',
index: 'HotelSupplementID',
width: 25, editable: true,
editrules: {
//required: true,
edithidden: true
}, hidden: true,
editoptions: {
dataInit: function (element) {
//jq(element).attr("readonly", "readonly");
}
}
}
],
jsonReader: {
root: 'Rows',
page: 'Page',
total: 'Total',
records: 'Records',
repeatitems: false,
id: "12",
},
subGrid: true,
subGridRowExpanded: function (subgrid_id, row_id) {
var subgrid_table_id;
subgrid_table_id = subgrid_id + "_t";
jQuery("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
jQuery("#" + subgrid_table_id).jqGrid({
url: supplementChildRateurl + '?id=' + row_id,
datatype: "json",
colNames: ['MinAge', 'MaxAge', 'BuyRate', ],
colModel: [
{ name: "MinAge", index: "MinAge", width: 130 },
{ name: "MaxAge", index: "MaxAge", width: 130 },
{ name: "BuyRate", index: "BuyRate", width: 130 }
],
height: '100%',
rowNum: 20,
});
},
ondblClickRow: function (rowid) {
jQuery(this).jqGrid('editRow', rowid, true, null, null);
},
onSelectRow: function (id) {
if (id && id !== lastSel) {
jQuery(this).restoreRow(lastSel);
lastSel = id;
}
},
resizeStop: function (newwidth, index) {
jQuery(this.bDiv).find('>div:first>table.ui-jqgrid-btable:first')
.jqGrid('setGridWidth', newwidth);
},
paging: true,
loadonce: true,
loadComplete: function (data) {
var iCol = getColumnIndexByName(grid, 'act');
jQuery("#SupplementsGrid").children("tbody")
.children("tr.jqgrow")
.children("td:nth-child(" + (iCol + 1) + ")")
.each(function () {
$("<div>",
{
title: "Custom",
mouseover: function () {
$(this).addClass('ui-state-hover');
},
mouseout: function () {
$(this).removeClass('ui-state-hover');
},
click: function (e) {
}
}
).css({ "margin-left": "5px", float: "left" })
.addClass("ui-pg-div ui-inline-custom")
.append('<span class="ui-icon ui-icon-document"></span>')
.appendTo($(this).children("div"));
});
jQuery("#SupplementsGrid").trigger("reloadGrid");
jQuery("#SuccessMsg").html("");
//$("#SupplementsGrid").jqGrid('setGridParam',{datatype:'local'});
var rowIds = $("#SupplementsGrid").jqGrid('getDataIDs');
$.each(rowIds, function (i, row) {
var rowData = $("#SupplementsGrid").getRowData(row);
if (rowData.InputType == 'select') {
}
});
},
gridview: true,
rowNum: 20,
rowList: [5, 10, 20, 50, 100],
pager: jQuery('#pager'),
emptyrecords: "Nothing to display",
sortable: true,
sortname: 'StartDate',
sortorder: "desc",
viewrecords: true,
height: 'auto',
width: 1068,
caption: "Supplements",
});
$('#SupplementsGrid').jqGrid('navGrid', '#pager',
{
edit: false,
add: false,
del: false,
search: false
},
//edit options
{ url: DataEditUrl },
//add options
{ url: DataAddUrl },
//delete options
{ url: '/home1/DeleteUserData' }
);
parameters = {
edit: true,
editicon: "ui-icon-pencil",
add: true,
addicon: "ui-icon-plus",
save: true,
saveicon: "ui-icon-disk",
cancel: true,
cancelicon: "ui-icon-cancel",
editParams: {
keys: false,
oneditfunc: null,
successfunc: function (val) {
if (val.responseText != "") {
// alert(val.responseText);
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
}
},
url: null,
extraparam: {
EmpId: function () {
var sel_id = $('#SupplementsGrid').jqGrid('getGridParam', 'selrow');
var value = $('#SupplementsGrid').jqGrid('getCell', sel_id, '_id');
return value;
}
},
aftersavefunc: null,
errorfunc: null,
afterrestorefunc: null,
restoreAfterError: true,
mtype: "POST"
},
addParams: {
useDefValues: true,
addRowParams: {
keys: true,
extraparam: {},
// oneditfunc: function () { alert(); },
successfunc: function (val) {
if (val.responseText != "") {
//alert(val.responseText);
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
}
}
}
}
}
jQuery("#SupplementsGrid").jqGrid('inlineNav', '#pager', parameters);
});
You don't posted details of your implementation, but I can suppose that you use inlineNav method. inlineNav uses simple rule for generating the value of id attribute of all navigator icons. The ids of all inline editing buttons are set based on the id of the grid and a suffix: "_iladd", "_iledit", "_ilsave", "_ilcancel". For example is the grid have id="list" then the id of Save button will be "list_ilsave". If required you can disable any button by addressing it by its id (for example $("#list_ilsave").removeClass('ui-state-disabled'); - enable Save button and $("#list_ilsave").addClass('ui-state-disabled'); - disable it). You can use aftersavefunc and afterrestorefunc options of editRow to change the state of navigator buttons after saving or discarding of changes. In the same way you can use jQuery.click to simulate click on any button. For example $("#list_ilsave").click(); will simulate clicking on the Save button.
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