jQWidgets Forums

jQuery UI Widgets Forums Grid Double click on Grid’s horizontal scrollbar implies vertical scrollbar move down

This topic contains 5 replies, has 2 voices, and was last updated by  ivailo 9 years, 9 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • tazi
    Participant

    Hi,

    We have an Editable Grid with horizontal scrollbar.
    The problem : when we double click on Grid’s horizontal scrollbar, the vertical scrollbar move down. Also, the cell behind horizontal scrollbar is selected. We have the same problem, if you try de move the horizontal scrollbar.

    This problem is only detected in this version jQWidgets 3.8.1 with EDITABLE grid. The older version have a normal behavior.
    Thanks lots


    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=’Description’>In order to enter in edit mode, select a grid cell and start typing, “Click” or press the “F2” key. You
    can also navigate through the cells using the keyboard arrows or with the “Tab” and “Shift + Tab” key combinations. To cancel the cell editing, press the “Esc” key. To save
    the changes press the “Enter” key or select another Grid cell. Pressing the ‘Space’ key when a checkbox cell is selected will toggle the check state.</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/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.edit.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/jqxdropdownlist.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/jqxnumberinput.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxdatetimeinput.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/globalization/globalize.js”></script>
    <script type=”text/javascript” src=”../../scripts/demos.js”></script>
    <script type=”text/javascript” src=”generatedata.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    // prepare the data
    var data = generatedata(200);

    var source =
    {
    localdata: data,
    datatype: “array”,
    updaterow: function (rowid, rowdata, commit) {
    // synchronize with the server – send update command
    // call commit with parameter true if the synchronization with the server is successful
    // and with parameter false if the synchronization failder.
    commit(true);
    },
    datafields:
    [
    { name: ‘firstname’, type: ‘string’ },
    { name: ‘lastname’, type: ‘string’ },
    { name: ‘productname’, type: ‘string’ },
    { name: ‘available’, type: ‘bool’ },
    { name: ‘quantity’, type: ‘number’ },
    { name: ‘price’, type: ‘number’ },
    { name: ‘date’, type: ‘date’ }
    ]
    };

    var dataAdapter = new $.jqx.dataAdapter(source);

    // initialize jqxGrid
    $(“#jqxgrid”).jqxGrid(
    {
    width: 850,
    source: dataAdapter,
    editable: true,
    enabletooltips: true,
    selectionmode: ‘multiplecellsadvanced’,
    columns: [
    { text: ‘First Name’, columntype: ‘textbox’, datafield: ‘firstname’, width: 120 },
    { text: ‘Last Name’, datafield: ‘lastname’, columntype: ‘textbox’, width: 120 },
    { text: ‘Product’, columntype: ‘dropdownlist’, datafield: ‘productname’, width: 195 },
    { text: ‘Available’, datafield: ‘available’, columntype: ‘checkbox’, width: 167 },
    {
    text: ‘Ship Date’, datafield: ‘date’, columntype: ‘datetimeinput’, width: 110, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘d’,
    validation: function (cell, value) {
    if (value == “”)
    return true;

    var year = value.getFullYear();
    if (year >= 2015) {
    return { result: false, message: “Ship Date should be before 1/1/2015” };
    }
    return true;
    }
    },
    {
    text: ‘Quantity’, datafield: ‘quantity’, width: 170, align: ‘right’, cellsalign: ‘right’, columntype: ‘numberinput’,
    validation: function (cell, value) {
    if (value < 0 || value > 150) {
    return { result: false, message: “Quantity should be in the 0-150 interval” };
    }
    return true;
    },
    createeditor: function (row, cellvalue, editor) {
    editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
    }
    },
    { text: ‘Price’, datafield: ‘price’, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘c2’, columntype: ‘numberinput’,
    validation: function (cell, value) {
    if (value < 0 || value > 15) {
    return { result: false, message: “Price should be in the 0-15 interval” };
    }
    return true;
    },
    createeditor: function (row, cellvalue, editor) {
    editor.jqxNumberInput({ digits: 3 });
    }

    }
    ]
    });

    // events
    $(“#jqxgrid”).on(‘cellbeginedit’, function (event) {
    var args = event.args;
    $(“#cellbegineditevent”).text(“Event Type: cellbeginedit, Column: ” + args.datafield + “, Row: ” + (1 + args.rowindex) + “, Value: ” + args.value);
    });

    $(“#jqxgrid”).on(‘cellendedit’, function (event) {
    var args = event.args;
    $(“#cellendeditevent”).text(“Event Type: cellendedit, Column: ” + args.datafield + “, Row: ” + (1 + args.rowindex) + “, Value: ” + args.value);
    });
    });
    </script>
    </head>
    <body class=’default’>
    <div id=’jqxWidget’>
    <div id=”jqxgrid”></div>
    <div style=”font-size: 12px; font-family: Verdana, Geneva, ‘DejaVu Sans’, sans-serif; margin-top: 30px;”>
    <div id=”cellbegineditevent”></div>
    <div style=”margin-top: 10px;” id=”cellendeditevent”></div>
    </div>
    </div>
    </body>
    </html>
    `


    ivailo
    Participant

    Hi tazi,

    Thanks for the feedback.
    We will fix this issue in some of the next releases.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com


    tazi
    Participant

    Thanks Ivailo for your feedback.

    1.) Could you please supply a workaround to fix this problem until the next release.
    2.) Please confirm, in which release this issue will be fixed (the release date) ?

    Best regards,
    Tazi


    ivailo
    Participant

    Hi tazi,

    Unfortunately right now we don’t have a workaround about this issue.
    We will investigate the problem, generated this issue, and fix it soon as possible.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com


    tazi
    Participant

    Hi,

    Could you please give us a feed back about your investigation ?

    Best Rergards,
    Tazi.


    ivailo
    Participant

    Hi Tazi,

    The investigation is still in process.
    You can check the new releases and fixes here.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.