jQuery UI Widgets › Forums › Grid › Checkbox Column
Tagged: checkbox column, grid, jquery grid
This topic contains 5 replies, has 2 voices, and was last updated by borbird 12 years, 8 months ago.
-
AuthorCheckbox Column Posts
-
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
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 StoevjQWidgets Team
http://www.jqwidgets.comI 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
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 StoevjQWidgets Team
http://www.jqwidgets.comIn 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 StoevjQWidgets Team
http://www.jqwidgets.comAh! 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
-
AuthorPosts
You must be logged in to reply to this topic.