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

Tagged: , ,

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    How to disable threestatecheckbox on load of jqxGrid Posts
  • February 27, 2015 at 8:51 am How to disable threestatecheckbox on load of jqxGrid #67788

    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

    February 27, 2015 at 10:29 am How to disable threestatecheckbox on load of jqxGrid #67799

    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/

    February 27, 2015 at 10:34 am How to disable threestatecheckbox on load of jqxGrid #67800

    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/

    February 27, 2015 at 11:29 am How to disable threestatecheckbox on load of jqxGrid #67801

    nitinayir8
    Participant

    Hi Peter,

    It works for us. Thanks for providing a solution.

    regards,
    Nitin

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

You must be logged in to reply to this topic.