Grid Filter Row Bug - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 8 years, 8 months ago.

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

Author

Grid Filter Row Bug Posts

March 29, 2016 at 1:34 pm Grid Filter Row Bug #82963

Participant

Hello,
I’ve spent quite a bit of time working with the JQX Grid lately, and to start off I will say it is an impressive tool. That said, there is a bug in the implementation of the filter row that attaches new markup to the DOM when the grid’s data is updated, and fails to clear out the old. The below code with a local data set demonstrates this bug; but it also occurs in virtual mode, and other data source methods.

It took quite a few hours to track this down but in the below example every time the grid is updated, the grid will re-create the filter row elements and leave the old ones intact. However if you change the showfilterrow property to false – it will still refresh but no longer pollute the DOM with old elements.

Here is the complete markup for the example, and this occurs using JQWidgets 4.0.0 (and earlier versions).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="base.css" />
    <link rel="stylesheet" type="text/css" href="energyblue.css" />

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>

    <script type="text/javascript" src="jqx/jqxcore.js"></script>
    <script type="text/javascript" src="jqx/jqxdata.js"></script>
    <script type="text/javascript" src="jqx/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqx/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqx/jqxmenu.js"></script>
    <script type="text/javascript" src="jqx/jqxgrid.js"></script>
    <script type="text/javascript" src="jqx/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="jqx/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="jqx/jqxgrid.columnsreorder.js"></script>
    <script type="text/javascript" src="jqx/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="jqx/jqxgrid.storage.js"></script>
    <script type="text/javascript" src="jqx/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="jqx/jqxcheckbox.js"></script>
    <script type="text/javascript" src="jqx/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="jqx/jqxgrid.grouping.js"></script>
    <script type="text/javascript" src="jqx/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqx/jqxdraw.js"></script>
    <script type="text/javascript" src="jqx/jqxchart.core.js"></script>
    <script type="text/javascript" src="jqx/jqxdata.js"></script>
    <script type="text/javascript" src="jqx/jqxdata.export.js"></script>
    <script type="text/javascript" src="jqx/jqxgrid.export.js"></script>
    <script type="text/javascript" src="jqx/jqxdropdownlist.js"></script>
</head>
<body>
    <div id="JQXGrid"></div>

<script>
    var DataSource = null;
    var DataAdapter = null;

    function CreateDataSet(seed) {
        var result = [];

        for (var x = 0; x < 1000; x++) {
            result.push({
                column00: x * seed,
                column01: x * seed,
                column02: x * seed,
                column03: x * seed,
                column04: x * seed,
                column05: x * seed,
                column06: x * seed,
                column07: x * seed,
                column08: x * seed,
                column09: x * seed
            });
        }

        return result;
    }

    function Refresh() {
        window.setTimeout(Refresh, 15000);

        DataSource.localdata = CreateDataSet(Math.random());
        $("#JQXGrid").jqxGrid("updatebounddata");
    }

    function GetSource(data) {
            return {
                datatype: "json",
                datafields:
                        [
                            { name: "column00", type: "number" },
                            { name: "column01", type: "number" },
                            { name: "column02", type: "number" },
                            { name: "column03", type: "number" },
                            { name: "column04", type: "number" },
                            { name: "column06", type: "number" },
                            { name: "column07", type: "number" },
                            { name: "column08", type: "number" },
                            { name: "column09", type: "number" }
                        ],
                localdata: data
            };
    }

    function GetAdapter(dataSource) {
        return new $.jqx.dataAdapter(dataSource);
    }

    function GetGrid(dataAdapter) {
        return {
            width: "100%",
            pagesize: 30,
            autosavestate: false,
            autoloadstate: false,
            sorttogglestates: 1,
            pageable: true,
            virtualmode: false,
            pagermode: "simple",
            showfilterrow: true,
            sortable: true,
            columnsreorder: true,
            selectionmode: "singlerow",
            autoshowfiltericon: true,
            filterable: true,
            source: dataAdapter,
            columns: [
                { menu: true, editable: false, text: "Column 1", cellsalign: "center", datafield: "column00", index: 0, width: 75, filtertype: "checkedlist" },
                { menu: true, editable: false, text: "Column 2", cellsalign: "center", datafield: "column01", index: 0, width: 75, filtertype: "checkedlist" },
                { menu: true, editable: false, text: "Column 3", cellsalign: "center", datafield: "column02", index: 0, width: 75, filtertype: "checkedlist" },
                { menu: true, editable: false, text: "Column 4", cellsalign: "center", datafield: "column03", index: 0, width: 75, filtertype: "checkedlist" },
                { menu: true, editable: false, text: "Column 5", cellsalign: "center", datafield: "column04", index: 0, width: 75, filtertype: "checkedlist" },
                { menu: true, editable: false, text: "Column 6", cellsalign: "center", datafield: "column05", index: 0, width: 75, filtertype: "checkedlist" },
                { menu: true, editable: false, text: "Column 7", cellsalign: "center", datafield: "column06", index: 0, width: 75, filtertype: "checkedlist" },
                { menu: true, editable: false, text: "Column 8", cellsalign: "center", datafield: "column07", index: 0, width: 75, filtertype: "checkedlist" },
                { menu: true, editable: false, text: "Column 9", cellsalign: "center", datafield: "column08", index: 0, width: 75, filtertype: "checkedlist" },
                { menu: true, editable: false, text: "Column 10", cellsalign: "center", datafield: "column09", index: 0, width: 75, filtertype: "checkedlist" }
            ]
        }
    }

    $().ready(function() {
        DataSource = GetSource(CreateDataSet(Math.random()));
        DataAdapter = GetAdapter(DataSource);

        $("#JQXGrid").jqxGrid(GetGrid(DataAdapter));
        window.setTimeout(Refresh, 15000);
    });

</script>
</body>
</html>

March 29, 2016 at 1:56 pm Grid Filter Row Bug #82965

Peter Stoev

Keymaster

Hi jsmckee,

In case we reproduce this behavior, we will add a work item for future release of jQWidgets and our Grid. Thank you for feedback.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.