I have the following example where I'm using jqwidgets. When a user clicks on Get rows button, it(console.log) is returning an array of all the records from the table. Is it possible to filter these records based on the check marked checkboxes? I guess I might have to filter it based on columntype: 'checkbox' but not sure how.
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", "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 < 10; 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["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["productname"] = productNames[productindex];
row["available"] = !!(i % 2);
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;
data[i] = row;
}
var source = {
localdata: data,
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (data) {},
loadError: function (xhr, status, error) {}
});
$("#jqxgrid").jqxGrid({
theme: 'energyblue',
width: 500,
autoheight: true,
editable: true,
source: dataAdapter,
columns: [{
text: 'Available',
datafield: 'available',
width: 100,
columntype: 'checkbox'
}, {
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: 90,
cellsalign: 'right',
cellsformat: 'c2'
}, {
text: 'Total',
datafield: 'total',
width: 100,
cellsalign: 'right',
cellsformat: 'c2'
}]
});
$('#jqxbutton').click(function () {
var rows = $('#jqxgrid').jqxGrid('getrows');
console.log(rows);
alert(rows);
});
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet"/>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="jqxgrid"></div>
<input type="button" style="margin: 50px;" id="jqxbutton" value="Get rows" />Analyzing the 'output' of console.log(rows) better, it's noticeable that it contains an array of objects. Each has its own property available, set to either true or false, which corresponds to the state of the check box (checked or not).
This said, to filter based on the checkbox selection, simply apply a filter() to rows in order to return those ones that have available property set to truth.
for(var data=new Array,firstNames=["Andrew","Nancy","Shelley","Regina","Yoshi","Antoni","Mayumi","Ian","Peter","Lars","Petra","Martin","Sven","Elio","Beate","Cheryl","Michael","Guylene"],lastNames=["Fuller","Davolio","Burke","Murphy","Nagase","Saavedra","Ohno","Devling","Wilson","Peterson","Winkler","Bein","Petersen","Rossi","Vileid","Saylor","Bjorn","Nodier"],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"],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"],i=0;i<10;i++){var row={},productindex=Math.floor(Math.random()*productNames.length),price=parseFloat(priceValues[productindex]),quantity=1+Math.round(10*Math.random());row.firstname=firstNames[Math.floor(Math.random()*firstNames.length)],row.lastname=lastNames[Math.floor(Math.random()*lastNames.length)],row.productname=productNames[productindex],row.available=!!(i%2),row.price=price,row.quantity=quantity,row.total=price*quantity,data[i]=row}var source={localdata:data,datatype:"array"},dataAdapter=new $.jqx.dataAdapter(source,{loadComplete:function(a){},loadError:function(a,e,t){}});$("#jqxgrid").jqxGrid({theme:"energyblue",width:500,autoheight:!0,editable:!0,source:dataAdapter,columns:[{text:"Available",datafield:"available",width:100,columntype:"checkbox"},{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:90,cellsalign:"right",cellsformat:"c2"},{text:"Total",datafield:"total",width:100,cellsalign:"right",cellsformat:"c2"}]});
$('#jqxbutton').click(function () {
var rows = $('#jqxgrid').jqxGrid('getrows')
var selectedRows = rows.filter(x => x.available)
console.log(selectedRows)
});<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet"/><link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/><script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script><div id="jqxgrid"></div><input type="button" style="margin: 50px;" id="jqxbutton" value="Get rows"/>