jQuery UI Widgets Forums Grid Checkbox in grid not working

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Checkbox in grid not working #92753

    damerval
    Participant

    Hello,
    I’m not sure what I’m missing, but I want to display a boolean value visually as a checkbox with or without a checkmark in it and the code below doesn’t work:

    JSON:

    [
      {"sf": "My first String", "nf": 1.00, "df": "2017-03-01", "if": 1, "bf": true},
      {"sf": "My second String", "nf": 2.00, "df": "2017-03-02", "if": 2, "bf": false},
      {"sf": "My third String", "nf": 3.00, "df": "2017-03-03", "if": 3, "bf": true}
    ]

    HTML/JS:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    
      <link rel="stylesheet" href="../lib/jqwidgets/styles/jqx.base.css" type="text/css">
    
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    
      <script src="../lib/jqwidgets/jqxcore.js" type="text/javascript"></script>
      <script src="../lib/jqwidgets/jqxdata.js" type="text/javascript"></script>
      <script src="../lib/jqwidgets/jqxbuttons.js" type="text/javascript"></script>
      <script src="../lib/jqwidgets/jqxscrollbar.js" type="text/javascript"></script>
      <script src="../lib/jqwidgets/jqxmenu.js" type="text/javascript"></script>
      <script src="../lib/jqwidgets/jqxlistbox.js" type="text/javascript"></script>
      <script src="../lib/jqwidgets/jqxdropdownlist.js" type="text/javascript"></script>
      <script src="../lib/jqwidgets/jqxgrid.js" type="text/javascript"></script>
      <script src="../lib/jqwidgets/jqxgrid.selection.js" type="text/javascript"></script>
      <script src="../lib/jqwidgets/jqxgrid.sort.js" type="text/javascript"></script>
      <script src="../lib/jqwidgets/jqxgrid.filter.js" type="text/javascript"></script>
      <script src="../lib/jqwidgets/jqxgrid.pager.js" type="text/javascript"></script>
    
      <script type="text/javascript" language="JavaScript">
    
        $(document).ready(function () {
    
          var testSource = {
            dataType: 'json',
            dataFields: [
              { name: "string_field", map: 'sf', type: "string" },
              { name: "number_field", map: 'nf', type: 'number' },
              { name: "date_field", map: 'df', type: 'date' },
              { name: "integer_field", map: 'if', type: 'int' },
              { name: "boolean_field", map: 'bf', type: 'bool' }
            ],
            id: 'if',
            url: "test.json"
          };
    
          var testColumns = [
            { text: "String", dataField: 'string_field', width: 150 },
            { text: "Number", dataField: 'number_field', width: 50, cellsformat: 'd1' },
            { text: "Date", dataField: 'date_field', width: 100, cellsformat: 'MM/dd/yyyy' },
            { text: "Integer", dataField: 'integer_field', width: 50 },
            { text: "Boolean", dataField: 'boolean_field', width: 100, columntype: 'checkbox' }
          ];
    
          var testGrid = $("#testGrid");
    
          var testAdapter = new $.jqx.dataAdapter(testSource);
    
          testGrid.jqxGrid({
            source: testAdapter, columns: testColumns, width: 450, autoHeight: true
          });
    
        })
    
      </script>
    
    </head>
    <body>
      <div id="testGrid"></div>
    </body>
    </html>

    The result is:

    Screenshot

    I expected (hoped for) a checkbox either checked or unchecked depending on the value. Where do I err?

    Checkbox in grid not working #92792

    Hristo
    Participant

    Hello damerval,

    I tested this example and it seems to work fine.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Checkbox in grid not working #92798

    damerval
    Participant

    Indeed it works; I notice that our dependencies are not the same – I have mine individualized to just those I need, you have used jqx-all.js. Would you have an idea of which specific file is needed to display the checkbox type?
    Also, I notice that the value “2017-03-01” gets displayed as “02/28/2017”, same with the other dates – somehow in the formatting they are taken back one day. This could prove a problem. Any idea why that’s happening?

    Checkbox in grid not working #92964

    Hristo
    Participant

    Hello damerval,

    Please, take a look at this tutorial:
    http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxcheckandradio/jquery-checkbox-getting-started.htm?search=check

    I would like to ask you for more details about your second question because I cannot reproduce the issue. Could you provide us more details?

    Best Regards,
    Hristo Hristov

    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.