jQWidgets Forums

Forum Replies Created

Viewing 1 post (of 1 total)

Author

Posts
December 9, 2015 at 1:04 am in reply to: customfiltering change Source customfiltering change Source #79089

ronaldlin
Participant

Hi

Thanks for Reply
I successfully grid data into mysql
But Column filter on the left is empty, how do I debug

`<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>This example illustrates how to create and apply a custom filter to jqxGrid.
</title>
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.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/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.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.filter.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”scripts/demos.js”></script>
<script type=”text/javascript” src=”generatedata.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {

var theme = ‘classic’;
var source =
{

datatype: “json”,

datafields: [
{ name: ‘rID’ ,type: ‘string’},
{ name: ‘rTYPE’ ,type: ‘string’},
{ name: ‘rMOD’ ,type: ‘number’},
{ name: ‘rINPUT’ ,type: ‘string’},
{ name: ‘rOUTPUT’ ,type: ‘string’},
{ name: ‘rAXIS’ ,type: ‘string’},
{ name: ‘rINSP’ ,type: ‘number’},
{ name: ‘rOUTSP’ ,type: ‘string’},
{ name: ‘rMAXOUT’ ,type: ‘number’},
{ name: ‘rOHL’ ,type: ‘number’},
{ name: ‘rRATIO’ ,type: ‘string’},
{ name: ‘rINSHAFY’ ,type: ‘string’},
{ name: ‘rMAXIN’ ,type: ‘number’},
{ name: ‘rPIC’ ,type: ‘string’}
],
cache: false,
url: ‘data.php’,
sort: function () {
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
}
};
var dataAdapter = new $.jqx.dataAdapter(source);

// create grid.
$(“#jqxgrid”).jqxGrid(
{
width: 600,
source: dataAdapter,
filterable: false,
sortable: true,
autoshowfiltericon: false,
columns: [
{ text: ‘rID’, datafield: ‘rID’, width: 100 },
{ text: ‘rTYPE’, datafield: ‘rTYPE’, width: 100 },
{ text: ‘rMOD’, datafield: ‘rMOD’, width: 180 },
{ text: ‘rINPUT’, datafield: ‘rINPUT’, width: 100, },
{ text: ‘rOUTPUT’, datafield: ‘rOUTPUT’, width: 80, },
{ text: ‘rAXIS’, datafield: ‘rAXIS’, width: 100, },
{ text: ‘rINSP’, datafield: ‘rINSP’, width: 100, },
{ text: ‘rOUTSP’, datafield: ‘rOUTSP’, width: 100, },
{ text: ‘rMAXOUT’, datafield: ‘rMAXOUT’, width: 100, },
{ text: ‘rOHL’, datafield: ‘rOHL’, width: 100, },
{ text: ‘rRATIO’, datafield: ‘rRATIO’, width: 100, },
{ text: ‘rINSHAFY’, datafield: ‘rINSHAFY’, width: 100, },
{ text: ‘rMAXIN’, datafield: ‘rMAXIN’, width: 100, },
{ text: ‘rPIC’, datafield: ‘rPIC’, width: 100, }
]
});

// create buttons, listbox and the columns chooser dropdownlist.
$(“#applyfilter”).jqxButton({ theme: theme });
$(“#clearfilter”).jqxButton({ theme: theme });
$(“#filterbox”).jqxListBox({ checkboxes: true, width: 200, height: 300 });
$(“#columnchooser”).jqxDropDownList({ autoDropDownHeight: true, selectedIndex: 0, width: 200, height: 25,
source: [{ label: ‘rID’, value: ‘rID’ },
{ label: ‘rTYPE’, value: ‘rTYPE’ },
{ label: ‘rMOD’, value: ‘rMOD’ },
{ label: ‘rINPUT’, value: ‘rINPUT’ },
{ label: ‘rOUTPUT’, value: ‘rOUTPUT’ },
{ label: ‘rAXIS’, value: ‘rAXIS’ },
{ label: ‘rINSP’, value: ‘rINSP’ },
{ label: ‘rOUTSP’, value: ‘rOUTSP’ },
{ label: ‘rMAXOUT’, value: ‘rMAXOUT’ },
{ label: ‘rOHL’, value: ‘rOHL’ },
{ label: ‘rRATIO’, value: ‘rRATIO’ },
{ label: ‘rINSHAFY’, value: ‘rINSHAFY’ },
{ label: ‘rMAXIN’, value: ‘rMAXIN’ },
{ label: ‘rPIC’, value: ‘rPIC’ }

]
});

// updates the listbox with unique records depending on the selected column.
var updateFilterBox = function (datafield) {
var filterBoxAdapter = new $.jqx.dataAdapter(source,
{
uniqueDataFields: [datafield],
autoBind: true
});
var uniqueRecords = filterBoxAdapter.records;
uniqueRecords.splice(1, 1, ‘(Select All)’);
$(“#filterbox”).jqxListBox({ source: uniqueRecords, displayMember: datafield });
$(“#filterbox”).jqxListBox(‘checkAll’);
}

updateFilterBox(‘rID’);

// handle select all item.
var handleCheckChange = true;
$(“#filterbox”).on(‘checkChange’, function (event) {
if (!handleCheckChange)
return;

if (event.args.label != ‘(Select All)’) {
handleCheckChange = false;
$(“#filterbox”).jqxListBox(‘checkIndex’, 0);
var checkedItems = $(“#filterbox”).jqxListBox(‘getCheckedItems’);
var items = $(“#filterbox”).jqxListBox(‘getItems’);

if (checkedItems.length == 1) {
$(“#filterbox”).jqxListBox(‘uncheckIndex’, 0);
}
else if (items.length != checkedItems.length) {
$(“#filterbox”).jqxListBox(‘indeterminateIndex’, 0);
}
handleCheckChange = true;
}
else {
handleCheckChange = false;
if (event.args.checked) {
$(“#filterbox”).jqxListBox(‘checkAll’);
}
else {
$(“#filterbox”).jqxListBox(‘uncheckAll’);
}

handleCheckChange = true;
}
});

// handle columns selection.
$(“#columnchooser”).on(‘select’, function (event) {
updateFilterBox(event.args.item.value);
});

// builds and applies the filter.
var applyFilter = function (datafield) {
$(“#jqxgrid”).jqxGrid(‘clearfilters’);
var filtertype = ‘stringfilter’;
if (datafield == ‘date’) filtertype = ‘datefilter’;
if (datafield == ‘price’ || datafield == ‘quantity’) filtertype = ‘numericfilter’;

var filtergroup = new $.jqx.filter();
var checkedItems = $(“#filterbox”).jqxListBox(‘getCheckedItems’);
if (checkedItems.length == 0) {
var filter_or_operator = 1;
var filtervalue = “Empty”;
var filtercondition = ‘equal’;
var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter);
}
else {
for (var i = 0; i < checkedItems.length; i++) {
var filter_or_operator = 1;
var filtervalue = checkedItems[i].label;
var filtercondition = ‘equal’;
var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter);
}
}

// add the filters.
$(“#jqxgrid”).jqxGrid(‘addfilter’, datafield, filtergroup);
// apply the filters.
$(“#jqxgrid”).jqxGrid(‘applyfilters’);
}

// clears the filter.
$(“#clearfilter”).click(function () {
$(“#jqxgrid”).jqxGrid(‘clearfilters’);
});

// applies the filter.
$(“#applyfilter”).click(function () {
var dataField = $(“#columnchooser”).jqxDropDownList(‘getSelectedItem’).value;
applyFilter(dataField);
});
});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<div style=”float: left”>
<div>Choose Column:</div>
<div id=”columnchooser”></div>
<div style=”margin-top: 10px;” id=”filterbox”></div>
<div style=”margin-top: 10px;”>
<input type=”button” id=”applyfilter” value=”Apply Filter” />
<input type=”button” id=”clearfilter” value=”Clear Filter” />
</div>
</div>
<div style=”margin-left: 20px; float: left” id=”jqxgrid”>
</div>
</div>
</body>
</html>
Author

Posts

Viewing 1 post (of 1 total)