jQWidgets Forums
This topic contains 3 replies, has 2 voices, and was last updated by Hristo 8 years, 1 month ago.
Viewing 4 posts - 1 through 4 (of 4 total)
-
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:
I expected (hoped for) a checkbox either checked or unchecked depending on the value. Where do I err?
Viewing 4 posts - 1 through 4 (of 4 total)
You must be logged in to reply to this topic.