When i am loading the page, some of the checkbox's should be disabled and the user should not be able to select them. For example, when loading the page, checkbox for rows with odd "id" should be disabled. But the entire row should not be disabled, only the checkbox. I have been trying to figure it out for a long time now and i couldn't find any answers. Thanks in advance. Here is my code.
!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<!--ParamQuery Grid files-->
<link rel="stylesheet" href="pqgrid.min.css" />
<script type="text/javascript" src="pqgrid.min.js" ></script>
<!--Main javscript file to create the paramquery-->
<script type="text/javascript">
$(function () {
//state of the checkbox and row selection is being saved in state field.
var data = [
{ id: 1, company: 'Exxon Mobil', revenues: '339938.0', profits: '36130.0' },
{ id: 2, company: 'Wal-Mart Stores', revenues: '315654.0', profits: '11231.0' },
{ id: 3, company: 'Royal Dutch Shell', revenues: '306731.0', profits: '25311.0' },
{ id: 4, company: 'BP', revenues: '267600.0', profits: '22341.0' },
{ id: 5, company: 'General Motors', revenues: '192604.0', profits: '-10567.0' },
{ id: 6, company: 'Chevron', revenues: '189481.0', profits: '14099.0' },
{ id: 7, company: 'DaimlerChrysler', revenues: '186106.3', profits: '3536.3'},
{ id: 8, company: 'Toyota Motor', revenues: '185805.0', profits: '12119.6' },
{ id: 9, company: 'Ford Motor', revenues: '177210.0', profits: '2024.0' },
{ id: 10, company: 'ConocoPhillips', revenues: '166683.0', profits: '13529.0' },
{ id: 11, company: 'General Electric', revenues: '157153.0', profits: '16353.0' },
{ id: 12, company: 'Total', revenues: '152360.7', profits: '15250.0' },
{ id: 13, company: 'ING Group', revenues: '138235.3', profits: '8958.9' },
{ id: 14, company: 'Citigroup', revenues: '131045.0', profits: '24589.0' },
{ id: 15, company: 'AXA', revenues: '129839.2', profits: '5186.5'},
{ id: 16, company: 'Allianz', revenues: '121406.0', profits: '5442.4' },
{ id: 17, company: 'Volkswagen', revenues: '118376.6', profits: '1391.7' },
{ id: 18, company: 'Fortis', revenues: '112351.4', profits: '4896.3' },
{ id: 19, company: 'Crédit Agricole', revenues: '110764.6', profits: '7434.3' },
{ id: 20, company: 'American Intl. Group', revenues: '108905.0', profits: '10477.0' }
];
var obj = {
scrollModel: { autoFit: true },
numberCell: {show: false},
title: "Checkbox selections",
selectionModel: { type: null },
pasteModel: { on: false },
height: 'flex',
pageModel: { type: "local", rPP: 10 },
colModel:
[
{ title: "ID", width: 100, dataType: "integer", dataIndx: "id" },
{ title: "Company", width: 220, dataType: "string", dataIndx: "company" },
{ title: "Revenues ($ millions)", width: 180, dataType: "float", align: "right", dataIndx: "revenues" },
{ title: "Profits ($ millions)", width: 170, dataType: "float", align: "right", dataIndx: "profits" },
{ title: "", dataIndx: "state", maxWidth: 30, minWidth: 30, align: "center",
cb: { header: true, all: false },
type: 'checkBoxSelection', cls: 'ui-state-default', resizable: false, sortable: false, editable: false,
display_checkbox: false
}
],
toolbar: {
items: [{
type: 'button',
label: 'Get Row ID of selected rows',
listeners: [{ 'click': function () {
var $grid = $(this).closest('.pq-grid');
var selarray = $grid.pqGrid('selection', { type: 'row', method: 'getSelection' });
var ids = [];
for (var i = 0, len = selarray.length; i < len; i++) {
var rowData = selarray[i].rowData;
ids.push(rowData.id);
}
alert(ids);
}
}]
}
]
},
dataModel: {
data: data,
location: "local",
sorting: "local",
sortIndx: "profits",
sortDir: "down"
}
};
var $grid = $("#grid_selection_checkbox").pqGrid(obj);
});
</script>
<body>
<div id="grid_selection_checkbox" style="margin:auto;"></div>
</body>
</html>
