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:
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%:
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); }); });
$.(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.
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!