Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1075
No Horizontial Scrollbars when setting igGrid Height
posted

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" }); });