How to show filteritems default unchecked? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: checkbox, checkedlist, filter, filter row, filtertype, grid, jqxcheckbox, jqxGrid ;, threestatecheckbox, uncheck

This topic contains 3 replies, has 4 voices, and was last updated by Hristo 4 years, 7 months ago.

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

Author

How to show filteritems default unchecked? Posts

March 13, 2015 at 12:00 pm How to show filteritems default unchecked? #68469

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

March 13, 2015 at 1:33 pm How to show filteritems default unchecked? #68480

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/

June 2, 2020 at 10:25 am How to show filteritems default unchecked? #112124

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?

June 3, 2020 at 8:34 am How to show filteritems default unchecked? #112129

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

Author

Posts

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

You must be logged in to reply to this topic.