Blogs

Checkbox selection of Grid rows is a very common type of selection in Web Grids. In this post, we will show you how to customize the jqxGrid’s built-in rows selection. You will be able to select/unselect rows only through checkboxes. 1. The first step is to include the required JavaScript and CSS files.

<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>  
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>

2. In the second step, we create a sample data source and a new instance of the jqxDataAdapter plug-in.

// prepare the data
var data = generatedata(200);
var source =
{
	localdata: data,
	datatype: "array"
}
var dataAdapter = new $.jqx.dataAdapter(source);

Here’s the implementation of the generatedata function:

function generatedata(rowscount) {
	// prepare the data
	var data = new Array();
	var firstNames =
	[
		"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
	];
	 var lastNames =
	[
		"Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
	];
	var productNames =
	[
		"Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Caramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
	];
  
	for (var i = 0; i < rowscount; i++) {
		var row = {};
		var productindex = Math.floor(Math.random() * productNames.length);
		var quantity = 1 + Math.round(Math.random() * 10);
		row["available"] = false;
		row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
		row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
		row["productname"] = productNames[productindex];
		row["quantity"] = quantity;
		data[i] = row;
	}
	return data;
}

The generatedata function returns a sample array of data that we will use to populate the Grid. 3. In the third step, we create the jqxGrid and disable its built-in selection by setting the ‘selectionmode’ property to ‘none’. To display checkboxes in the first column, we set the columntype property to ‘checkbox’. We also want to enable the end-users to check or uncheck the check boxes and we set the editable property of the jqxGrid to true. We also set the editable property of all columns except the first one to false. By doing that, only the first column with checkboxes will be editable.

// initialize jqxGrid. Disable the built-in selection.
$("#jqxgrid").jqxGrid(
{
	source: dataAdapter,
	editable: true,	
	selectionmode: 'none',
	columns: [
	  { text: '', datafield: 'available', columntype: 'checkbox', width: 40 },
	  { text: 'First Name', editable: false, datafield: 'firstname', width: 90 },
	  { text: 'Last Name', editable: false, datafield: 'lastname', width: 90 },
	  { text: 'Product', editable: false, datafield: 'productname', width: 200 },
	  { text: 'Quantity', editable: false, datafield: 'quantity' }
   ]
});

4. The final step is to implement the actual custom rows selection logic. In order to achieve the selection with checkboxes, we need to bind to the ‘cellendedit’ event. That event is raised when the value of a cell is edited and the editor is deactivated. In our application scenario, the ‘cellendedit’ event will be raised when the user changes the checkbox’s state. In the event handler, we check the editor’s value by using the (event.args.value). If the value is true(checkbox is checked), we call the jqxGrid’s selectrow method and pass the row’s index as parameter. Otherwise, we call the ‘unselectrow’ method to unselect the row.

// select or unselect rows when the checkbox is checked or unchecked.
$("#jqxgrid").bind('cellendedit', function (event) {
	if (event.args.value) {
		$("#jqxgrid").jqxGrid('selectrow', event.args.rowindex);
	}
	else {
		$("#jqxgrid").jqxGrid('unselectrow', event.args.rowindex);
	}
});