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

    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”>
    <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)

    // initialize 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”).on(“bindingcomplete”, function(event) {
    if (clearFilters === true) {
    clearFilters = false;
    <body class=’default’>
    <button id=”refresh”>Refresh</button>
    <div id=’jqxWidget'”>
    <div id=”jqxgrid”></div>



    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,

    jQWidgets team

    Peter Stoev

    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


    Hi Peter,

    It works for us. Thanks for providing a solution.


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

You must be logged in to reply to this topic.