jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Checkbox Column disappearing
This topic contains 1 reply, has 1 voice, and was last updated by abishur 6 years, 5 months ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
Author
-
The code shown below is resulting in the checkbox column sometimes disappearing when a check box is clicked. I *think* I know why it’s happening, but I can’t figure out how to get it to STOP happening. When I click on a checkbox, it send a GET request to my php file and even though I call beginupdate, it’s still having a race condition with my updateTable function that is called every 5 seconds (for testing, I plan to slow this down later) that refreshes all the data in the grid.
My guess is that I’m am calling one or both of these functions incorrectly. I’ve been digging through the API and have not found much in the way of how to use the existing, builtin functions to send my data with GET so I’ve written an external function and getting issues. Likewise I’m using a setTimeout in my updateTable function, when there is probably some refresh method built-in that I’ve yet to find. Any advice pointing me in the right direction would be very appreciated!
Here’s the code:
<!DOCTYPE html> <html lang="en"> <head> //ToDo: remove unneeded includes <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> $(document).ready(function () { var dateFormat = "MM/dd/yyy"; // prepare the data var theme = 'classic'; var source = { datatype: "json", datafields: [ { name: 'trans_id', type: 'string'}, { name: 'DateOrdered', type: 'date'}, { name: 'Buyer', type: 'string'}, { name: 'OneOf', type: 'string'}, { name: 'Design', type: 'string'}, { name: 'Size', type: 'integer'}, { name: 'Model', type: 'string'}, { name: 'ShipBy', type: 'string'}, { name: 'sticky_note', type: 'boolean'}, { name: 'wrap_cut', type: 'boolean'}, { name: 'magnet_applied', type: 'boolean'}, { name: 'boxed', type: 'boolean'}, { name: 'was_shipped', type: 'boolean'} ], url: 'connect.php', root: 'Rows', beforeprocessing: function(data) { source.totalrecords = data[0].TotalRows; } // refresh or update function goes here maybe?? }; // After binding is complete allow changes to be made $("#grid").on("bindingcomplete", function (event) {// your code here.}); // updateTable(); $('#grid').on('cellvaluechanged', function (event) { $('#grid').jqxGrid('beginupdate', true); var args = event.args; var datainformation = $('#grid').jqxGrid('getdatainformation'); var data = $('#grid').jqxGrid('getrowdatabyid', args.rowindex); $.get("connect.php", { update: true, upBox: event.args.datafield, upBoxValue: $("#grid").jqxGrid('getcellvalue', args.rowindex, args.datafield), trans_id: data.trans_id }); $('#grid').jqxGrid('endupdate'); }); }); var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) { if (value === "LUX") { return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #0000ff;">' + value + '</span>'; } else { return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>'; } } var dataAdapter = new $.jqx.dataAdapter(source); $("#grid").jqxGrid( { autoshowloadelement: false, width: 1320, autoheight: true, editable: true, source: dataAdapter, filterable: true, filtermode: 'excel', columnsresize: true, sortable: true, pageable: true, autoshowfiltericon: false, pagesize: 20, pagesizeoptions: ['20', '50', '100'], ready: function() {updateTable();}, columns: [ { text: 'Transaction ID', datafield: 'trans_id', width: 100, editable: false, hidden: true}, { text: 'Date Ordered', datafield: 'DateOrdered', width: 100, editable: false }, { text: 'Buyer', datafield: 'Buyer', width: 200, editable: false }, { text: '1 Of', datafield: 'OneOf', width: 50, editable: false }, { text: 'Design', datafield: 'Design', width: 180, editable: false }, { text: 'Size', datafield: 'Size', width: 50, editable: false }, { text: 'Model', datafield: 'Model', width: 140, editable: false, cellsrenderer: cellrenderer }, { text: 'ShipBy', datafield: 'ShipBy', width: 100, editable: false }, { text: 'Sticky Note', columntype: 'checkbox', datafield: 'sticky_note', width: 100 }, { text: 'Cut', columntype: 'checkbox', datafield: 'wrap_cut', width: 100 }, { text: 'Magnet', columntype: 'checkbox', datafield: 'magnet_applied', width: 100 }, { text: 'Boxed', columntype: 'checkbox', datafield: 'boxed', width: 100 }, { text: 'Shipped', columntype: 'checkbox', datafield: 'was_shipped', width: 100 } ] }); function updateTable() { // Todo: Clean up we don't need all these VARS var datainformation = $('#grid').jqxGrid('getdatainformation'); var rowscount = datainformation.rowscount; var sortinformation = datainformation.sortinformation; var sortcolumn = sortinformation.sortcolumn; var sortdirection = sortinformation.sortdirection; var paginginformation = datainformation.paginginformation; var pagenum = paginginformation.pagenum; var pagesize = paginginformation.pagesize; var pagescount = paginginformation.pagescount; var data = $('#grid').jqxGrid('getrowdata', args.rowindex); $('#grid').jqxGrid('beginupdate', true); $('#grid').jqxGrid('updatebounddata', 'data'); $('#grid').jqxGrid('gotopage', pagenum); $('#grid').jqxGrid('endupdate'); setTimeout(updateTable, 5000); }; }); </script> </head> <body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="grid"></div> </div> <div id="log"></div> </body> </html>Edit: based on the advice in another post I made, I have removed “setTimeout(updateTable,5000);” from my function updateTable and placed
setInterval(updateTable, 5000);inside a$("#grid").on("bindingcomplete", function (event) {area, however I see seeing the issue with my checkboxes disappearing. -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.