jQuery UI Widgets Forums Grid Grid Filter Row Bug

Tagged: , ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Grid Filter Row Bug #82963

    jsmckee
    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>
    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

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

You must be logged in to reply to this topic.