The web page I'm working on features Filters with two buttons that load data for jqGrid when clicked.
Clicking 'Filter' generates a postData json object and sends it to the server, which is working perfectly.
However, I'm facing an issue when the user clicks on 'Clear'. I want to reset the filter and reload all data from jqGrid, but I'm unsure how to do this.
https://i.sstatic.net/bA0fD.png
This is how the filters are sent to the server. https://i.sstatic.net/G9lLc.png
The jQuery code for the button clicks is shown below:
$('#btnFilter').click(function (event) {
var filterObject = {
RecordID: $('#RecordID').val()
, Student: $('#Student').val()
}
$("#jqGrid").jqGrid().setGridParam({ postData: { Filters: filterObject }, page: 1 }).trigger("reloadGrid");
});
$('#btnClear').click(function (event) {
var filterObject = {};
$("#jqGrid").jqGrid().setGridParam({ postData: { Filters: filterObject }, page: 1 }).trigger("reloadGrid");
});
Despite setting a null JSON object for the filterObject using { }, the browser caches the Filters value and I'm unable to remove them. The screenshot below shows the Ajax Post and objects sent to the server when the 'Clear' button is clicked.
https://i.sstatic.net/8xZGj.png
I need help in figuring out how to remove the Filters { } objects when 'Clear' is clicked. If there's a better way to achieve my goal, I am open to suggestions.