jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Grid scrollbar size

Tagged: 

This topic contains 4 replies, has 4 voices, and was last updated by  Peter Stoev 7 years, 9 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Grid scrollbar size Posts
  • February 11, 2015 at 1:10 am Grid scrollbar size #66870

    luesak
    Participant

    Please add property to specify the grid scrollbar size so that when using non-default size, the UI can have all matching looks. Now the scrollbar and panel controls can specify size but the grid cannot causing them to be different sizes.

    Same goes for the tree as well.

    Thanks

    Kim

    February 11, 2015 at 5:49 am Grid scrollbar size #66886

    Peter Stoev
    Keymaster

    We have such property. It’s called scrollbarsize. Ex: http://jsfiddle.net/jqwidgets/mtY3V/

    Best Regards,
    Peter Stoev

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

    April 6, 2017 at 2:00 pm Grid scrollbar size #92745

    dsFranz
    Participant

    Hi

    I have a grid with paging. When I use standard scrollbar height the layout with autoheight is nice.
    When i set scrollbarsize to 10, there is a white empty row between the last row and the scrollbar.

    The Code:

    <!DOCTYPE html>
<html lang="en">
<head>    
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>    
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.black.css" type="text/css" />
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" type="text/css" />
    <script type="text/javascript" src="lib/jquery/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="lib/jqwidgets/jqx-all.js"></script>
    <style>
        
    </style>
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function () {
             var data = generatedata(500);
            var source = {
                localdata: data,
                datafields: [{
                    name: 'firstname',
                    type: 'string'
                }, {
                    name: 'lastname',
                    type: 'string'
                }, {
                    name: 'productname',
                    type: 'string'
                }, {
                    name: 'date',
                    type: 'date'
                }, {
                    name: 'quantity',
                    type: 'number'
                }, {
                    name: 'price',
                    type: 'number'
                }],
                datatype: "array"
            };

            var adapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid({
                width: 500,
                theme: 'energyblue',
                scrollbarsize: 10,
                source: adapter,
                sortable: true,
                columnsresize:true,
                pageable: true,
                altrows: true,
                autoheight: true,
                columnsreorder: true,
                columns: [{
                    text: 'First Name',
                    datafield: 'firstname',
                    width: 90
                }, {
                    text: 'Last Name',
                    datafield: 'lastname',
                    width: 90
                }, {
                    text: 'Product',
                    datafield: 'productname',
                    width: 170
                }, {
                    text: 'Order Date',
                    datafield: 'date',
                    width: 160,
                    cellsformat: 'dd-MMMM-yyyy'
                }, {
                    text: 'Quantity',
                    datafield: 'quantity',
                    width: 80,
                    cellsalign: 'right'
                }, {
                    text: 'Unit Price',
                    datafield: 'price',
                    cellsalign: 'right',
                    cellsformat: 'c2'
                }]
            });
        });
    </script>
    <div id="jqxgrid"></div>
</body>
</html>

    And another problem is, that when using new latest version of jqWidgets, setting scrolbarsize does not change the scrollbar, you
    can test this by the link from above: http://jsfiddle.net/jqwidgets/mtY3V/

    May 9, 2017 at 7:10 am Grid scrollbar size #93360

    cosostones
    Participant

    Hello,

    According to dsFranz I noticed a regression on the scrollbarsize property when I upgrade to v4.5.1.

    It doesn’t take the value anymore. Your fiddle show it too (http://jsfiddle.net/jqwidgets/mtY3V/).

    Regards.

    August 23, 2017 at 2:40 pm Grid scrollbar size #95607

    Peter Stoev
    Keymaster

    The way of setting this property is changed.
    You can use: $.jqx.utilities.scrollBarSize = 20;

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.