jQWidgets Forums

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

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

Author

Beginner: Checkbox-column in grid Posts

January 8, 2013 at 12:34 pm Beginner: Checkbox-column in grid #13283

Marian

Member

Hi,

I am just beginning to evaluate jqwidgets for use in an upcoming major web-application project. I like what I have seen so far, however I have a small problem with displaying a boolean column as a checkbox in my grid.

The data is described as such:

        // Set up the data source for the grid
        var datasource =
            {
                datatype: "json",
                datafields: [
                    { name: 'Code',         type: 'string', map: 'Key>Code' },
                    { name: 'Description',  type: 'string' },
                    { name: 'NotActive',    type: 'bool' },
                ],
                url: 'utility/Event'
            };

        // Set up the data adapter using the data source.
        var dataAdapter = new $.jqx.dataAdapter(
            datasource, 
            {
                downloadComplete: function (data, status, xhr) { 
                    console.log("downloadComplete()");
                },
                loadComplete: function (data) { 
                    console.log("loadComplete() - " + dataAdapter.records.length + " records loaded");
                },
                loadError: function (xhr, status, error) { 
                    // AJAX error, alert. There is not much we can do now.
                    showAjaxError(xhr, status, error);
                }
            });

Then I create the grid with these columns:

            { text: 'Code',           datafield: 'Code', pinned: true },
            { text: 'Description',    datafield: 'Description' },
            { text: 'NotActive1',     datafield: 'NotActive' },
            { text: 'NotActive2',     datafield: 'NotActive', columntype: 'checkbox' },

My JSON data source returns booleans as string “true” and “false”. For example:

 {
  "Key": {
   "Code": "AA",
   "RecID": 1
  },
  "Description": "Application",
  "NotActive": false
 }

The grid displays “true” and “false” in the NotActive1 column, I added that to verify that there actually ARE true values in there. But the NotActive2 column only displays unchecked boxes.

What am I doing wrong? I will gladly submit more information if what I have shown is not sufficient.

Ciao, MM

January 8, 2013 at 12:41 pm Beginner: Checkbox-column in grid #13285

Peter Stoev

Keymaster

Hi Marian,

Please check, whether you use the latest version of jQWidgets.

I have tested your code and added two JSON objects, one with “NotActive” false and another with “NotActive” true. The result is a checked and unchecked checkbox.

Here’s the code:

<!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.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            // prepare the data
            var data = [
                {
                "Key": {
                    "Code": "AA",
                    "RecID": 1
                },
                "Description": "Application",
                "NotActive": true
                },
                {
                    "Key": {
                        "Code": "AA",
                        "RecID": 1
                    },
                    "Description": "Application",
                    "NotActive": false
                }
            ];
            var datasource =
                  {
                      datatype: "json",
                      datafields: [
                          { name: 'Code', type: 'string', map: 'Key>Code' },
                          { name: 'Description', type: 'string' },
                          { name: 'NotActive', type: 'bool' },
                      ],
                        localdata: data
                  };
            // Set up the data adapter using the data source.
            var dataAdapter = new $.jqx.dataAdapter(
                datasource,
                {
                    downloadComplete: function (data, status, xhr) {
                    },
                    loadComplete: function (data) {
                    },
                    loadError: function (xhr, status, error) {
                    }
                });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                columns: [
                    { text: 'Code', datafield: 'Code', pinned: true },
                    { text: 'Description', datafield: 'Description' },
                    { text: 'NotActive1', datafield: 'NotActive' },
                    { text: 'NotActive2', datafield: 'NotActive', columntype: 'checkbox' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
     </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 8, 2013 at 3:09 pm Beginner: Checkbox-column in grid #13301

Marian

Member

Hi Peter,

Thank you very much for your swift reply and effort in replicating my problem. That is very much appreciated.

I downloaded and installed jqWidgets 2.6 yesterday, how can I check what exact version I have?

Ciao, MM

January 9, 2013 at 6:05 am Beginner: Checkbox-column in grid #13340

Peter Stoev

Keymaster

Hi Marian,

You can check the version in the ‘js’ file’s header. Did you try the sample I posted in my previous post?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.