jQuery UI Widgets Forums Grid How to disable threestatecheckbox on load of jqxGrid

This topic contains 3 replies, has 3 voices, and was last updated by  nitinayir8 9 years, 3 months ago.

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

  • nitinayir8
    Participant

    Hi Admin,

    Can you check “threestatecheckbox” issue. How to disable threestatecheckbox onload of jqxGrid? We tried by setting “threestatecheckbox: false” property but it still shows that intermediate state.

    Refer below code:
    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.classic.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/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.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.edit.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxcheckbox.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/jqxdata.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.pager.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    // prepare the data
    var theme = ‘classic’;

    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘ShippedDate’, type: ‘date’},
    { name: ‘ShipName’, type: ‘string’},
    { name: ‘ShipAddress’, type: ‘string’},
    { name: ‘ShipCity’, type: ‘string’},
    { name: ‘ShipCountry’, type: ‘string’},
    { name: ‘available’, type: ‘boolean’}
    ],
    url: ‘data.php’,
    cache: false,
    filter: function()
    {
    // update the grid and send a request to the server.
    $(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
    },
    sort: function()
    {
    // update the grid and send a request to the server.
    $(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
    },
    root: ‘Rows’,
    beforeprocessing: function(data)
    {
    if (data != null)
    {
    source.totalrecords = data[0].TotalRows;
    }
    }
    };
    var dataadapter = new $.jqx.dataAdapter(source, {
    loadError: function(xhr, status, error)
    {
    alert(error);
    }
    }
    );

    // initialize jqxGrid
    $(“#jqxgrid”).jqxGrid(
    {
    source: dataadapter,
    selectionmode: “multiplecellsadvanced”,
    theme: theme,
    filterable: true,
    clipboard: true,
    enablebrowserselection: true,
    altrows: true,
    sortable: true,
    autoheight: true,
    pageable: true,
    virtualmode: true,
    editable: true,
    rendergridrows: function(obj)
    {
    return obj.data;
    },
    columns: [
    { text: ”, datafield: ‘available’, columntype: ‘checkbox’, width: ‘2%’, filterable: false, threestatecheckbox: false},
    { text: ‘Shipped Date’, datafield: ‘ShippedDate’, cellsformat: ‘yyyy-MM-dd’, width: 200 },
    { text: ‘Ship Name’, datafield: ‘ShipName’, width: 200 },
    { text: ‘Address’, datafield: ‘ShipAddress’, width: 180 },
    { text: ‘City’, datafield: ‘ShipCity’, width: 100 },
    { text: ‘Country’, datafield: ‘ShipCountry’, width: 140 }
    ]
    });
    var clearFilters = false;
    $(“#refresh”).on(“click”, function() {
    clearFilters = true;
    $(“#jqxgrid”).jqxGrid(“clearfilters”);
    });

    $(“#jqxgrid”).on(“bindingcomplete”, function(event) {
    if (clearFilters === true) {
    $(“#jqxgrid”).jqxGrid(“removesort”);
    clearFilters = false;
    }
    });
    });
    </script>
    </head>
    <body class=’default’>
    <button id=”refresh”>Refresh</button>
    <div id=’jqxWidget'”>
    <div id=”jqxgrid”></div>
    </div>
    </body>
    </html>

    Regards,
    Nitin


    Dimitar
    Participant

    Hi Nitin,

    In the demo CheckBox Column, if we set threestatecheckbox to false, indeterminate state is no longer available. An issue may occur if no datafield is set to the checkbox column but this is not the case on your side. Please make sure you have the latest version of jQWidgets (3.7.1) and test again.

    Best Regards,
    Dimitar

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


    Peter Stoev
    Keymaster

    Hi Nitin,

    Indeterminate state is displayed for Null values. Please, use the following example: http://jsfiddle.net/jqwidgets/2f28ekta/ as solution.

    Best Regards,
    Peter Stoev

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


    nitinayir8
    Participant

    Hi Peter,

    It works for us. Thanks for providing a solution.

    regards,
    Nitin

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

You must be logged in to reply to this topic.