jQuery UI Widgets Forums Grid Checkbox Column

This topic contains 5 replies, has 2 voices, and was last updated by  borbird 12 years, 8 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Checkbox Column #4555

    borbird
    Member

    So, I have a grid that has a checkbox column and the databinding is JSON (the serverside binding JSON object is a boolean type).  Every row, when bound and shown, has the checkbox column always rendered as checked.  This has got to be a silly mistake.  What binding value are you looking for to check/uncheck the checkbox column type?

    Thx!

    Rob

    Checkbox Column #4565

    Peter Stoev
    Keymaster

    Hi Rob,

    – Do you set the type: “boolean”, when you define a boolean datafield in the source object’s datafield definitions array?

    For example:

               var source =
    {
    datatype: "json",
    datafields: [
    { name: 'name' },
    { name: 'available'. type: 'boolean' },
    { name: 'calories', type: 'int' },
    { name: 'totalfat' },
    { name: 'protein' },
    ],
    id: 'id',
    url: url
    };

    – Could you also send us the initialization code that you use on your side, if the above does not help?

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Checkbox Column #4589

    borbird
    Member

    I see that boolean type does work, but it shows true/false (and I see the correct ‘true’ and ‘false’ value do show) but I really want to display the boolean data as a checkbox.

    Does the checkbox field work? and what data type has to be used to drive it?

    Thx,

    Rob

    Checkbox Column #4590

    Peter Stoev
    Keymaster

    The Checkbox column expects boolean fields. If your value is true, the checkbox will be checked. If it is false, it will be displayed as unchecked. Note also that “true” is not equal to true. The first one is a string where the second one is a boolean. That’s why, if you want the “true” value to be considered as true, you should set the type to “boolean”. Here’s an example of our Grid with Checkbox column: checkboxcolumn.htm?classic

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Checkbox Column #4595

    Peter Stoev
    Keymaster

    In addition, to my previous post. I prepared a small sample with a CheckBox column and with a JSON data source. The sample is with 2 records, the first one’s checkbox value is “false’. The second row’s checkbox value is “true”. The checkbox is unchecked in the first row and checked in the second row.

    <!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.7.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.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var data = '[{ "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57", "City": "Berlin", "Country": "Germany", "Available": "false" }, { "CompanyName": "Ana Trujillo Emparedados y helados", "ContactName": "Ana Trujillo", "ContactTitle": "Owner", "Address": "Avda. de la Constitucin 2222", "City": "Mxico D.F.", "Country": "Mexico", "Available": "true" }]';
    // prepare the data
    var source =
    {
    localdata: data,
    datatype: "json",
    datafields: [
    { name: 'CompanyName' },
    { name: 'ContactName' },
    { name: 'ContactTitle' },
    { name: 'City' },
    { name: 'Country' },
    { name: 'Available', type: 'boolean' }
    ]
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    $("#jqxgrid").jqxGrid(
    {
    source: dataAdapter,
    columns: [
    { text: 'Available', columntype: 'checkbox', datafield: 'Available', width: 250 },
    { text: 'Company Name', datafield: 'CompanyName', width: 250 },
    { text: 'Contact Name', datafield: 'ContactName', width: 250 },
    { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
    { text: 'City', datafield: 'City', width: 120 },
    { text: 'Country', datafield: 'Country', minwidth: 120 }
    ]
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id="jqxgrid">
    </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Checkbox Column #4634

    borbird
    Member

    Ah! I get it, the boolean type has to be specifically typed in the JSON object in JS…it worked fine after I added that attribute. Thx a bunch!!

    Rob

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

You must be logged in to reply to this topic.