jQWidgets Forums

Tagged: cascaded filtering, excel filtermode, filter, grid, jqxgrid, width

This topic contains 5 replies, has 3 voices, and was last updated by Nadezhda 10 years, 2 months ago.

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

Author

Cascading excel filter question Posts

April 17, 2015 at 7:18 am Cascading excel filter question #69981

nico86

Participant

Hi,
I use excel filters , is there a way to cascade filter. that is to say that the second filter like the first account . for example, with a grid city/country if I select country = ‘ FRANCE ‘ then just the cities of France should only be present in the second filter.(like microsoft excel)

Another quick question , how can expand the width of an excel filter?

thank you
Nicolas.

April 17, 2015 at 9:16 am Cascading excel filter question #69986

Nadezhda

Participant

Hello Nicolas,

Please, refer to the following forum topic about cascade filter: http://www.jqwidgets.com/community/topic/cascaded-filtering-in-jqx-grid/.
You can change the width of an excel filter via css.

Best Regards,
Nadezhda

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

April 17, 2015 at 11:55 am Cascading excel filter question #69999

nico86

Participant

I have changed two css value,

#gridmenujqxgrid0 {
width:235px!important;;
}
#listBoxContentfilter1jqxgrid0 {
width:220px!important;;
}

This has widened the grid filter but scrollbar don’t move, (see screen), can you help me to tell me wich class or id i have to changed.
[URL=http://www.casimages.com/i/150417015523548924.jpg.html][IMG]http://nsa38.casimages.com/img/2015/04/17/mini_150417015523548924.jpg[/IMG][/url]

April 17, 2015 at 12:02 pm Cascading excel filter question #70001

Peter Stoev

Keymaster

Hey nico86,

Sorry, that my colleague misleaded you! It is not possible to change the size of widgets within the Filtering Menu.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 17, 2015 at 12:21 pm Cascading excel filter question #70004

nico86

Participant

bad news, I hope in a futur releases

April 17, 2015 at 12:53 pm Cascading excel filter question #70008

Nadezhda

Participant

Hi Nicolas,

Please, find the following example (Excel-like Filter demo) with some CSS changes. I hope it would be helpful to you.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <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/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.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <style>
        #gridmenujqxgrid {
            width: 264px!important;
        }
        #filter1jqxgrid {
              width: 245px!important;
        }
        #listBoxContentfilter1jqxgrid {
            width: 226px!important;
        }
        #verticalScrollBarfilter1jqxgrid {
              left: 226px!important;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/orders.xml";

            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:OrderID',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                sortable: true,
                filterable: true,
                filtermode: 'excel',
                columnsresize: true,
                autoshowfiltericon: false,
                columns: [
                  { text: 'Ship Name', datafield: 'ShipName', width: 250 },
                  { text: 'Ship City', datafield: 'ShipCity', width: 250 },
                  { text: 'Ship Country', datafield: 'ShipCountry', width: 200 },
                  { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
                  { text: 'Ship Address', datafield: 'ShipAddress', width: 350 }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Nadezhda

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.