jQuery UI Widgets Forums Grid Jqxgrid Checkbox Column – Column not checking properly

This topic contains 3 replies, has 2 voices, and was last updated by  Peter Stoev 11 years, 7 months ago.

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

  • tdag
    Member

    Hello,

    I am working with a jqxgrid checkbox column and i’m having some difficulties with checking/unchecking based on a boolean value in the JSON data source.

    After browsing through these forums, I came across a sample grid that was posted that is almost exactly like what I am trying to do. It states that it should work correctly and was confirmed to be working.

    The issue that I am coming across is that the checkboxes in the column are all unchecked and non-clickable. This is happening both on the sample grid that was posted as well as my own project. To be sure, I made sure to copy the code of the entire sample grid and I am still getting the same issue.

    Here is the code for the sample:

    <!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>

    Any idea what could be the issue? The grid seems to be displaying properly except for the checkbox column.

    Thanks!


    Peter Stoev
    Keymaster

    Hi,

    1. The sample works correctly with the current version. The first checkbox is unchecked, the second one is checked.

    2. Checkboxes are not clickable in this sample, because in the posted code the Grid’s Editing feature is not enabled i.e the “editable” property is not set to true and the jqxgrid.edit.js module is missing, too.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    tdag
    Member

    Hi Peter,

    If it seems to be working on your side, do you think it might have to do with the CSS or JS for jqxCheckbox not being able to display correctly?

    I still cannot get it to display the checkmark (I just get two empty checkboxes) and have tried every combination of changing the type of the datafield, changing the type of the column, etc.

    Thanks!


    Peter Stoev
    Keymaster

    Hi,

    It is possible. In case you did not add the required CSS and Images included in the download package. The path to the images folder is: jqwidgets/styles/images. So it should be a sub folder of the jqx.base.css and the other CSS files.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.