jQWidgets Forums

jQuery UI Widgets Forums Grid Bug in grid status bar width

This topic contains 3 replies, has 2 voices, and was last updated by  reblutus 11 years, 7 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Bug in grid status bar width #29977

    reblutus
    Blocked

    The width of the status bar is calculated according to the total of the widths of the columns. If the grid is too narrow the “grid” portion of the grid will show an horizontal scroll bar making it possible to see the hidden columns. The status bar is not part of the scrollable area. So if you have some buttons adjusted to the right of the status bar they will hide and there will be no way you can scroll to view them.

    Instead of using the total width of the columns, the status bar should calculate his width according to the grid container. Or better the status bar could have a width:auto or 100% which will make the div the width it can take.

    Trying to force the width:auto (or 100%) to the status bar in the renderstatusbar attribute does not work.

    Bug in grid status bar width #29979

    Peter Stoev
    Keymaster

    Hi reblutus,

    That is not a bug. That is the behavior by design. The Status Bar is not scrollable. The Toolbar is not scrollbable, too.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Bug in grid status bar width #29993

    reblutus
    Blocked

    I don’t want to status bar to be scrollable, you misunderstood me.

    I want it to fit the width of the grid container. Now, sometimes, it’s wider and portions of it are hidden. This happens when the columns are larger than the grid container, in other words when a horizontal scrollbar appears.

    You can experiment this if you put something in the status bar that is floating right.

    Bug in grid status bar width #30085

    reblutus
    Blocked

    here you can find an example showing the problem mentionned above:

    <script>
    // 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", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
    ];
    var priceValues =
    [
    "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
    ];
    for (var i = 0; i < 1000; i++) {
    var row = {};
    var productindex = Math.floor(Math.random() * productNames.length);
    var price = parseFloat(priceValues[productindex]);
    var quantity = 1 + Math.round(Math.random() * 10);
    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
    row["productname"] = productNames[productindex];
    row["price"] = price;
    row["quantity"] = quantity;
    row["total"] = price * quantity;
    data[i] = row;
    }
    var source =
    {
    localdata: data,
    datatype: "array"
    };
    var dataAdapter = new $.jqx.dataAdapter(source, {
    loadComplete: function (data) { },
    loadError: function (xhr, status, error) { }
    });
    $(function(){
    $("#jqxGrid").jqxGrid(
    {
    source: dataAdapter,
    width:600,
    height:"100%",
    columns: [
    { text: 'First Name', datafield: 'firstname', width: 100 },
    { text: 'Last Name', datafield: 'lastname', width: 100 },
    { text: 'Product', datafield: 'productname', width: 180 },
    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
    { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
    { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
    ],
    showstatusbar:true,
    statusbarheight:28,
    renderstatusbar: function($statusbar){
    var $button = $('<button type="button" style="float:right;">My right button</button>');
    $button.jqxButton();
    $statusbar.append($button);
    }
    });
    });
    </script>
    <style>
    html, body{
    margin:0;
    padding:0;
    }
    html, body, #jqxGrid{
    height:100%;
    }
    </style>
    </head>
    <body>
    <div id="jqxGrid"></div>
    </body>

    As you can see the status bar is larger than the grid’s width, thus making right adjusted elements to be partly or fully hidden.

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

You must be logged in to reply to this topic.