jQWidgets Forums

Tagged: #jqwidgets-grid, grid, javascript grid, jquery grid

This topic contains 8 replies, has 2 voices, and was last updated by ydb1md 8 years, 3 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Checkbox format disappears, displays true false Posts

March 24, 2017 at 3:22 pm Checkbox format disappears, displays true false #92459

ydb1md

Participant

I’ve got checkboxes in one column of my grid. At random times when I click cells in the grid, the checkbox disappears and a “true” or “false” is displayed. My rowheight is set to auto. The other controls in my grid are datetimeinput and dropdownlist. There are no javascript errors on my page.

March 27, 2017 at 12:27 pm Checkbox format disappears, displays true false #92498

Hristo

Participant

Hello ydb1md,

I tested it and it seems to work fine.
Could you provide us an example that demonstrates this?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

March 27, 2017 at 10:09 pm Checkbox format disappears, displays true false #92513

ydb1md

Participant

Do 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.

March 27, 2017 at 11:33 pm Checkbox format disappears, displays true false #92514

ydb1md

Participant

Below 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 28, 2017 at 3:41 pm Checkbox format disappears, displays true false #92539

ydb1md

Participant

I 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 28, 2017 at 3:41 pm Checkbox format disappears, displays true false #92540

ydb1md

Participant

Fiddle Project

March 29, 2017 at 4:16 pm Checkbox format disappears, displays true false #92569

ydb1md

Participant

So 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 30, 2017 at 10:16 am Checkbox format disappears, displays true false #92578

Hristo

Participant

Hello ydb1md,

Thank you for this example.
This case where you use “cellsrenderer” for checkbox column is incorrect.
If you would like to set some style you could use cellclassname and then you could easy do style manipulations over it.
If this does not help please give more information what you want to achieve.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

March 30, 2017 at 5:12 pm Checkbox format disappears, displays true false #92585

ydb1md

Participant

Hristo,
Thank you so much! That fixed it for me!

Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.