jQuery UI Widgets Forums Grid vertical scrollbar refreshes the grid when scrolled to bottom

This topic contains 1 reply, has 2 voices, and was last updated by  Nadezhda 9 years, 3 months ago.

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

  • nitinayir8
    Participant

    Hi Admin,

    We set the autoheight property to false and added a fixed height to get a vertical scrollbar. When we scroll to the bottom grid refreshes and as a result any new row that is added before scrolling disappears.

    regards,

    Nitin


    Nadezhda
    Participant

    Hello Nitin,

    In the following example the ‘autoheight’ property is set to false and the vertical scrollbar does not refresh the grid when it is scrolled to the bottom of the grid. Please, make sure you are using the latest version of jQWidgets (3.7.1).

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></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/jqxcheckbox.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/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var url = "../sampledata/products.xml";
                // prepare the data
                var source =
                {
                    datatype: "xml",
                    datafields: [
                        { name: 'ProductName', type: 'string' },
                        { name: 'QuantityPerUnit', type: 'int' },
                        { name: 'UnitPrice', type: 'float' },
                        { name: 'UnitsInStock', type: 'float' },
                        { name: 'Discontinued', type: 'bool' }
                    ],
                    root: "Products",
                    record: "Product",
                    id: 'ProductID',
                    url: url
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    downloadComplete: function (data, status, xhr) { },
                    loadComplete: function (data) { },
                    loadError: function (xhr, status, error) { }
                });
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    height: 200,
                    source: dataAdapter,
                    autoheight: false,
                    sortable: true,
                    altrows: true,
                    enabletooltips: true,
                    editable: true,
                    selectionmode: 'multiplecellsadvanced',
                    columns: [
                      { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
                      { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                      { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                      { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right',  width: 100 },
                      { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                    ],
                    columngroups: [
                        { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                    ]
                });
    
                $("#addrowbutton").jqxButton({
                    height: 30
                });
    
                $("#addrowbutton").on('click', function () {
                    var value = $('#jqxgrid').jqxGrid('addrow', null, {});
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">
            </div>
            <div style="margin-top: 10px;">
                <input id="addrowbutton" type="button" value="Add Row" />
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

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

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

You must be logged in to reply to this topic.