Strange behavior of checkbox column - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: checkbox column, datagrid checkbox column

This topic contains 11 replies, has 3 voices, and was last updated by bart 12 years, 5 months ago.

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

Author

Strange behavior of checkbox column Posts

September 11, 2012 at 8:41 pm Strange behavior of checkbox column #7709

bart

Member

After I upgraded jqx to 2.4.1 I’ve noticed strange behavior of checkbox column in grid loaded by json.
In old (2.3.1) version after load grid all checkboxes were shown fine (false were unchecked, true were checked)… In new (2.4.1) version load grid shows all checkboxes checked, and I have to force reload data-adapter to show checkboxes properly.

The behavior causes also disfunctionality of filtering by checkboxes – filter doesn’t recognise status of checkboxes.

September 11, 2012 at 8:51 pm Strange behavior of checkbox column #7713

jose Ivan

Member

That’s true !! this behavior comes from 2.4.0. I got something similar… when i clear seleccion all my checkbox change state to check. i think that checkbox.js change the logic internal.

September 12, 2012 at 12:56 am Strange behavior of checkbox column #7724

Peter Stoev

Keymaster

Please, provide a sample which reproduces the reported behavior. In addition, make sure that when you create the source object and define the datafields array you set the ‘type’ property to ‘bool’ of the boolean data fields. Example: defaultfunctionality.htm.

Code snippet:

         var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName' },
                    { name: 'QuantityPerUnit' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };

Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 12, 2012 at 10:23 am Strange behavior of checkbox column #7773

bart

Member

Hi Peter,

datafields definition as bool helped (checkbox rendering is fine now), however filter row still doesn’t work as I would expect:
TypeError: s.filter.getfilters()[0] is undefined
for checkbox filter
and
TypeError: x is null
for NIP column filter (see code below)

var sWidth = $(window).width()-40;
var url = "ajax/companies_functions.php?f_case=1";
var getAdapter = function() {
var source =
{
datatype: "json",
datafields: [
{ name: 'ID' },
{ name: 'Name' },
{ name: 'Street' },
{ name: 'City' },
{ name: 'NIP' },
{ name: 'Recipient', type: 'bool' },
{ name: 'Supplier', type: 'bool' }
],
id: 'id',
url: url,
root: 'data'
};
var dataAdapter = new $.jqx.dataAdapter(source);
return dataAdapter;
}
$("#companies").jqxGrid({
width: sWidth,
source: getAdapter(),
theme: theme,
sortable: true,
columnsresize: true,
showstatusbar: true,
filterable: true,
showfilterrow: true,
autoshowfiltericon: true,
ready: function () {
$("#companies").jqxGrid('hidecolumn', 'ID');
},
columns: [
{ text: 'ID', datafield: 'ID', columntype: 'textbox', width: sWidth*0.05 },
{ text: 'Company name', datafield: 'Name', columntype: 'textbox', width: sWidth*0.4 },
{ text: 'Address', datafield: 'Street', columntype: 'textbox', width: sWidth*0.3 },
{ text: 'City', datafield: 'City', columntype: 'textbox', width: sWidth*0.15 },
{ text: 'VAT number', datafield: 'NIP', columntype: 'textbox', width: sWidth*0.08, cellsalign: 'center' },
{ text: 'Rec', datafield: 'Recipient', type: 'bool', columntype: 'checkbox', filtertype: 'bool', width: sWidth*0.029 },
{ text: 'Sup', datafield: 'Supplier', type: 'bool', columntype: 'checkbox', filtertype: 'bool', width: sWidth*0.029 }
]
});
$("#companies").bind('bindingcomplete', function () { localiseGrid("companies"); });

September 12, 2012 at 12:49 pm Strange behavior of checkbox column #7784

Peter Stoev

Keymaster

Hi bart,

I wanted to update you that we released jQWidgets 2.4.2 and there’s a fix about the checkbox column when the data source is “json” i.e the values are set to “true” and “false” instead of true and false.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 12, 2012 at 1:01 pm Strange behavior of checkbox column #7788

bart

Member

Hi Peter,

The checkbox column is fine now.
Unfortunatelly, the strange TypeError: x is null error still exists. Do you have any ide what can be the reason?

September 12, 2012 at 1:08 pm Strange behavior of checkbox column #7789

Peter Stoev

Keymaster

Hi bart,

I am afraid that I can’t reproduce that.

Here’s my code based on the provided by you:

<!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.8.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.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.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="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var sWidth = $(window).width() - 40;
            var getAdapter = function () {
                var localdata = [{ "ID": "1", "Name": "1", "Street": "1", "City": "1", "NIP": "1", "Recipient": "true", "Supplier": "false"}];
                var source =
                {
                    datatype: "json",
                    localdata: localdata,
                    datafields: [
                        { name: 'ID' },
                        { name: 'Name' },
                        { name: 'Street' },
                        { name: 'City' },
                        { name: 'NIP' },
                        { name: 'Recipient', type: 'bool' },
                        { name: 'Supplier', type: 'bool' }
                    ],
                    id: 'id',
                    root: 'data'
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                return dataAdapter;
            }
            $("#companies").jqxGrid({
                width: sWidth,
                source: getAdapter(),
                theme: theme,
                sortable: true,
                columnsresize: true,
                showstatusbar: true,
                filterable: true,
                showfilterrow: true,
                autoshowfiltericon: true,
                ready: function () {
                    $("#companies").jqxGrid('hidecolumn', 'ID');
                },
                columns: [
                { text: 'ID', datafield: 'ID', columntype: 'textbox', width: sWidth * 0.05 },
                { text: 'Company name', datafield: 'Name', columntype: 'textbox', width: sWidth * 0.4 },
                { text: 'Address', datafield: 'Street', columntype: 'textbox', width: sWidth * 0.3 },
                { text: 'City', datafield: 'City', columntype: 'textbox', width: sWidth * 0.15 },
                { text: 'VAT number', datafield: 'NIP', columntype: 'textbox', width: sWidth * 0.08, cellsalign: 'center' },
                { text: 'Rec', datafield: 'Recipient', type: 'bool', columntype: 'checkbox', filtertype: 'bool', width: sWidth * 0.029 },
                { text: 'Sup', datafield: 'Supplier', type: 'bool', columntype: 'checkbox', filtertype: 'bool', width: sWidth * 0.029 }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="companies">
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 12, 2012 at 1:30 pm Strange behavior of checkbox column #7792

bart

Member

Hi Peter,

The problem is that in your code all works fine, but if you change localdata to external url then error occurs.
The very strange for me is that the grid contains 4 text columns with 4 text filters; 3 works fine and only the 4th generates error.

September 12, 2012 at 1:47 pm Strange behavior of checkbox column #7793

Peter Stoev

Keymaster

Ok, moved it to external file and still can’t reproduce. What should I write in the filter or what should I do to reproduce that?

<!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.8.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.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.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="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var sWidth = $(window).width() - 40;
            var getAdapter = function () {
                var localdata = [{ "ID": "1", "Name": "1", "Street": "1", "City": "1", "NIP": "1", "Recipient": "true", "Supplier": "false"}];
                var source =
                {
                    datatype: "json",
                    url: "../sampledata/test_json.txt",
                 //   localdata: localdata,
                    datafields: [
                        { name: 'ID' },
                        { name: 'Name' },
                        { name: 'Street' },
                        { name: 'City' },
                        { name: 'NIP' },
                        { name: 'Recipient', type: 'bool' },
                        { name: 'Supplier', type: 'bool' }
                    ],
                    id: 'id',
                    root: 'data'
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                return dataAdapter;
            }
            $("#companies").jqxGrid({
                width: sWidth,
                source: getAdapter(),
                theme: theme,
                sortable: true,
                columnsresize: true,
                showstatusbar: true,
                filterable: true,
                showfilterrow: true,
                autoshowfiltericon: true,
                ready: function () {
                    $("#companies").jqxGrid('hidecolumn', 'ID');
                },
                columns: [
                { text: 'ID', datafield: 'ID', columntype: 'textbox', width: sWidth * 0.05 },
                { text: 'Company name', datafield: 'Name', columntype: 'textbox', width: sWidth * 0.4 },
                { text: 'Address', datafield: 'Street', columntype: 'textbox', width: sWidth * 0.3 },
                { text: 'City', datafield: 'City', columntype: 'textbox', width: sWidth * 0.15 },
                { text: 'VAT number', datafield: 'NIP', columntype: 'textbox', width: sWidth * 0.08, cellsalign: 'center' },
                { text: 'Rec', datafield: 'Recipient', type: 'bool', columntype: 'checkbox', filtertype: 'bool', width: sWidth * 0.029 },
                { text: 'Sup', datafield: 'Supplier', type: 'bool', columntype: 'checkbox', filtertype: 'bool', width: sWidth * 0.029 }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="companies">
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 12, 2012 at 2:03 pm Strange behavior of checkbox column #7795

bart

Member

Ok, I think, I found a problem…
…depends on data I am trying to display.

NIP value sometimes can be written with and sometimes without sign “-“, eg. “8791312383”, or “879-131-23-83”.
What is strange, until json file contains no strings with “-” signs, everything seems to work. As soon as I insert at least 1 string with “-” sign, JS error occurs.

September 12, 2012 at 2:12 pm Strange behavior of checkbox column #7800

Peter Stoev

Keymaster

Hi bart,

You should set the ‘type’ of that data field to ‘string’ then. If it is auto-recognized as a number type, the Grid will try to format/filter it as a number. Setting the ‘type’ to ‘string’ should resolve it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 12, 2012 at 6:45 pm Strange behavior of checkbox column #7836

bart

Member

Hi Peter,

Now it works perfect – thanks for your help.

Author

Posts

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

You must be logged in to reply to this topic.