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 4 years, 1 month ago.

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

  • nitinayir8

    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.



    Hi Nitin,

    Here is how to uncheck all filter items initially:

    <!DOCTYPE html>
    <html lang="en">
        <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,
                        { 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;
                    width: 850,
                    source: dataAdapter,
                    showfilterrow: true,
                    filterable: true,
                    selectionmode: 'multiplecellsextended',
                    ready: function () {
                    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 () {
    <body class='default'>
        <div id="jqxgrid">
        <input style="margin-top: 10px;" value="Remove Filter" id="clearfilteringbutton"
            type="button" />

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

    Best Regards,

    jQWidgets team


    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?


    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:
    Please, provide us with more details about what do you want to achieve.

    Best Regards,
    Hristo Hristov

    jQWidgets team

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

You must be logged in to reply to this topic.