customfiltering change Source - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: angular grid, custom filter, custom fitering, debug, filter, filtering, grid, jquery grid, jqxgrid, mysql, php

This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 9 years, 3 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

customfiltering change Source Posts
December 4, 2015 at 8:52 am customfiltering change Source #78893

ronaldlin
Participant

Hello,

i like this example URL： http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm?(arctic)#demos/jqxgrid/customfiltering.htm

but how can i change the data source to php & mysql??

I have tried to change the right of the Grid success, but the left has only a blank filter.

December 4, 2015 at 1:24 pm customfiltering change Source #78909

Dimitar
Participant

Hello ronaldlin,

Please take a look at our PHP Integration section of the Documentation to learn how to bind widgets to a MySQL database using PHP.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

December 9, 2015 at 1:04 am 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>

December 9, 2015 at 6:30 am customfiltering change Source #79097

Dimitar
Participant

Hi ronaldlin,

You can check your browser’s console for any errors that might point you in the right direction. You can also debug in the browser’s developer tools. This tutorial shows how to debug in Chrome: https://developer.chrome.com/devtools/docs/javascript-debugging and this one – https://msdn.microsoft.com/en-us/library/y740d9d3.aspx – in Visual Studio.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.