Custom Grid Cells Rendering

In this post, we will show you how to add a custom column with buttons in jqxGrid. The button’s role will be to delete a grid row.

1. The first step is to build the source object. We will create a data array which we will use to populate the Grid with.

var data = new Array();
var rowscount = 100;
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", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
];

var priceValues =
[
   "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
];

for (var i = 0; i < rowscount; i++) {
	var row = {};
	var productindex = Math.floor(Math.random() * productNames.length);
	var price = parseFloat(priceValues[productindex]);
	var quantity = 1 + Math.round(Math.random() * 10);

	row["id"] = i;
	row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
	row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
	row["productname"] = productNames[productindex];
	row["price"] = price;
	row["quantity"] = quantity;
	data[i] = row;
}

var source =
{
	localdata: data,
	datatype: "array"
};


2. Select the ‘jqxgrid’ DIV tag and call the jqxGrid constructor. Set the last column’s cellsrenderer property to point to a function called ‘renderer’.

// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
	width: 650,
	source: source,
	theme: 'shinyblack',
	columns: [
	  { text: 'First Name', datafield: 'firstname', width: 100 },
	  { text: 'Last Name', datafield: 'lastname', width: 100 },
	  { text: 'Product', datafield: 'productname', width: 180 },
	  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
	  { text: 'Unit Price', datafield: 'price', width: 80, cellsalign: 'right', cellsformat: 'c2' },
	  { text: 'Delete Row', datafield: 'id', cellsrenderer: renderer }
	]
});

3. Implement the 'renderer' function. The 'renderer' function returns a HTML string with an Input tag. In order to display a button, we need to set the Input tag's type attribute to "button". The buttons text is set "Delete Row". When the user clicks a button, the buttonclick function is called.


var renderer = function (id) {
	return '<input type="button" onClick="buttonclick(event)" class="gridButton" id="btn' + id + '" value="Delete Row"/>'
}

4. The final step is to implement the “buttonclick” function. In the function’s body, we get the clicked button’s id by using the event.target.id property. Then we call the ‘deleterow’ function and pass the button’s id as parameter.


<div id="jqxgrid">
</div>
<script type="text/javascript">
	var buttonclick = function (event) {
		var id = event.target.id;
		$("#jqxgrid").jqxGrid('deleterow', id);
	}
</script>




jquery grid button column

About admin


This entry was posted in JavaScript, JavaScript Plugins, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxGrid and tagged , , , , , , , , , , , , , , . Bookmark the permalink.



Leave a Reply