jQWidgets Forums

Tagged: checkbox, grid, horizontal scrollbar, jqxgrid, scroll, select all

This topic contains 13 replies, has 3 voices, and was last updated by Dimitar 9 years, 10 months ago.

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

Author

horizontal scroll bar Posts
June 27, 2015 at 2:45 pm horizontal scroll bar #73105

Rajesh
Participant

its very urgent,
we have used rendered for check all with single selection mode its working very nice but we have facing problem when we scroll horizontal scroll bar and click on header all check box header position change mismatch header

June 29, 2015 at 5:36 am horizontal scroll bar #73115

Dimitar
Participant

Hello Rajesh,

You can use the built-in selectionmode: 'checkbox' (demo). If it is not suitable for you, please provide us with a JSFiddle/JS Editor example demonstrating your issue.

Best Regards,
Dimitar

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

June 30, 2015 at 5:23 pm horizontal scroll bar #73206

Rajesh
Participant

HI Dimitar,

Thanks for reply ,
actually its some how difficult to provide sample on JSFiddle/JS Editor and also we must need selection mode as single row because we have requirement as need check box and single row selection both
is there any way to find out which event fire when scroll grid so we can refresh grid when scroll grid
because after scroll if i refresh grid its working fine

June 30, 2015 at 6:21 pm horizontal scroll bar #73207

dork
Participant

Rajesh,

I had the exact same issue. What I did was whenever a page was changed, or I needed to refresh, I used $(‘#jqxgrid’).jqxGrid(‘refreshdata’).

The only issue is that it does slow things down a bit but at least your column names don’t go whacky on you.

Hope this helps.

July 1, 2015 at 7:05 am horizontal scroll bar #73223

Dimitar
Participant

Hi Rajesh,

Please make sure you are using the latest version of jQWidgets (3.8.1). There was a column header-related issue that was fixed in this version.

Best Regards,
Dimitar

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

July 1, 2015 at 7:19 am horizontal scroll bar #73226

Rajesh
Participant

ok i will use latest version of jQWidgets (3.8.1) So my query is that can also need use latest css because i was done some changes in css as per our requirement, so i don’t want to replace its with new css version

July 1, 2015 at 7:51 am horizontal scroll bar #73230

Rajesh
Participant

hi Dimitar

Thanks

is works for me but have one new issue with new release
When i check checkbox for all check in header all row display as check then when i m going to uncheck first row not able to uncheck means nothing happened any thing but when i uncheck second row its working and then first row also working fine so what exact happen or how can i solve this we r used cellbeginedit function for data row edit check boxes. i think cellbeginedit not trigger when i trying to uncheck first row after check header checkbox

thanks for any valuable help please reply its urgent

July 2, 2015 at 5:06 am horizontal scroll bar #73267

Dimitar
Participant

Hi Rajesh,

We do not know what causes the issue. Please provide us with the relevant parts of your code and remember to format it by selecting it and clicking the code button in the toolbar.

Best Regards,
Dimitar

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

July 2, 2015 at 5:16 pm horizontal scroll bar #73306

Rajesh
Participant

Hi Dimitar

Here is sample code which you are provide on web here also have same issue with new release but this same code work with earlier release (3.8.0)
so i think this issue come with new release please help us

Note:-issue is when check on header check box first row not click-able but when click on second row then first row also click-able

<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=”Description”>Custom Rows Selection</title>
<link rel=”stylesheet” href=”js/plugin/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”js/plugin/jquery-2.1.4.min.js”></script>
<script type=”text/javascript” src=”js/plugin/jqwidgets/jqwidgets/jqx-all.js”></script>
<script type=”text/javascript” src=”generatedata.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {

// prepare the data
var data = preparegriddata(200);

var source =
{
localdata: data,
datatype: “array”,
datafields:
[
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘available’, type: ‘bool’ },
{ name: ‘quantity’, type: ‘number’ }
],

};

var dataAdapter = new $.jqx.dataAdapter(source);
var columnCheckBox = null;
var updatingCheckState = false;

// initialize jqxGrid. Disable the built-in selection.
$(“#jqxgrid”).jqxGrid(
{
source: dataAdapter,
editable: true,

enablehover: false,
selectionmode: ‘none’,
pageable: true,
sortable: true,
autoheight: true,
columns: [
{
text: ”, menu: false, sortable: false, editable: true,
datafield: ‘available’, columntype: ‘checkbox’, width: 40,
renderer: function () {
return ‘<div style=”margin-left: 10px; margin-top: 5px;”></div>’;
},
rendered: function (element) {
$(element).jqxCheckBox({ width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
columnCheckBox = $(element);
$(element).on(‘change’, function (event) {
var checked = event.args.checked;
var pageinfo = $(“#jqxgrid”).jqxGrid(‘getpaginginformation’);
var pagenum = pageinfo.pagenum;
var pagesize = pageinfo.pagesize;
if (checked == null || updatingCheckState) return;
$(“#jqxgrid”).jqxGrid(‘beginupdate’);

// select all rows when the column’s checkbox is checked.

// update cells values.
var startrow = pagenum * pagesize;
for (var i = startrow; i < startrow + pagesize; i++) {
// The bound index represents the row’s unique index.
// Ex: If you have rows A, B and C with bound indexes 0, 1 and 2, afer sorting, the Grid will display C, B, A i.e the C’s bound index will be 2, but its visible index will be 0.
// The code below gets the bound index of the displayed row and updates the value of the row’s available column.
var boundindex = $(“#jqxgrid”).jqxGrid(‘getrowboundindex’, i);
$(“#jqxgrid”).jqxGrid(‘setcellvalue’, boundindex, ‘available’, event.args.checked);
}

$(“#jqxgrid”).jqxGrid(‘endupdate’);
});
return true;
}
},
{ text: ‘First Name’, editable: false, datafield: ‘firstname’, width: 90 },
{ text: ‘Last Name’, editable: false, datafield: ‘lastname’, width: 90 },
{ text: ‘Product’, editable: false, datafield: ‘productname’, width: 200 },
{ text: ‘Quantity’, editable: false, datafield: ‘quantity’ }
]
});

// select or unselect rows when a checkbox is checked or unchecked.
$(“#jqxgrid”).on(‘cellvaluechanged’, function (event) {

// update the state of the column’s checkbox. When all checkboxes on the displayed page are checked, we need to check column’s checkbox. We uncheck it,
// when there are no checked checkboxes on the page and set it to intederminate state when there is at least one checkbox checked on the page.
if (columnCheckBox) {
var datainfo = $(“#jqxgrid”).jqxGrid(‘getdatainformation’);
var pagesize = datainfo.paginginformation.pagesize;
var pagenum = datainfo.paginginformation.pagenum;
var selectedRows = $(“#jqxgrid”).jqxGrid(‘getselectedrowindexes’);
var state = false;
var count = 0;
$.each(selectedRows, function () {
if (pagenum * pagesize <= this && this < pagenum * pagesize + pagesize) {
count++;
}
});

if (count != 0) state = null;
if (count == pagesize) state = true;
if (count == 0) state = false;

updatingCheckState = true;
$(columnCheckBox).jqxCheckBox({ checked: state });

updatingCheckState = false;
}
});
});

function preparegriddata(rowscount) {
// prepare the data
var data = new Array();
var firstNames =
[
“Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”
];

var lastNames =
[
“Fuller”, “Davolio”, “Burke”, “Murphy”, “Nagase”, “Saavedra”, “Ohno”, “Devling”, “Wilson”, “Peterson”, “Winkler”, “Bein”, “Petersen”, “Rossi”, “Vileid”, “Saylor”, “Bjorn”, “Nodier”
];

var productNames =
[
“Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”, “Caffe Latte”, “White Chocolate Mocha”, “Caramel Latte”, “Caffe Americano”, “Cappuccino”, “Espresso Truffle”, “Espresso con Panna”, “Peppermint Mocha Twist”
];

for (var i = 0; i < rowscount; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var quantity = 1 + Math.round(Math.random() * 10);

row[“available”] = false;
row[“firstname”] = firstNames[Math.floor(Math.random() * firstNames.length)];
row[“lastname”] = lastNames[Math.floor(Math.random() * lastNames.length)];
row[“productname”] = productNames[productindex];
row[“quantity”] = quantity;
data[i] = row;
}

return data;
}
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=”jqxgrid”></div>
</div>
</body>
</html>

July 3, 2015 at 7:59 am horizontal scroll bar #73323
Dimitar
Participant
Hi Rajesh,

I think this issue can be fixed if you call render after endupdate:
```
$(element).on('change', function (event) {
    var checked = event.args.checked;
    var pageinfo = $("#jqxgrid").jqxGrid('getpaginginformation');
    var pagenum = pageinfo.pagenum;
    var pagesize = pageinfo.pagesize;
    if (checked == null || updatingCheckState) return;
    $("#jqxgrid").jqxGrid('beginupdate');

    // select all rows when the column's checkbox is checked.

    // update cells values.
    var startrow = pagenum * pagesize;
    for (var i = startrow; i < startrow + pagesize; i++) {
        // The bound index represents the row's unique index.
        // Ex: If you have rows A, B and C with bound indexes 0, 1 and 2, afer sorting, the Grid will display C, B, A i.e the C's bound index will be 2, but its visible index will be 0.
        // The code below gets the bound index of the displayed row and updates the value of the row's available column.
        var boundindex = $("#jqxgrid").jqxGrid('getrowboundindex', i);
        $("#jqxgrid").jqxGrid('setcellvalue', boundindex, 'available', event.args.checked);
    }

    $("#jqxgrid").jqxGrid('endupdate');
    $("#jqxgrid").jqxGrid('render');
});
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
July 3, 2015 at 9:19 am horizontal scroll bar #73327

Rajesh
Participant

Hi Dimitar,

if i used this then check and uncheck not happened when i click on header check box
observation when first time i check on header check box then all check box are showing check but after that if i uncheck header check box nothing happened all selected check boxes remain same

July 6, 2015 at 5:57 am horizontal scroll bar #73364
Dimitar
Participant
Hi Rajesh,

Please try the following:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">Custom Rows Selection</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqx-all.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            // prepare the data
            var data = preparegriddata(200);

            var source = {
                localdata: data,
                datatype: "array",
                datafields: [{
                    name: 'firstname',
                    type: 'string'
                }, {
                    name: 'lastname',
                    type: 'string'
                }, {
                    name: 'productname',
                    type: 'string'
                }, {
                    name: 'available',
                    type: 'bool'
                }, {
                    name: 'quantity',
                    type: 'number'
                }]

            };

            var dataAdapter = new $.jqx.dataAdapter(source);
            var columnCheckBox = null;
            var updatingCheckState = false;

            var checkState = false;

            // initialize jqxGrid. Disable the built-in selection.
            $("#jqxgrid").jqxGrid({
                source: dataAdapter,
                editable: true,

                enablehover: false,
                selectionmode: 'none',
                pageable: true,
                sortable: true,
                autoheight: true,
                columns: [{
                    text: '',
                    menu: false,
                    sortable: false,
                    editable: true,
                    datafield: 'available',
                    columntype: 'checkbox',
                    width: 40,
                    renderer: function () {
                        return '<div style="margin-left: 10px; margin-top: 5px;"></div>';
                    },
                    rendered: function (element) {
                        $(element).jqxCheckBox({
                            width: 16,
                            height: 16,
                            animationShowDelay: 0,
                            animationHideDelay: 0,
                            checked: checkState
                        });
                        columnCheckBox = $(element);
                        $(element).on('change', function (event) {
                            var checked = event.args.checked;
                            checkState = checked;
                            var pageinfo = $("#jqxgrid").jqxGrid('getpaginginformation');
                            var pagenum = pageinfo.pagenum;
                            var pagesize = pageinfo.pagesize;
                            if (checked == null || updatingCheckState) return;
                            $("#jqxgrid").jqxGrid('beginupdate');

                            // select all rows when the column's checkbox is checked.

                            // update cells values.
                            var startrow = pagenum * pagesize;
                            for (var i = startrow; i < startrow + pagesize; i++) {
                                // The bound index represents the row's unique index.
                                // Ex: If you have rows A, B and C with bound indexes 0, 1 and 2, afer sorting, the Grid will display C, B, A i.e the C's bound index will be 2, but its visible index will be 0.
                                // The code below gets the bound index of the displayed row and updates the value of the row's available column.
                                var boundindex = $("#jqxgrid").jqxGrid('getrowboundindex', i);
                                $("#jqxgrid").jqxGrid('setcellvalue', boundindex, 'available', event.args.checked);
                            }

                            $("#jqxgrid").jqxGrid('endupdate');
                            $("#jqxgrid").jqxGrid('render');
                        });
                        return true;
                    }
                }, {
                    text: 'First Name',
                    editable: false,
                    datafield: 'firstname',
                    width: 90
                }, {
                    text: 'Last Name',
                    editable: false,
                    datafield: 'lastname',
                    width: 90
                }, {
                    text: 'Product',
                    editable: false,
                    datafield: 'productname',
                    width: 200
                }, {
                    text: 'Quantity',
                    editable: false,
                    datafield: 'quantity'
                }]
            });
        });

        function preparegriddata(rowscount) {
            // prepare the data
            var data = new Array();
            var firstNames = [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];

            var lastNames = [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];

            var productNames = [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Caramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];

            for (var i = 0; i < rowscount; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var quantity = 1 + Math.round(Math.random() * 10);

                row["available"] = false;
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["quantity"] = quantity;
                data[i] = row;
            }

            return data;
        }
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
July 6, 2015 at 8:08 am horizontal scroll bar #73374

Rajesh
Participant

hi Dimitar,

thanks for reply

this is not work for me
could you please tell me is there any way to refresh grid whenever i will scroll grid or is there any event on horizontal scroll so i will refresh grid so its will solve my problem.

July 8, 2015 at 8:04 am horizontal scroll bar #73510

Dimitar
Participant

Hi Rajesh,

There is no such event, but there is a partial workaround you can try: http://www.jqwidgets.com/community/topic/scroll-event/#post-28187. However, I still do not understand the connection between the scrolling issue you report and the one with the checkboxes.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
Author

Posts

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

You must be logged in to reply to this topic.