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>
Once the grid is rendered, jQuery can lookup for the checkboxes.
You can use the PQ Grid classes to select rows.
.pq-grid-rowis the class for every row..pq-grid-oddRowis the class for odd rows..pq-grid-title-rowis the class for the title row.So to get the even rows, you can use the all row selector and the
.not()selector.To target the checkboxes, use an attribute selector.
Here is a snippet where the checkboxes on odd rows and the column "check all" are disabled.