Grid Filter Not Cleared when Table Reloading

[Fritz45Participant]

Hi

I have a grid which is populated with JSON data from the server. A button click on the form calls a web method and the result is then loaded into the grid.

All works well but I am having a problem with filtering. The behaviour is:

1. Populate grid with data. Essential code is:
$(“#tableGroup”).jqxGrid(
{
width: w,
height: h,
source: dataAdapter,
columns: cols,
selectionmode: ‘multiplecellsadvanced’,
sortable: true,
filterable: true
});

2. Filter on some column (e.g. show all where column X is greater than 10). This works well.
3. Click button to call web service and refresh table data (so method which initiates step 1 is re-executed)
4. Grid is reloaded AND still displays last filter (don’t know how this is possible, but it is good for my use!)
5. However, now the column where the filter is applied to does not show the filter icon anymore, also when I open the filter menu, no filter is shown and the previous filter (step 2) is still applied, even when I click the “clear” button.
6. So the user is stuck with a filter he cannot edit or remove. To remove the filter, I have to basically reload the page.

The behaviour I would like is basically there from steps 1 to 4, but when the user initiates a reload of the data in the grid from the server, I want the user to be able to see where the filter is applied and remove or edit it if necessary.

Any help greatly appreciated.

Kind Regards,

Fritz

[Peter StoevKeymaster]

Hi Fritz,

Filter will be cleared when you set the Grid’s “source” property to a new jqxDataAdapter instance(when you refresh the data source). If you just call “updatebounddata”, it will not be by design. If you want to clear only the filter, then call the Grid’s “clearfilters” method.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Fritz45Participant]

Hi Peter

But that’s what I don’t understand, the filter stays in place even though I re-construct the DataAdapter and the table from scratch every time a round-trip to the server is completed.

So basically the filter stays in place even though I return the same data, and run the grid construction method again, which contains this code:

var data = new Array();
        treatLenIDs = new Array();
        for (var i = 0; i < tableData.length; i++) {
            var sRow = tableData[i];
            treatLenIDs.push(sRow[0]);      
            var lRow = {};
            lRow["id"] = sRow[0];
            lRow["areaname"] = sRow[1];
            lRow["location"] = sRow[2];
            var k = 3;
            for (var j = minYear; j <= maxYear; j++) {
                var t = "yr" + j.toString();
                lRow[t] = sRow[k];
                k++;
            }
            data[i] = lRow;
        }
        var source =
        {
            localdata: data,
            datatype: "array"
        };
        var dataAdapter = new $.jqx.dataAdapter(source, {
            loadComplete: function (data) { },
            loadError: function (xhr, status, error) { }
        });
        $('#tableGroup').jqxGrid({ enableellipsis: true });
        $("#tableGroup").jqxGrid(
            {
                width: w,
                height: h,
                source: dataAdapter,
                columns: cols,
                selectionmode: 'multiplecellsadvanced',
                sortable: true,
                filterable: true
            });

I don’t see how this is possible but it seems to be the case that the filter stays in place even though the grid is rebuilt from scratch.

I think I can solve the problem by manually applying the clearfilters method you suggested, but still would like to know what is going on here.

Finally, is there an example on how updatebounddata works?

Many thanks for your patient help.

Fritz

[Fritz45Participant]

Peter, update to my last post:

The filter is still applied, even though I call the clearfilter method like this:

…code to build source dataAdapter goes here

$('#tableGroup').jqxGrid({ enableellipsis: true });
        $("#tableGroup").jqxGrid(
            {
                width: w,
                height: h,
                source: dataAdapter,
                columns: cols,
                selectionmode: 'multiplecellsadvanced',
                sortable: true,
                filterable: true
            });
  $('#tableGroup').jqxGrid('clearfilters');

I can confirm that this code is run after each round trip to the server, but the filter stays in place unless I reload the page.

I get the same behaviour in IE10 and Chrome.

Am I missing something basic?

Kind Regards,

Fritz

[Fritz45Participant]

Another update:

Behaviour is like this:

Load/Construct Grid with data and display – OK
Apply Filter – OK
Clear Filter using Button Click – OK!
Re-Load/Construct Grid with data and display – Error: filter still applied
Clear Filter using Button Click – No effect

I thought maybe this could help you see what I am doing wrong?

Kind Regards,

Fritz

[Peter StoevKeymaster]

Hi Fritz,

I do not know what happens on your side. Please, provide a Full sample which demonstrates your scenario so we will be able to test it. In addition, please check whether you use the latest version – 3.0.1

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Peter StoevKeymaster]

Hi Fritz,

Please, find below a sample which demonstrates that the Filter is cleared after setting the “source” property of jqxGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example illustrates the Grid filtering feature. Move the mouse cursor over a column header and click the dropdown button to open the filtering menu.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.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/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/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var data = generatedata(500);
            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'date', type: 'date' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ],
                datatype: "array"
            };
            var addfilter = function () {
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 1;
                var filtervalue = 'Beate';
                var filtercondition = 'contains';
                var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                filtervalue = 'Andrew';
                filtercondition = 'starts_with';
                var filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
 
                filtergroup.addfilter(filter_or_operator, filter1);
                filtergroup.addfilter(filter_or_operator, filter2);
                // add the filters.
                $("#jqxgrid").jqxGrid('addfilter', 'firstname', filtergroup);
                // apply the filters.
                $("#jqxgrid").jqxGrid('applyfilters');
            }
            var adapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: adapter,
                theme: theme,
                filterable: true,
                sortable: true,
                autoshowfiltericon: true,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 90 },
                  { text: 'Last Name', datafield: 'lastname', width: 90 },
                  { text: 'Product', datafield: 'productname', width: 170 },
                  { text: 'Order Date', datafield: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
            $('#events').jqxPanel({ width: 300, height: 80, theme: theme });
            $("#jqxgrid").on("filter", function (event) {
                $("#events").jqxPanel('clearcontent');
                var filterinfo = $("#jqxgrid").jqxGrid('getfilterinformation');
                var eventData = "Triggered 'filter' event";
                for (i = 0; i < filterinfo.length; i++) {
                    var eventData = "Filter Column: " + filterinfo[i].filtercolumntext;
                    $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
                }
            });
            $('#clearfilteringbutton').jqxButton({ height: 25, theme: theme });
            $('#filterbackground').jqxCheckBox({ checked: true, height: 25, theme: theme });
            $('#filtericons').jqxCheckBox({ checked: false, height: 25, theme: theme });
            // clear the filtering.
            $('#clearfilteringbutton').click(function () {
                $("#jqxgrid").jqxGrid('clearfilters');
            });
            // show/hide filter background
            $('#filterbackground').on('change', function (event) {
                $("#jqxgrid").jqxGrid({ showfiltercolumnbackground: event.args.checked });
            });
            // show/hide filter icons
            $('#filtericons').on('change', function (event) {
                $("#jqxgrid").jqxGrid({ autoshowfiltericon: !event.args.checked });
            });
            $("#ReloadData").jqxButton({ theme: theme });
            $("#ReloadData").click(function () {
                var adapter = new $.jqx.dataAdapter(source);
                $("#jqxgrid").jqxGrid({ source: adapter });
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
        <div id="eventslog" style="margin-top: 30px;">
            <div style="width: 200px; float: left; margin-right: 10px;">
            <input value="Remove Filter" id="clearfilteringbutton" type="button" />
            <input type="button" value="Reload Data" id="ReloadData" />
            <div style="margin-top: 10px;" id='filterbackground'>Filter Background</div>
            <div style="margin-top: 10px;" id='filtericons'>Show All Filter Icons</div>
            </div>
            <div style="float: left;">
                Event Log:
                <div style="border: none;" id="events">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

If you just call “updatebounddata” it will not be, because that method is not supposed to Clear the Filter or Sorting, it will update your Data and will keep the Filtering and Sorting as it is supposed to.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Fritz45Participant]

Hi Peter

Here is an example page that reproduces the error. I downloaded the latest version of JQWidgets yesterday.

To reproduce error:

1. Change reference paths to stylesheets and script references
2. Load page
3. Click ‘Reload Grid’ link to load grid
4. Put a filter to show only values less than 2 on column “Quantity” (you should see 7 rows).
5. Click ‘Reload Grid’ link to load grid again
6. Note that filter is still applied (row count differs because of random data generation, but still only rows that have Quantity less than 2 are shown). ALSO, I cannot see the filter button on column Quantity, and if I open filter and click clear, nothing happens. Filter is invisible/not alterable and stuck

Here is an example page which shows this behaviour in Chrome and IE10:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Example Reproducing Filter Problem</title>    
       
     <link rel="stylesheet" href="/assets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="/assets/jqwidgets/styles/jqx.bootstrap.css" type="text/css" />    
</head>
<body class='default'>
    <div style="position:relative; left:30px;  top:40px;">
        <a id="btnLoadGrid" href="#" class="btn">Reload Grid</a>
    </div>
    <br />
    <div id='jqxWidget' style="position:relative; left:30px; top:100px; font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
    </div>
    
    <script src="/assets/js/jquery.js"></script>
    
    <script type="text/javascript" src="/assets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/assets/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="/assets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="/assets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="/assets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="/assets/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="/assets/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="/assets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="/assets/jqwidgets/jqxdropdownlist.js"></script>    
    <script type="text/javascript" src="/assets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/assets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="/assets/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="/assets/jqwidgets/jqxgrid.filter.js"></script>
   
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnLoadGrid").click(buildGrid);
        });
        function buildGrid() {
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 100; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                selectionmode: 'multiplecellsadvanced',
                sortable: true,
                filterable: true,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
        }
    </script>
</body>
</html>

Am I missing something very basic?

I also noted that if I clear all children on the parent DIV for the grid, then the grid no longer shows after the first reload. It seems some elements are still in the DOM somewhere.

Kind Regards,

Fritz

[Peter StoevKeymaster]

Hi Fritz45

Please, use the sample I sent you as a solution.

Here is your updated sample, too:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Example Reproducing Filter Problem</title>    
       
     <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.bootstrap.css" type="text/css" />    
</head>
<body class='default'>
    <div style="position:relative; left:30px;  top:40px;">
        <a id="btnLoadGrid" href="#" class="btn">Reload Grid</a>
    </div>
    <br />
    <div id='jqxWidget' style="position:relative; left:30px; top:100px; font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
    </div>
    
  <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/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/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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
   
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnLoadGrid").click(buildGrid);
        });
        function buildGrid() {
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 100; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            if (!this.initialized) {
                $("#jqxgrid").jqxGrid(
                {
                    source: dataAdapter,
                    selectionmode: 'multiplecellsadvanced',
                    sortable: true,
                    filterable: true,
                    columns: [
                      { text: 'First Name', datafield: 'firstname', width: 100 },
                      { text: 'Last Name', datafield: 'lastname', width: 100 },
                      { text: 'Product', datafield: 'productname', width: 180 },
                      { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                      { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                      { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                    ]
                });
                this.initialized = true;
            }
            else {
                $("#jqxgrid").jqxGrid('clearfilters');
                $("#jqxgrid").jqxGrid({ source: dataAdapter });
               
                }
        }
    </script>
</body>
</html>

You cannot initialize a Grid without a DIV tag. If you remove its DIV tag, the Grid will not be displayed. In case you want to destroy the widget, use its “destroy” method.

Best Regards,
Peter Stoev

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

[Author]

Posts