jQWidgets Forums

Tagged: grid, grid filtering, grid grouping, grid sorting, jquery grid

This topic contains 2 replies, has 2 voices, and was last updated by Dattaram Phansekar 13 years, 1 month ago.

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

Author

Issue with Filter Options for Grid Columns Posts

March 12, 2012 at 1:23 pm Issue with Filter Options for Grid Columns #2677

Member

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).

March 12, 2012 at 2:11 pm Issue with Filter Options for Grid Columns #2678

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

March 13, 2012 at 7:48 am Issue with Filter Options for Grid Columns #2680

Dattaram Phansekar

Member

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.

Author

Posts

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

You must be logged in to reply to this topic.