jQuery UI Widgets Forums Grid Issue with Filter Options for Grid Columns

This topic contains 2 replies, has 2 voices, and was last updated by  Dattaram Phansekar 10 years, 11 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • There seems to be some issue with the filtering option provided on each column header.
    The “Sorting/Grouping” options do not work, till I do some action on individual column.
    If I filter “Column1” and then try to use the filtering options, it work only for this column but not for other columns. Even the option works fine for Column1 till I clear the filters.
    Strange issue…..

    Also, when put 3 grids on a single page, the filtering options menu rendered is of very small size. It comes back to normal size if I do some action (filtering/grouping on the grid).


    Peter Stoev
    Keymaster

    Hi Dattaram Phansekar,

    I tried to reproduce the reported issues, but without avail.

    In my test sample I added 3 grids. Each Grid is with enabled Filtering, Sorting and Grouping. When I filter a column, I am able to Sort, Group or Filter by any column. I also can’t reproduce the issue regarding the Grid’s Menu. I am testing with jQWidgets 1.8. Could you please send us your test code which reproduces the reported issue? Please, write your test browser’s name, version and jQWidgets version.

    Here’s my code:

    <!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.7.1.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.grouping.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 = '';
    var data = generatedata(500);
    var source =
    {
    localdata: data,
    datatype: "array"
    };
    $("#jqxgrid").jqxGrid(
    {
    width: 670,
    source: source,
    theme: theme,
    filterable: true,
    groupable: true,
    sortable: true,
    autoshowfiltericon: true,
    columns: [
    { text: 'First Name', datafield: 'firstname', width: 100 },
    { text: 'Last Name', datafield: 'lastname', width: 100 },
    { text: 'Product', datafield: 'productname', width: 180 },
    { text: 'Order Date', datafield: 'date', width: 100, cellsformat: 'd' },
    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
    { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
    ]
    });
    $("#jqxgrid2").jqxGrid(
    {
    width: 670,
    source: source,
    theme: theme,
    filterable: true,
    groupable: true,
    sortable: true,
    autoshowfiltericon: true,
    columns: [
    { text: 'First Name', datafield: 'firstname', width: 100 },
    { text: 'Last Name', datafield: 'lastname', width: 100 },
    { text: 'Product', datafield: 'productname', width: 180 },
    { text: 'Order Date', datafield: 'date', width: 100, cellsformat: 'd' },
    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
    { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
    ]
    });
    $("#jqxgrid3").jqxGrid(
    {
    width: 670,
    source: source,
    theme: theme,
    filterable: true,
    groupable: true,
    sortable: true,
    autoshowfiltericon: true,
    columns: [
    { text: 'First Name', datafield: 'firstname', width: 100 },
    { text: 'Last Name', datafield: 'lastname', width: 100 },
    { text: 'Product', datafield: 'productname', width: 180 },
    { text: 'Order Date', datafield: 'date', width: 100, cellsformat: 'd' },
    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
    { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
    ]
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id="jqxgrid">
    </div>
    <div id="jqxgrid2">
    </div>
    <div id="jqxgrid3">
    </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Hi Peter,

    Thanks for the reply.
    It seems that my issue is resolved. I was setting couple of properties of the grid twice. The issue could have been due to that.

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

You must be logged in to reply to this topic.