jQuery UI Widgets Forums Grid horizontal scroll bar

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

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • 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

    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/

    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

    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.

    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/

    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

    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

    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/

    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>

    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/

    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

    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/

    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.

    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/

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

You must be logged in to reply to this topic.