jQWidgets Forums

Tagged: angular grid, filter, filter menu, filterable, filtering, grid, jquery grid, jqxgrid, multiple grids

This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 9 years, 7 months ago.

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

Author

Filterable in Multiple Grids on a Page Posts

July 24, 2015 at 9:24 pm Filterable in Multiple Grids on a Page #74151

Billl

Participant

I have three grids on a page. Each of them I set similar to this with subsequent calls to set the DataAdapter.


    $("#myGrid").jqxGrid(
        {
            columns: [
                { text: 'Name', datafield: 'Name', width: '40%' },
                { text: 'Server ID', datafield: 'ServerID', width: '30%' },
                { text: 'Active', datafield: 'IsActive', width: '30%' }
            ],
            width: '600px',
            height: '200px',
            sortable: true,
            filtermode: 'default',
            autoshowfiltericon: true,
            filterable: true,
            enabletooltips: true,
            columnsresize: true
        }
    );

The column filter pane dropdown display correctly for the last grid only. I see two filters with ‘contains’ option and a blank text box to enter a filter text (two of these with ‘And’ in between). There is an Filter and Clear button.

For the first two grids, however, I get a pane dropped down from the filter button but with two cut-off text boxes only. Filter and Clear buttons appear below the two text boxes but they don’t appear to do anything.

What am I missing?

July 24, 2015 at 9:29 pm Filterable in Multiple Grids on a Page #74152

Billl

Participant

I should mention that if I comment out the filterable options in the third grid it displays and works correctly on the second one.

July 27, 2015 at 10:40 am Filterable in Multiple Grids on a Page #74169

Dimitar

Participant

Hello Billl,

Thank you for your feedback. We confirm the reported issue.

Best Regards,
Dimitar

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

July 27, 2015 at 11:07 am Filterable in Multiple Grids on a Page #74176

Dimitar

Participant

Update: this occurs, because only one data adapter instance has been used for all grids. You should use a different data adapter for each grid, i.e.:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = [{
                Name: 'Server 1',
                ServerID: 1,
                IsActive: true
            }, {
                Name: 'Server 2',
                ServerID: 2,
                IsActive: false
            }, {
                Name: 'Server 3',
                ServerID: 3,
                IsActive: true
            }];

            // prepare the data
            var source = {
                datatype: "json",
                datafields: [{
                    name: 'Name',
                    type: 'string'
                }, {
                    name: 'ServerID',
                    type: 'int'
                }, {
                    name: 'IsActive',
                    type: 'bool'
                }],
                id: 'ServerID',
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            // first grid initialization
            $("#myGrid1").jqxGrid({
                source: dataAdapter,
                columns: [{
                    text: 'Name',
                    datafield: 'Name',
                    width: '40%'
                }, {
                    text: 'Server ID',
                    datafield: 'ServerID',
                    width: '30%'
                }, {
                    text: 'Active',
                    datafield: 'IsActive',
                    width: '30%'
                }],
                width: '600px',
                height: '200px',
                sortable: true,
                filtermode: 'default',
                autoshowfiltericon: true,
                filterable: true,
                enabletooltips: true,
                columnsresize: true
            });

            // second grid initialization
            var secondDataAdapter = new $.jqx.dataAdapter(source);

            $("#myGrid2").jqxGrid({
                source: secondDataAdapter,
                columns: [{
                    text: 'Name',
                    datafield: 'Name',
                    width: '40%'
                }, {
                    text: 'Server ID',
                    datafield: 'ServerID',
                    width: '30%'
                }, {
                    text: 'Active',
                    datafield: 'IsActive',
                    width: '30%'
                }],
                width: '600px',
                height: '200px',
                sortable: true,
                filtermode: 'default',
                autoshowfiltericon: true,
                filterable: true,
                enabletooltips: true,
                columnsresize: true
            });

            // third grid initialization
            var thirdDataAdapter = new $.jqx.dataAdapter(source);

            $("#myGrid3").jqxGrid({
                source: thirdDataAdapter,
                columns: [{
                    text: 'Name',
                    datafield: 'Name',
                    width: '40%'
                }, {
                    text: 'Server ID',
                    datafield: 'ServerID',
                    width: '30%'
                }, {
                    text: 'Active',
                    datafield: 'IsActive',
                    width: '30%'
                }],
                width: '600px',
                height: '200px',
                sortable: true,
                filtermode: 'default',
                autoshowfiltericon: true,
                filterable: true,
                enabletooltips: true,
                columnsresize: true
            });
        });
    </script>
</head>
<body class='default'>
    <div id="myGrid1">
    </div>
    <div id="myGrid2">
    </div>
    <div id="myGrid3">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

July 27, 2015 at 1:40 pm Filterable in Multiple Grids on a Page #74180

Billl

Participant

Thanks Dimitar. I must be doing something else wrong. Your sample works in JSFiddle but mine doesn’t, yet. A few differences in my code – I’m using 3.8.0 and a single Knockout observable array instead of plain array. I have three source definitions and three data adapters for the three grids. I’ll update to the latest code and see if that helps. Any other suggestions would be appreciated.

This is a slightly sanitized copy of one of them.


    var siteDataSource = {
        localdata: siteVM.siteDataList,
        datatype: "observablearray",
        datafields: [
            { name: 'Path', type: 'string' },
            { name: 'ServerID', type: 'string' },
            { name: 'PercentUsed', type: 'string' },
            { name: 'IsActive', type: 'string' }
        ],
        id: 'ID',
        async: false
    };
    var siteDataSourceAdapter = new $.jqx.dataAdapter(siteDataSource);

    $("#grid").jqxGrid(
        {
            columns: [
                { text: 'Path', datafield: 'Path', width: '30%' },
                { text: 'ServerID', datafield: 'ServerID', width: '20%' },
                { text: 'Percent Used', datafield: 'PercentUsed', width: '30%' },
                { text: 'Active', datafield: 'IsActive', width: '20%' }
            ],
            width: '600px',
            autoheight: true,
            sortable: true,
            filterable: true,
            enabletooltips: true,
            columnsresize: true,
            theme: theme,
            rtl: rtl
        }
    );

    $("#grid").jqxGrid({ source: siteDataSourceAdapter });

July 28, 2015 at 5:58 am Filterable in Multiple Grids on a Page #74205

Dimitar

Participant

Hi Billl,

Please try setting the source on the grid initialization, not afterwards, i.e.:

$("#grid").jqxGrid({
    source: siteDataSourceAdapter,
    columns: [{
        text: 'Path',
        datafield: 'Path',
        width: '30%'
    }, {
        text: 'ServerID',
        datafield: 'ServerID',
        width: '20%'
    }, {
        text: 'Percent Used',
        datafield: 'PercentUsed',
        width: '30%'
    }, {
        text: 'Active',
        datafield: 'IsActive',
        width: '20%'
    }],
    width: '600px',
    autoheight: true,
    sortable: true,
    filterable: true,
    enabletooltips: true,
    columnsresize: true,
    theme: theme,
    rtl: rtl
});

If this does not help, please share the erroneous JSFiddle example you mentioned.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.