jQWidgets Forums
Forum Replies Created
-
Author
-
October 23, 2019 at 1:00 pm in reply to: jqxGrid date not displaying properly in grid until cell is clicked jqxGrid date not displaying properly in grid until cell is clicked #107112
Solved my formatting issues, no need for assistance. I had screwed up my datafield by making spec’ing my date field as a datetime field
{ name: 'ACOutServiceDate', type: 'datetime' },should have been{ name: 'ACOutServiceDate', type: 'date' },September 20, 2017 at 7:19 pm in reply to: Colors not printing in grid Colors not printing in grid #96191To fix the printing of background colors, I had to add “!important” after each color that I set using the renderer code. Please see my code sample below. Without “!important” colors would not appear in print preview or on the printer output.
var Statusrenderer = function (row, column, value) {
if (value == “OK”) {
OTS = false;
return ‘<div style=”font-weight: bold; font-size: 24px;background-color: green!important;text-align:center;”>’ + value + ‘</div>’;
}
else if (value == “OK-“) {
OTS = false;
return ‘<div style=”font-weight: bold; font-size: 24px;background-color: yellow!important;text-align:center;”>’ + value + ‘</div>’;
}
else if (value == “OTS”) {
OTS = true;
return ‘<div style=”font-weight: bold; font-size: 24px;background-color: red!important;text-align:center;”>’ + value + ‘</div>’;
}September 20, 2017 at 6:35 pm in reply to: Colors not printing in grid Colors not printing in grid #96190Actually, it is related to the CSS of the grid. Even when “print background colors” in the Print Dialog is selected, the colors aren’t being displayed or printed. I guess I’ll have to solve this on my own and share my solution.
March 30, 2017 at 5:12 pm in reply to: Checkbox format disappears, displays true false Checkbox format disappears, displays true false #92585Hristo,
Thank you so much! That fixed it for me!
March 29, 2017 at 4:16 pm in reply to: Checkbox format disappears, displays true false Checkbox format disappears, displays true false #92569So no one can tell me why my checkbox formatting is disappearing? I took more than an hour to get my code up and running on Fiddler to make it easy for anyone to see what is happening in my grid.
March 28, 2017 at 3:41 pm in reply to: Checkbox format disappears, displays true false Checkbox format disappears, displays true false #92540March 28, 2017 at 3:41 pm in reply to: Checkbox format disappears, displays true false Checkbox format disappears, displays true false #92539I put my project on Fiddle: Fiddle Project
You’ll see that when you click around the grid, the checkboxes change to “true/false” text.
March 27, 2017 at 11:33 pm in reply to: Checkbox format disappears, displays true false Checkbox format disappears, displays true false #92514Below is the code for my grid. I emulated my SQL data with an array.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.energyblue.css" type="text/css" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.grouping.js"></script> <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript"> $(document).ready(function () { var dateFormat = "MM/dd/yyyy"; //Getting the source data with ajax GET request var source = { localdata: [ [201, null, "OK", null, 0, 0, null, "oh, you changed it", null, null, null, null, null, null], [202, null, "OK", null, 0, 0, null, "oh, you changed it.", null, null, null, "In Work", null, null], [203, null, "OK", null, 0, 0, null, "oh, you changed it.", null, null, null, null, null, null], [204, null, "OK", null, 0, 0, null, "oh, you changed it.", null, null, null, null, null, null], [205, null, "OK", null, 0, 0, null, null, null, null, null, null, null, null], [206, null, "OK", null, 0, 0, null, null, null, null, null, null, null, null] ], datafields: [ { name: 'AircraftID', type: 'int', map: '0' }, { name: 'AircraftSerialNo', type: 'string', map: '1' }, { name: 'AircraftStatus', type: 'string', map: '2' }, { name: 'ACOutServiceDate', type: 'date', map: '3' }, { name: 'Affects_Mission_Impact', type: 'bool', map: '4' }, { name: 'Not_in_Custody', type: 'bool', map: '5' }, { name: 'ACInServiceDate', type: 'date', map: '6' }, { name: 'Description', type: 'string', map: '7' }, { name: 'Parts', type: 'string', map: '8' }, { name: 'OriginalDiscrepancyDate', type: 'date', map: '9' }, { name: 'ExpectedCompleteDate', type: 'date', map: '10' }, { name: 'MaintenanceStatus', type: 'string', map: '11' }, { name: 'DateModified', type: 'date', map: '12' }, { name: 'UserModified', type: 'string', map: '13' } ], datatype: "array" }; var dataAdapter = new $.jqx.dataAdapter(source); var cellrenderer = function (row, column, value) { return '<div style="text-align:center;v-align:middle;">' + value + '</div>'; }; var Commentrenderer = function (row, column, value) { return '<div style="text-align:left;font-size:10px;">' + value + '</div>'; }; var Statusrenderer = function (row, column, value) { if (value == "OK") { return '<div style="background-color: green;text-align:center;font-size:14px;">' + value + '</div>'; } else if (value == "OK-") { return '<div style="background-color: yellow;text-align:center;font-size:14px;">' + value + '</div>'; } else if (value == "OTS") { return '<div style="background-color: red;text-align:center;font-size:14px;">' + value + '</div>'; } }; $("#jqxgrid").jqxGrid({ width: 1120, theme: 'energyblue', editable: true, autorowheight: true, autoheight: true, columnsheight: 80, source: dataAdapter, columns: [ { text: 'ID', align: 'center', dataField: 'AircraftID', width: 40,cellsrenderer: cellrenderer }, { text: 'Status', align: 'center', dataField: 'AircraftStatus', columntype: 'dropdownlist', width: 70, cellsrenderer: Statusrenderer, createeditor: function (row, cellvalue, editor) { editor.jqxDropDownList({ source: ["OK","OK-","OTS"] }); } }, { text: 'Out of<br/>Service<br/>Date', align: 'center', dataField: 'ACOutServiceDate', columntype: 'datetimeinput', width: 90, cellsformat: 'd' }, { text: 'Affects<br/> Mission', align: 'center', dataField: 'Affects_Mission_Impact', columntype: 'checkbox', width: 70, cellsrenderer: cellrenderer }, { text: 'Not In<br/> Custody', align: 'center', dataField: 'Not_in_Custody', columntype: 'checkbox', width: 70, cellsrenderer: cellrenderer }, { text: 'In Service<br/>Date', align: 'center', dataField: 'ACInServiceDate', columntype: 'datetimeinput', width: 90, cellsformat: 'd' }, { text: 'Description', align: 'center', dataField: 'Description', width: 190, cellsrenderer: Commentrenderer }, { text: 'Parts', align: 'center', dataField: 'Parts', width: 150, cellsrenderer: Commentrenderer }, { text: 'Original<br/>Discrepancy<br/>Date', align: 'center', dataField: 'OriginalDiscrepancyDate', columntype: 'datetimeinput', width: 90, cellsformat: 'd' }, { text: 'Expected<br/>Complete<br/>Date', align: 'center', dataField: 'ExpectedCompleteDate', columntype: 'datetimeinput', width: 90, cellsformat: 'd' }, { text: 'Maintenance<br/>Status', align: 'center', dataField: 'MaintenanceStatus', columntype: 'dropdownlist', width: 170, createeditor: function (row, cellvalue, editor) { editor.jqxDropDownList({ source: ["","Troubleshooting", "In Work", "Parts on Order", "Closed","Parts Requested","Parts in Stock","Parts Received","Awaiting Inspection"] }); } } ] }); }); </script> </head> <body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"></div> </div> </body> </html>March 27, 2017 at 10:09 pm in reply to: Checkbox format disappears, displays true false Checkbox format disappears, displays true false #92513Do I need to host it somewhere or just provide the code for my grid? I’m not sure how to host my page as it has a sql back-end.
Text wrapping is not applying to headers. I have autorowheight and autoheight enabled.
March 21, 2017 at 7:35 pm in reply to: jqGrid updaterow failing for dates jqGrid updaterow failing for dates #92362March 21, 2017 at 7:16 pm in reply to: How to pass formatted date to the server How to pass formatted date to the server #92361Marc, THANK YOU SOOOOOO MUCH for sharing your code for the date format parsing. I have been pulling my hair out trying to solve this problem in my code. I’m attempting an update using the Entity Framework and have three datetime fields that were failing.
Thank you! Thank you! Thank you! And, thank god that developers love to help each other out!
March 20, 2017 at 3:32 pm in reply to: JQXGrid not refreshing to show new data JQXGrid not refreshing to show new data #92332Thanks Peter. I’ll give that a try. In the interim, I just called grid.destroy and added a function to reconstruct the grid.
March 16, 2017 at 3:40 pm in reply to: JQXGrid not refreshing to show new data JQXGrid not refreshing to show new data #92286Hristo,
There is no error message. In my refresh function, my “get” call makes it to the server.$.get(“GetAvailabilitySP2”, { Id1: $(“#datepicker1”).val() , Id2: $(“#datepicker2”).val() });
After that, I call jqxgrid.updatebounddata:
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘cells’);When that call reaches the server, it’s using the old value for Id2. Is there a different jqxgrid method I should be using?
-
AuthorPosts