jQuery UI Widgets Forums Grid How to show filteritems default unchecked?

This topic contains 3 replies, has 4 voices, and was last updated by  Hristo 1 month ago.

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

  • nitinayir8
    Participant

    Hi Admin,

    Can you tell, how we can show filteritems of “Product” checklist default in unselect state. There are three state of checkbox checklist(0- Uncheck, 1 checked, 3 – intermediate).
    We want to show uncheck state, current state is selectall(checked – 1) Refer Checklist filter example.

    Please provide an example without applying any filter.

    Thanks,
    Nitin


    Dimitar
    Participant

    Hi Nitin,

    Here is how to uncheck all filter items initially:

    <!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/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/jqxcalendar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var data = generatedata(500);
                var source =
                {
                    localdata: data,
                    datafields:
                    [
                        { name: 'name', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'available', type: 'bool' },
                        { name: 'date', type: 'date' },
                        { name: 'quantity', type: 'number' }
                    ],
                    datatype: "array"
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                var productsFilterList;
    
                $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    source: dataAdapter,
                    showfilterrow: true,
                    filterable: true,
                    selectionmode: 'multiplecellsextended',
                    ready: function () {
                        productsFilterList.jqxDropDownList('uncheckAll');
                    },
                    columns: [
                      { text: 'Name', columntype: 'textbox', filtertype: 'input', datafield: 'name', width: 215 },
                      {
                          text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220, createfilterwidget: function (column, columnElement, widget) {
                              productsFilterList = widget;
                          }
                      },
                      { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
                      { text: 'Ship Date', datafield: 'date', filtertype: 'range', width: 210, cellsalign: 'right', cellsformat: 'd' },
                      { text: 'Qty.', datafield: 'quantity', filtertype: 'number', cellsalign: 'right' }
                    ]
                });
                $('#clearfilteringbutton').jqxButton({ height: 25 });
                $('#clearfilteringbutton').click(function () {
                    $("#jqxgrid").jqxGrid('clearfilters');
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="jqxgrid">
        </div>
        <input style="margin-top: 10px;" value="Remove Filter" id="clearfilteringbutton"
            type="button" />
    </body>
    </html>

    If, however, you do not wish to display any records in this case, you would have to apply a filter, too.

    Best Regards,
    Dimitar

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


    kaltican
    Participant

    in this case is there a way to unselect one specific value in filter? ie. in Product column Black Tea is unselected and rest values are selected?


    Hristo
    Participant

    Hello kaltican,

    If you want to make some changes to the jqxDropDownList then you could use its methods.
    More details you could find on its API Documentation page:
    https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdropdownlist/jquery-dropdownlist-api.htm?search=dropdownlist
    Please, provide us with more details about what do you want to achieve.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.