Hello! I have a grid that takes 100% width of the container DIV. The width of the container is also specified in percentages, so the grid resizes when I resize the browser window and no horizontal scroll bar appears (my users hate horizontal scroll bars ;-)). The users would like to resize the columns as well, and this works. What they (and I) dislike, however, is the way resizing one column affects the width of all the other columns. This is totally counter-intuitive for someone who is used to working with tables in Word or with Outlook. Is there a way to change the resizing method in such a way that changing the width on one column would only affect the width of the column to its right and not all the other columns?
Here is an example from DevExpress's site, which got it right: https://demos.devexpress.com/MVCxGridViewDemos/Columns/TextEllipsis
Is the same possible with igGrid? Many thanks.
Hello Werner,
This scenario is supported by igGrid Resizing. You need to define column's widths in % as well.
Here is an example code snippet:
$("#grid1").igGrid({ autoGenerateColumns: false, columns: [ { headerText: "Product ID", key: "ProductID", dataType: "number", width: "25%" }, { headerText: "Product Name", key: "Name", dataType: "string", width: "25%" }, { headerText: "Product Number", key: "ProductNumber", dataType: "string", width: "25%" }, { headerText: "Make Flag", key: "MakeFlag", dataType: "bool", width: "25%" } ], height: "600px", width: "100%", dataSource: adventureWorks, features: [ { name: "Resizing" } ] });
Best regards, Martin Pavlov Infragistics, Inc.
Hello Martin,
Thank you for answering so quickly! Actually your code is almost identical to the one I am using (see below), but when I resize one column, e.g. Last Name, I see all the other columns changing their widths. What I would like to achieve is that when I expand Last Name, only the Country column gets narrower, while the other two columns maintain their widths. Am I missing something in the code? Many thanks!
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <!-- Ignite UI Required Combined CSS Files --> <link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<!-- Ignite UI Required Combined JavaScript Files --> <script src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.core.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.lob.js"></script>
<style>
body { padding-left: 50px; padding-right: 50px; } #gridDiv { width: 100% !important; min-width: 500px !important; } #grid { width: 100%; }
</style> <script> $(function () { var height = window.innerHeight; $("#grid").igGrid({ autoGenerateColumns: false, width: "100%", height: "600px", autofitLastColumn: false, primaryKey: "EmployeeID", dataSource: data, columns: [ { headerText: "First Name", key: "FirstName", dataType: "string", width: "30%" }, { headerText: "Last Name", key: "LastName", dataType: "string", width: "30%" }, { headerText: "Country", key: "Country", dataType: "string", width: "30%" }, { headerText: "Age", key: "Age", dataType: "number", width: "10%" } ], features: [ { name: "Resizing", allowDoubleClickToResize: true, columnSettings: [ { columnKey: "FirstName", minimumWidth: "10%" }, { columnKey: "LastName", minimumWidth: "10%" }, { columnKey: "Country", minimumWidth: "10%" }, { columnKey: "Age", minimumWidth: "10%" } ] } ] }); }); </script></head><body> <div id="gridDiv"> <table id="grid"></table> </div> <script src="data.js"></script></body></html>