a developer's notes – a semi-technical web development BLOG

April 25, 2013

Hide Horizontal Scrollbar on jqgrid

From http://mageefamilyblog.blogspot.com/2011/06/jqgrid-horizontal-scroll-bars-when.html

If you add the scroll property of the jgrid to true, for dynamic (endldess) scrolling, it will add a unnecessary horizontal scroll bar. Use this to remove.

.ui-jqgrid-bdiv
{
overflow-x : hidden !important;
}

Here is the sample jqrid code:

 $(document).ready(function () {
            $('#jqgProducts').jqGrid({
                //url from wich data should be requested
                url: '@Url.Action("Products")',
                //type of data
                datatype: 'json',
                //url access method type
                mtype: 'POST',
                //columns names
                colNames: ['ProductID', 'ProductName', 'Supplier', 'Category', 'QuantityPerUnit', 'UnitPrice', 'UnitsInStock'],
                //columns model
                colModel: [
                            { name: 'ProductID', index: 'ProductID', align: 'left' },
                            { name: 'ProductName', index: 'ProductName', align: 'left' },
                            { name: 'Supplier', index: 'SupplierID', align: 'left', formatter: supplierFormatter },
                            { name: 'Category', index: 'CategoryID', align: 'left' },
                            { name: 'QuantityPerUnit', index: 'QuantityPerUnit', align: 'left' },
                            { name: 'UnitPrice', index: 'UnitPrice', align: 'left', formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, prefix: '$'} },
                            { name: 'UnitsInStock', index: 'UnitsInStock', align: 'left', formatter: unitsInStockFormatter }
                          ],
                //pager for grid
                pager: $('#jqgpProducts'),
                //enable dynamic scrolling
                scroll: true,
                //enable npage request parameter
                prmNames: { npage: 'npage' },
                //initial sorting column
                sortname: 'ProductID',
                //initial sorting direction
                sortorder: 'asc',
                //we need to limit grid height so the scroll can appear
                height: '300px'
            });
Advertisements

1 Comment »

  1. .ui-jqgrid-bdiv
    {
    overflow-x : hidden !important;
    }

    Thank you for this.. The above piece of code worked for me.

    Comment by Megha — September 19, 2017 @ 4:19 am | Reply


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: