jQuery UI Widgets › Forums › Grid › Jqxgrid Checkbox Column – Column not checking properly
Tagged: checkbox column, grid checkbox column, jqxgrid
This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 7 months ago.
-
Author
-
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!
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 StoevjQWidgets Team
http://www.jqwidgets.comHi 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!
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 StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.