jQWidgets Forums

This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 11 years, 4 months ago.

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

Author

checkbox working in a previous position after reordering it Posts

February 15, 2014 at 5:12 am checkbox working in a previous position after reordering it #49555

Participant

Hi,
I have a issue on checkbox in jqxGrid with ‘columnsreorder’ function.
I want to move my checkbox columns by using ‘columnsreorder’ property,
however when I click the checkbox after reordering it, it is checked on the previous column.
My process is like this,
1. move ‘5th col’ in front of ‘4th col’
2. uncheck ‘5th col’
3. you can find ‘4th col’ unchecked. (This is weird part)

Please check the code below,

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel='stylesheet' href='../../style/jQWidgets/3.2.1/jqx.base.css'/>
    <script type='text/javascript' src='../../lib/jquery/jquery-1.10.2.js'></script>
    <script type='text/javascript' src='../../lib/jQWidgets/3.2.1/all/jqx-all.js'></script>
    <script type='text/javascript'>
        var ENV = {
            ID_JQXMAINGRID: '#mainGrid'
        }

        var mainView = {
            initGrid: function () {
                var dataAdapter = new $.jqx.dataAdapter(this._loadGridData());

                $(ENV.ID_JQXMAINGRID).jqxGrid({
                            width: 800,
                            height: 150,
                            columnsresize: true,
                            columnsreorder: true,
                            editable: true,
                            source: dataAdapter,
                            columns: [
                                { text: '1st Column', datafield: '1stCol', columntype: 'checkbox'},
                                { text: '2nd Column', datafield: '2ndCol', columngroup: 'ProductDetails', columntype: 'checkbox'},
                                { text: '3rd Column', datafield: '3rdCol', columngroup: 'ProductDetails', columntype: 'checkbox'},
                                { text: '4th Column', datafield: '4thCol', columngroup: 'OrderDetails', columntype: 'checkbox'},
                                { text: '5th Column', datafield: '5thCol', columngroup: 'OrderDetails', columntype: 'checkbox'},
                                { text: '6th Column', datafield: '6thCol', columngroup: 'OrderDetails', columntype: 'checkbox'},
                                { text: '7th Column', datafield: '7thCol', columngroup: 'Location', columntype: 'checkbox'},
                                { text: '8th Column', datafield: '8thCol', columngroup: 'Location', columntype: 'checkbox'}
                            ],
                            columngroups: [
                                { text: 'Product Details', align: 'center', name: 'ProductDetails' },
                                { text: 'Order Details', parentgroup: 'ProductDetails', align: 'center', name: 'OrderDetails' },
                                { text: 'Location', align: 'center', name: 'Location' }
                            ]
                        }
                );
            },

            _loadGridData: function () {
                var data = [
                    {
                        "1stCol": true,
                        "2ndCol": true,
                        "3rdCol": true,
                        "4thCol": true,
                        "5thCol": true,
                        "6thCol": true,
                        "7thCol": true,
                        "8thCol": true
                    }
                ];

                var source = {
                    datatype: 'json',
                    datafields: [
                        { name: '1stCol' },
                        { name: '2ndCol' },
                        { name: '3rdCol' },
                        { name: '4thCol' },
                        { name: '5thCol' },
                        { name: '6thCol' },
                        { name: '7thCol' },
                        { name: '8thCol' }
                    ],
                    localdata: data
                }
                return source;
            }
        }

        
        $(document).ready(function () {
            mainView.initGrid();
        });
    </script>
</head>
<body>
<div id='mainGrid'></div>
</body>
</html>

February 15, 2014 at 9:07 am checkbox working in a previous position after reordering it #49568

Peter Stoev

Keymaster

Hi klien54,

Thanks for the feedback. As a workaround you can call the “render” method after reorder.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this example, the columns resizing feature is enabled. The resizing of the 'Total' column is disabled by 
    setting the 'resizable' property to false.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsreorder.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
            var ENV = {
                ID_JQXMAINGRID: '#mainGrid'
            }

            var mainView = {
                initGrid: function () {
                    var dataAdapter = new $.jqx.dataAdapter(this._loadGridData());
                    $(ENV.ID_JQXMAINGRID).on('columnreordered', function () {
                        $(ENV.ID_JQXMAINGRID).jqxGrid('render');
                    });

                    $(ENV.ID_JQXMAINGRID).jqxGrid({
                        width: 800,
                        height: 150,
                        columnsresize: true,
                        columnsreorder: true,
                        editable: true,
                        source: dataAdapter,
                        columns: [
                            { text: '1st Column', datafield: '1stCol', columntype: 'checkbox'},
                            { text: '2nd Column', datafield: '2ndCol', columngroup: 'ProductDetails', columntype: 'checkbox'},
                            { text: '3rd Column', datafield: '3rdCol', columngroup: 'ProductDetails', columntype: 'checkbox'},
                            { text: '4th Column', datafield: '4thCol', columngroup: 'OrderDetails', columntype: 'checkbox'},
                            { text: '5th Column', datafield: '5thCol', columngroup: 'OrderDetails', columntype: 'checkbox'},
                            { text: '6th Column', datafield: '6thCol', columngroup: 'OrderDetails', columntype: 'checkbox'},
                            { text: '7th Column', datafield: '7thCol', columngroup: 'Location', columntype: 'checkbox'},
                            { text: '8th Column', datafield: '8thCol', columngroup: 'Location', columntype: 'checkbox'}
                        ],
                        columngroups: [
                            { text: 'Product Details', align: 'center', name: 'ProductDetails' },
                            { text: 'Order Details', parentgroup: 'ProductDetails', align: 'center', name: 'OrderDetails' },
                            { text: 'Location', align: 'center', name: 'Location' }
                        ]
                    }
                    );
                },

                _loadGridData: function () {
                    var data = [
                        {
                            "1stCol": true,
                            "2ndCol": true,
                            "3rdCol": true,
                            "4thCol": true,
                            "5thCol": true,
                            "6thCol": true,
                            "7thCol": true,
                            "8thCol": true
                        }
                    ];

                    var source = {
                        datatype: 'json',
                        datafields: [
                            { name: '1stCol' },
                            { name: '2ndCol' },
                            { name: '3rdCol' },
                            { name: '4thCol' },
                            { name: '5thCol' },
                            { name: '6thCol' },
                            { name: '7thCol' },
                            { name: '8thCol' }
                        ],
                        localdata: data
                    }
                    return source;
                }
            }

        
            $(document).ready(function () {
                mainView.initGrid();
            });
    </script>
</head>
<body>
<div id='mainGrid'></div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

Author

Posts

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

You must be logged in to reply to this topic.