No Horizontial Scrollbars when setting igGrid Height

1175

Karthik Thiagarajan posted over 9 years ago

This is a problem we are facing: The horizontial scrollbar does not render when the grid height is set. We want these features enabled:

- Grid height of 400px
- Fixed Headers
- Grid width of 100%
- If columns exceed the width, render a horizontal scrollbar.
- If data exceeds the height, render a vertical scrollbar.

The example is even broken in your JSFIDDLE.

http://jsfiddle.net/gh/get/jquery/1.9.1/igniteuisamples/jsfiddle-samples/tree/master/EN/HtmlSamples/grid/overview-sample/

Go to the link and replace the grid declaration with the following grid below. You will notice:

- vertical scrollbar is available.
- horizontal scrollbar is missing.
- Horizontal scrollbar appears if and only if you start to shrink the page by making the browser smaller.

This is a serious problem for us. What work around do you have to fix this issue?

v14.2

IE11 + Firefox

$("#grid").igGrid({
                primaryKey: "ProductID",
                width: '100%',
                columns: [
                    { key: "Id", dataType: "number", width: "50px", headerText: "blah", hidden: false },
                    { key: "LocationId", dataType: "number", width: "50px", headerText: "blah", hidden: false },
                    { key: "CustomerId", dataType: "number", width: "50px", headerText: "blah", hidden: false },
                    { key: "OrderLocationId", dataType: "number", width: "50px", headerText: "blah", hidden: false },
                    { key: "OrderStateId", dataType: "number", width: "50px", headerText: "blah", hidden: false },
                    { key: "Customer", dataType: "object", width: "50px", headerText: "blah", hidden: false },
                    { key: "OrderLocation", dataType: "object", width: "50px", headerText: "blah", hidden: false },
                    { key: "OrderItems", dataType: "object", width: "50px", headerText: "blah", hidden: false },
                    {
                        key: "ShipDate",
                        dataType: "date",
                        format: "MM/dd/yyyy",
                        width: "75px",
                        headerText: "Ship Date",
                        unbound: true,
                        formula: function (record, grid) {
                            return "test";//return $.ig.formatter(record.Customer.ShipDate, "date", "MM/dd/yyyy", true, true, null);
                        }
                    },
                    {
                        key: "FreightCarrier",
                        dataType: "string",
                        width: "120px",
                        headerText: "Freight
Carrier",
                        unbound: true,
                        formula: function (record, grid) {
                            return "test";//return record.Customer.CarrierDescription;
                        }
                    },
                    { key: "PaymentType", dataType: "string", headerText: "Pre-Paid / Collect / 3rd Party Payment Terms" },
                    {
                        key: "LocationNumber",
                        dataType: "string",
                        width: "65px",
                        headerText: "PC #",
                        unbound: true,
                        formula: function (record, grid) {
                            return "test";//return record.OrderLocation.LocationNumber;
                        }
                    },
                    {
                        key: "ReferenceNumber",
                        dataType: "string",
                        width: "75px",
                        headerText: "PO or SO
or Ref #",
                        unbound: true,
                        formula: function (record, grid) {
                            return "test";//
                            //var references = "";

                            //if (record.Customer.SalesOrderNumber) {
                            //    references = references + "SO: " + record.Customer.SalesOrderNumber + "\r\n";
                            //}

                            //if (record.Customer.PurchaseOrderNumber) {
                            //    references = references + "PO: " + record.Customer.PurchaseOrderNumber + "\r\n";
                            //}

                            //return references;
                        }
                    },
                    //{
                    //    key: "ProNumber", dataType: "string", headerText: "Pro Number",
                    //    width: "65px",
                    //    unbound: true,
                    //    formula: function (record, grid) {
                    //        return "";
                    //    }
                    //},
                    {
                        key: "ShipperName", dataType: "string", headerText: "Shipper
Name",
                        width: "120px",
                        unbound: true,
                        formula: function (record, grid) {
                            return "test";//
                            //return record.OrderLocation.LocationName;
                        }
                    },
                    {
                        key: "ShipperAddress", dataType: "string", headerText: "Shipper
Address",
                        width: "120px",
                        unbound: true,
                        formula: function (record, grid) {
                            return "test";//return record.OrderLocation.ShippingAddress;
                        }
                    },
                    {
                        key: "ConsigneeName", dataType: "string", headerText: "Consignee
Name",
                        width: "95px",
                        unbound: true,
                        formula: function (record, grid) {
                            return "test";// return record.Customer.ConsignedTo;
                        }
                    },
                    {
                        key: "ConsgineeAddress", dataType: "string", headerText: "Consignee
Address",
                        width: "120px",
                        unbound: true,
                        formula: function (record, grid) {
                            return "test";//return record.Customer.Address1 + ' ' + record.Customer.Address2 ? record.Customer.Address2  : "";
                        }
                    },
                    {
                        key: "ConsigneeCity", dataType: "string", headerText: "Consignee
City",
                        width: "85px",
                        unbound: true,
                        formula: function (record, grid) {
                            return "test";//return record.Customer.City;
                        }
                    },
                    {
                        key: "ConsigneeState", dataType: "string", headerText: "Consignee
State",
                        width: "65px",
                        unbound: true,
                        formula: function (record, grid) {
                            return "test";// return record.Customer.State;
                        }
                    },
                    {
                        key: "ConsigneeZip", dataType: "string", headerText: "Consignee
Zip",
                        width: "75px",
                        unbound: true,
                        formula: function (record, grid) {
                            return "test";// return record.Customer.Zip;
                        }
                    }
                ],
                autoGenerateColumns: false,
                dataSource: northwindProducts,
                responseDataKey: "results",
                autoCommit: true,
                height: "400px"                
            });
        });

Parents

15320

Offline [Infragistics]Tsanna posted over 9 years ago

Hello Karthik,

In order to display horizontal scrollbar the grid columns' width sum should exceed the grid width or you can place the grid table element inside of div element and set the grid width to 100%, for example:

<div style="width:400px">
<table id="grid"></table>
</div>

...

$("#grid").igGrid({

width: '100%',

...

});

If you need further assistance, please let me know.

Regards,
Tsanna
Cancel
Reply

Cancel
1175

Offline Karthik Thiagarajan posted over 9 years ago in reply to [Infragistics]Tsanna
That won't work for a fluid layout. If we restrict the grid by a container then what happens when a user visits the page with a maximized window? They would expect to be able to see the entire grid at that point. What other alternatives are there?

We use bootstrap for our grid design. Sample row:

<div class="row"> <div class="col-md-12"> <table id="igGridOrders"></table> </div> </div>
Cancel
Reply

Cancel
1175

Offline Karthik Thiagarajan posted over 9 years ago in reply to Stamen Stoychev

Which column didn't have a width? I checked all of them and all of the visible columns have widths defined.

The example is perfect. But I can't seem to replicate it on some our grids.
Cancel
Reply

Cancel
1175

Offline Karthik Thiagarajan posted over 9 years ago in reply to Karthik Thiagarajan

After extensive testing the problem still exists. The JSFiddle works but is misleading because the small space it takes up. If you take the example start with a maximized screen where the grid can completely stretch out, then the horizontal scrollbars do not render. Then take the same window and make it small, the scrollbars still do not render cutting off the columns.

Going from big to small - works.
Going from small to big - no horizontal scrollbars.

Whatever the page renders initially, is the mode it stays in. How can I get the scrollbars to show up as the page dynamically fills in? We have content regions on the page that can be hidden by the clients. When that happens, the grid should expand taking up that space. Same is true when those regions are initially hidden, it should collapse but still provide a scrollbar to allow them to see content that is now in a scroll region.
Cancel
Reply

Cancel
15320

Offline [Infragistics]Tsanna posted over 9 years ago in reply to Karthik Thiagarajan

Hello Karthik,

I isolated the grid from this jsFiddle into an isolated sample, however the horizontal scrollbar appears properly when the page starts with a maximized screen. Even if I resize the browser window, the scrollbar renders correctly and I don't see any issues. Please take a look at the attached sample for your reference and feel free to modify it in order to reproduce the issue, then send it back to me. If you need further assistance, please let me know.

Regards,

Tsanna

igGridHorizontalScrollbar.zip
Cancel
Reply

Cancel
1175

Offline Karthik Thiagarajan posted over 9 years ago in reply to [Infragistics]Tsanna

The demo doesn't work. I think it is referencing local files that aren't included in the zip file.
Cancel
Reply

Cancel

Reply

15320

Offline [Infragistics]Tsanna posted over 9 years ago in reply to Karthik Thiagarajan

Hello Karthik,

You can change the path to the js and css files, so that they point to the directory where they are located on your machine or just use the combined script references as in the jsFiddle. If you have any further questions, please let me know.

Regards,
Tsanna
Cancel
Reply

Cancel

Children

15320

Offline [Infragistics]Tsanna posted over 9 years ago in reply to Daniel Dority

Hello Daniel,

Thank you for your feedback and I'm glad you were able to resolve the issue.

If I can provide you with further assistance, feel free to contact me.

Regards,

Tsanna
Cancel
Reply

Cancel
2745

Verified Answer
Offline Daniel Dority posted over 9 years ago in reply to [Infragistics]Tsanna

The issue was stemmed from the us setting this value to false:

enableResizeContainerCheck

We've enabled the feature in our base configuration and it is resizing correctly.

thanks!
Cancel
Reply

Reject Answer

Cancel