Grid Sizing – Column Sizing/Resizing – Responsive Iggrid with resizable columns?

General question:

How do I accomplish a responsive grid with resizable columns?

Version:

– 2015.2
– using ASP.NET to create grid

Current issue:

Grids have 50+ columns. When using auto on column width and 100% on grid, to resize to screen size, columns are not resizable, and headers are getting cut off where the headers names are much longer than the cell data in the rows.

Grid Requirements:

• Let the grid size responsively to the container its in 100% growing and shrinking with browser size.
• Let user re-size columns if needed
• If possible also fix the headers so the user can see headers at all times
• Horizontal scrolling

Is there a way to accomplish this? Is there a sample of this with a large set of columns? The samples I see have very few columns.

Issues with columns in grid with 100%:

• Not able to resize columns when using autosize on columns
• When autosize is done, and the data portion in the cell is small, longer header names get cut off, and the user cannot see the full header name.
• When setting column width and using grid width 100%, the grid grows to the size of the columns and scroll bar is at the parent level, outside grid at bottom of screen
• There does not appear to be a min/max col width size that works with auto size that I can find. How can I set a min/max size for auto size?
• Auto size, imo, should at a minimum be showing the full header text, even if the cell data is very small and header is large.

Hello donschaberg,

Thank you for posting in our community.

What I can suggest for achievieng your requirement is following these steps:

1) Set grid width to 100% which will ensure that it will fit the browser window.

2) Set the grid height to the height of the browser window. Having the height set will ensure that when scrolling your headers will be fixed and visible in the view.

3) Set defaultColumnWidth option to ” * “. This will auto size your columns width according to header text and cell content.

4) In order to be able to resize columns the Resizing feature should be enabled. This feature will give you the opportunity to resize columns. Additionally using the columnSettings of the feature a minimunWidth and maximumWidth properties could be set for every column.

5) Afterwards the resize event of the window could be handled to set the grid`s height to the new resized window height in order to show the horizontal scrollbar appropriately.

For example:

         $.(function () {             var height = window.innerHeight;             $("#grid").igGrid({                 autoGenerateColumns: true,                 width: "100%",                 height: height,                 defaultColumnWidth: "*",                 primaryKey: "EmployeeID",                 dataSource: data,                 features: [                     {                         name: "Resizing",                         allowDoubleClickToResize: true,                         columnSettings: [                            { columnKey: "EmployeeID", maximumWidth: 150, minimumWidth: 120 },                             { columnKey: "FirstName", maximumWidth: 150, minimumWidth: 120 }                         ]                                          }               ]             });             $(window).resize(function () {

                 $("#grid").igGrid("option", "height", window.innerHeight);                             });         });

I am also attaching a small sample illustrating my suggestions for your reference. Please test this sample on your side and let me know whether it helps you achieve your requirement.

If this is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me for further investigation.

Attachments:

1. igGridResizeAccordingToBrowserWindow.zip

Thanks Vasya!

With your example we were able to get the desired outcome!

We also had to remove this from CSS as shown in another example for sizing:

.igGridDefault {
display: inline-block;
table-layout: auto !important;
}

.ui-iggrid-scrolldiv {
overflow-x: auto !important;
}

Thanks again!

Hello donschaberg,

I am glad that you have been able to achieve your requirement.

Please let me know if you need any further assistance with this matter.