jQuery UI Widgets Forums Grid Multiple Filters

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Multiple Filters #42985

    rijesh
    Participant

    Hello,

    I want to filter the grid using multiple filters. For eg: Country, Job Title etc. I could see Costume filtering (http://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/customfiltering.htm) suitable for my project, but this doesn’t work as i want. I want something of this form: First Name-> Antoni & Product->Cappuccino this should result in the final grid table. And am using the mysql as the data source. Please help.

    Multiple Filters #43649

    Dimitar
    Participant

    Hello rijesh,

    Do you wish the filter to be inside or outside the grid? Please check out the other filtering demos in the demo section and also the Filtering tutorial in the Documentation.

    Best Regards,
    Dimitar

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

    Multiple Filters #44155

    rijesh
    Participant

    I would want the filters to be listed outside the grid. Something similar to customfiltering example.

    Multiple Filters #45262

    Dimitar
    Participant

    Hi rijesh,

    How about this solution?

    <!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.10.2.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.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,
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'date', type: 'date' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' }
                    ],
                    datatype: "array"
                };
    
                var addfilter = function (name) {
                    var filtergroup = new $.jqx.filter();
    
                    var filter_or_operator = 1;
                    var filtervalue = name;
                    var filtercondition = 'contains';
                    var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
    
                    filtergroup.addfilter(filter_or_operator, filter1);
                    // add the filters.
                    $("#jqxgrid").jqxGrid('addfilter', 'firstname', filtergroup);
                    // apply the filters.
                    $("#jqxgrid").jqxGrid('applyfilters');
                }
                var adapter = new $.jqx.dataAdapter(source);
    
                $("#jqxgrid").jqxGrid(
                {
                    width: 670,
                    source: adapter,
                    theme: theme,
                    filterable: true,
                    sortable: true,
                    autoshowfiltericon: true,
                    columns: [
                      { text: 'First Name', datafield: 'firstname', width: 90 },
                      { text: 'Last Name', datafield: 'lastname', width: 90 },
                      { text: 'Product', datafield: 'productname', width: 170 },
                      { text: 'Order Date', datafield: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' },
                      { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                      { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
                    ]
                });
    
                var filterSource = new Array();
                for (var i = 0; i < adapter.records.length; i++) {
                    var currentName = adapter.records[i].firstname;
                    if (filterSource.indexOf(currentName) == -1) {
                        filterSource.push(currentName);
                    };
                };
    
                $("#filterList").jqxDropDownList({ width: 200, source: filterSource });
    
                $("#filterList").on("select", function (event) {
                    var selectedLabel = event.args.item.label;
                    addfilter(selectedLabel);
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="jqxgrid">
        </div>
        Filter "First Name":
        <div id="filterList">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.