jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Custom Filtering for phpdemos/server_side_grid_filtering
Tagged: angular grid, angular2 grid, bootstrap grid, javascript grid, jquery grid, jqwidgets grid, jqxgrid, typescript grid
This topic contains 6 replies, has 2 voices, and was last updated by Marat 8 years, 6 months ago.
-
Author
-
Dear developers! For example (phpdemos/server_side_grid_filtering_and_sorting_and_paging), I did my own Custom Filtering (function applyFilter) (with filterable: false). However, getting the error (after $(“#jqxgrid”).jqxGrid(‘addfilter’, datafield, filtergroup);):
Error: jqxGrid: The data is still loading. When the data binding is completed, the Grid raises the ‘bindingcomplete’ event. Call this function in the ‘bindingcomplete’ event handler.
How do I make a custom filter for server-side-grid? Thank you.
New index.php with function applyFilter:
<!DOCTYPE html>
<html lang=”en”>
<head>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.classic.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/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.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.selection.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/jqxdata.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
var theme = ‘classic’;
var source = {
datatype: “json”,
datafields: [
{ name: ‘ShippedDate’, type: ‘date’},
{ name: ‘ShipName’, type: ‘string’},
{ name: ‘ShipAddress’, type: ‘string’},
{ name: ‘ShipCity’, type: ‘string’},
{ name: ‘ShipCountry’, type: ‘string’}
],
url: ‘data.php’,
cache: false,
filter: function() {
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
},
sort: function() {
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
},
root: ‘Rows’,
beforeprocessing: function(data) {
if (data != null) {
source.totalrecords = data[0].TotalRows;
}
}
};
var dataadapter = new $.jqx.dataAdapter(source, {
loadError: function(xhr, status, error) {
alert(error);
}
}
);// initialize jqxGrid
$(“#jqxgrid”).jqxGrid( {
source: dataadapter,
width: 820,
theme: theme,
filterable: false,
sortable: true,
autoheight: true,
pageable: true,
virtualmode: true,
rendergridrows: function(obj) {
return obj.data;
},
columns: [
{ text: ‘Shipped Date’, datafield: ‘ShippedDate’, cellsformat: ‘yyyy-MM-dd’, width: 200 },
{ text: ‘Ship Name’, datafield: ‘ShipName’, width: 200 },
{ text: ‘Address’, datafield: ‘ShipAddress’, width: 180 },
{ text: ‘City’, datafield: ‘ShipCity’, width: 100 },
{ text: ‘Country’, datafield: ‘ShipCountry’, width: 140 }
]
});
var applyFilter = function (datafield) {
$(“#jqxgrid”).jqxGrid(‘clearfilters’);
var filtertype = ‘stringfilter’;
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = “Reims”;
var filtercondition = ‘EQUAL’;
var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter);
$(“#jqxgrid”).jqxGrid(‘addfilter’, datafield, filtergroup);
$(“#jqxgrid”).jqxGrid(‘applyfilters’);
};
$(“#applyfilter”).jqxButton();
$(“#applyfilter”).click(function () {
var datafield = ‘ShipCity’;
applyFilter(datafield);
});
});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget'”>
<div id=”jqxgrid”></div>
<input type=”button” id=”applyfilter” value=”Apply Filters” />
</div>
</body>
</html>Hello Marat,
I try with your settings in our example and works fine.
Please, take a look at this demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/php/serverfiltering.htm?light
Also, I would like to suggest you this article.Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comHello Hristo! Thanks for your reply.
Yes, I know this example:
http://www.jqwidgets.com/jquery-widgets-demo/demos/php/serverfiltering.htm?light
But this example does not custom filter. In this example filterable: true and everything works fine.An example from the article
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-filtering.htm?search=grid
uses data already downloaded (localdata: data) and also works fine.I checked my custom filter from my example to other data (Array data, XML data, JSON data, JSON data using PHP) and also doing well.
The problem arises precisely from my example of the structure. That is, when the custom filter is set and you need to perform filtering on the server. Then there arises this error:Error: jqxGrid: The data is still loading. When the data binding is completed, the Grid raises the ‘bindingcomplete’ event. Call this function in the ‘bindingcomplete’ event handler.
Because errors GET-request parameters do not contain information about filtering
filterscount 0
groupscount 0
pagenum 0
pagesize 25
recordendindex 25
recordstartindex 0Thank you for your attention.
Hello Marat,
About the mentioned error – can be thrown when server-side processing is enabled and you are trying to initiate one operation (sorting/filtering) before another (sorting/filtering) has been completed.
The bindingcomplete event allows you to register when the first operation has been completed so that you can start another.Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comThank you Hristo!
Yes, I have read an explanation from Peter Stoev:
http://www.jqwidgets.com/community/topic/grid-custom-filtering-with-remote-json-not-working/
There arose the same error. Unfortunately, he does not explain how to practically implement the bindingcomplete event. How to write correct code, to avoid this situation “server-side processing is enabled and you are trying to initiate one operation”?
Hello Marat,
Try to check is there some automatically filter/sort function is called.
The right approach to handle the bindingcomplete event is to create a flag with type boolean.
When call filter/sort function and check for this flag in relevant function.
Please, take a look at this article, there could find more information about the best approaches – bindingcomplete.Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comHello, Hristo!
The problem was solved after the removal of the call
$(“#jqxgrid”).jqxGrid(‘clearfilters’);in function applyFilter. Filtering works in line with expectations. Thank you.
-
AuthorPosts
You must be logged in to reply to this topic.