jQuery UI Widgets › Forums › Grid › Clearing filters, sorting and editedrows onclick of refresh button in jqxGrid
Tagged: cellclassname, copy, CRUD, dataadapter, filter, grid, id, jqxgrid, jqxgrid filter, php, refresh, row id, server-side, sorting, totalrecords, update, updaterow
This topic contains 29 replies, has 3 voices, and was last updated by Peter Stoev 9 years, 11 months ago.
-
Author
-
February 26, 2015 at 4:07 am Clearing filters, sorting and editedrows onclick of refresh button in jqxGrid #67696
Hi Dimitar,
Please follow below steps to reproduce the issue:
1) Load only 4records
2) Then sort on “shipname” column
3) Try to edit content of only “shipname” column
4) Grid becomes blankRefer below code:
<!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.10.2.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.edit.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 () {
// prepare the data
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()
{
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
},
sort: function()
{
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
},
root: ‘Rows’,
beforeprocessing: function(data)
{
if (data != null)
{
source.totalrecords = 4;//data[0].TotalRows;
}
}
};
var dataadapter = new $.jqx.dataAdapter(source, {
loadError: function(xhr, status, error)
{
alert(error);
}
}
);// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
source: dataadapter,
selectionmode: “multiplecellsadvanced”,
theme: theme,
filterable: true,
clipboard: true,
enablebrowserselection: true,
altrows: true,
sortable: true,
autoheight: true,
pageable: true,
virtualmode: true,
editable: 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 clearFilters = false;
$(“#refresh”).on(“click”, function() {
clearFilters = true;
$(“#jqxgrid”).jqxGrid(“clearfilters”);
});$(“#jqxgrid”).on(“bindingcomplete”, function(event) {
if (clearFilters === true) {
$(“#jqxgrid”).jqxGrid(“removesort”);
clearFilters = false;
}
});
});
</script>
</head>
<body class=’default’>
<button id=”refresh”>Refresh</button>
<div id=’jqxWidget'”>
<div id=”jqxgrid”></div>
</div>
</body>
</html>Regards,
Nitin
February 26, 2015 at 8:05 am Clearing filters, sorting and editedrows onclick of refresh button in jqxGrid #67720Hi Nitin,
totalrecords has to be based on the selected (with SELECT) and filtered (with WHERE) data received from the data source. You should not set it explicitly unless there really are only four records in your database and you do not intend to filter them. Otherwise, please follow the approach in the demo to avoid unexpected behaviour.
Please also follow my advice from one of my previous posts if you are going to implement server-side updates.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/February 27, 2015 at 8:40 am Clearing filters, sorting and editedrows onclick of refresh button in jqxGrid #67787Hi Dimitar,
Consider if you have only four records in your database table(in our case orders). After fetching this four records from table, try to sort on “Shipname” column and then edit content of shipname. Grid will become blank.
Can u please check if you can reproduce the issue at your end.
Regards,
NitinFebruary 27, 2015 at 9:06 am Clearing filters, sorting and editedrows onclick of refresh button in jqxGrid #67789Hi Nitin,
As I said, if you need an editable grid with server-side functionalities, you will have to implement updaterow in the manner shown in the help topic Build CRUD Web App with jqxGrid using PHP and MySQL. Otherwise, you may experience unexpected behaviour. As you can see from our demos and help topic examples, when all functionalities are correctly implemented, no issues occur.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/March 2, 2015 at 4:14 am Clearing filters, sorting and editedrows onclick of refresh button in jqxGrid #67855Hi Dimitar,
We have implemented editable grid by referring example Build CRUD Web App with jqxGrid using PHP and MySQL.
Can you keep only 4 records in “orders” table, sort “Shipname” column and then edit content of “Shipname” column. Full grid will go blank.
Hope now atleast i am much more clear to reproduce the issue at your end. Any help will be appreciated.
Thanks,
NitinMarch 2, 2015 at 7:27 am Clearing filters, sorting and editedrows onclick of refresh button in jqxGrid #67869Hi Nitin,
Editing does not affect your client data in Virtual Mode. When you edit in virtual mode, you have to implement the “updaterow” callback function of the source object and synchronize the updated row with your Data Source. This is something which you do not do in your code. When you’re going with virtual mode, you have to handle client-side operations such as paging, sorting, filtering, editing on your Server. The Grid in that mode is only a View.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/March 2, 2015 at 8:18 am Clearing filters, sorting and editedrows onclick of refresh button in jqxGrid #67882Hi Dimitar,
Can you please show us how to do that, when we have less number of records in orders table. Consider we have only four records and not 830.
Thanks,
Nitin
March 2, 2015 at 1:21 pm Clearing filters, sorting and editedrows onclick of refresh button in jqxGrid #67894Hi Nitin,
My name’s Peter. For implementing server paging, look at: http://www.jqwidgets.com/jquery-widgets-demo/demos/php/serverpaging.htm?arctic. The number of records does not matter. The initialization is important.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/March 3, 2015 at 5:10 pm Clearing filters, sorting and editedrows onclick of refresh button in jqxGrid #67952Hi Peter,
Can you please tell us when is the next jqwidgets version will be released with a fix for copy paste not working on pagination(server side).
regards,
NitinMarch 4, 2015 at 5:51 am Clearing filters, sorting and editedrows onclick of refresh button in jqxGrid #67969March 4, 2015 at 6:22 am Clearing filters, sorting and editedrows onclick of refresh button in jqxGrid #67976Hi Peter,
Thanks, looking forward to it. Can you please look into grid blank issue when there are only four records in grid and we sort(not filter) a shipname column and try to edit that column content.
Thanks,
NitinMarch 4, 2015 at 7:20 am Clearing filters, sorting and editedrows onclick of refresh button in jqxGrid #67981Hi Nitin,
Sorry, but there is no such issue. I suggest you to look at the Demos and Documentation in order to learn how to correctly implement Server Paging along with filtering, sorting and editing.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/March 15, 2015 at 6:42 pm Clearing filters, sorting and editedrows onclick of refresh button in jqxGrid #68560Hi Dimitar,
Can u check this example on my server:
Note: Refresh the link if mod_security error comes
Grid goes blankSteps to reproduce:
1) sort on address column
2) then try to edit “korgao” with some value say “zzzz”
3) now click outside gridBehaviour: Grid goes blank.
Please refer my code:
<!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.10.2.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.edit.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.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/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
//var theme = ‘classic’;var source =
{
datatype: “json”,
datafields: [
{ name: ‘name’, type: ‘string’},
{ name: ‘address’, type: ‘string’},
],
url: ‘data.php’,
cache: false,
sort: function()
{
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
},
beforeprocessing: function(data)
{
source.totalrecords = data[0].TotalRows;}
};// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
source: source,
sortable: true,
editable: true,
pageable: true,
virtualmode: true,
rendergridrows: function(obj)
{
return obj.data;
},
columns: [
{ text: ‘Name’, datafield: ‘name’},
{ text: ‘Address’, datafield: ‘address’},
]
});
});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget'”>
<div id=”jqxgrid”></div>
</div>
</body>I have implemented grid as per your example. Can you check and tell me the fix.
Thanks,
Nitin
March 17, 2015 at 4:02 am Clearing filters, sorting and editedrows onclick of refresh button in jqxGrid #68641Hi Peter/Dimitar,
Are you able to reproduce the issue at your end?
Regards,
Nitin
March 17, 2015 at 5:35 am Clearing filters, sorting and editedrows onclick of refresh button in jqxGrid #68646Hi Nitin,
No, we are not able to reproduce an issue with the provided code. I suggest you to look again our examples and follow the same approach for Client & Server side scripts. I also suggest you to bind the Grid to dataAdapter, not to source object.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.