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>
