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>
Hi! Would you have any suggestions? Perhaps I was not making myself clear, so here is an example: Let's say I have four columns in the grid with the widths equal to 20%, 30%, 30% and 20%. Now the user resizes the second column, expanding it to 50%. The way MS Word and DevExpress's grid would handle this is by changing the width of the third column to 10% and leaving the widths of the first and the fourth columns unchanged. igGrid changes the widths of all the columns, making resizing an unpredictable trial-and-error effort. Thanks.
Unfortunately igGridResizing doesn't support this resizing algorithm and I cannot suggest you any good workaround.
You can suggest this functionality as a new product idea for future versions at <http://ideas.infragistics.com>.
There are many benefits to submitting a product idea:
- Direct communication with our product management team regarding your product idea.
- Notifications whenever new information regarding your idea becomes available.
- Ability to vote on your favorite product ideas to let us know which ones are the most important to you. You will have ten votes for this and can change which ideas you are voting for at any time.
- Allow you to shape the future of our products by requesting new controls and products altogether.
- You and other developers can discuss existing product ideas with members of our Product Management team.
Best regards,Martin PavlovInfragistics, Inc.
OK, thanks anyway. Actually I have managed to sort of achieve this behavior for fixed-width grids, using columnResizing and columnResized events. My problem is now to extend the method to the grids that resize together with the window. It's tricky but not impossible.
One thing that drives me a bit mad is that ui.columnIndex provided by the above methods does not take into account hidden columns. It would have been much handier to be able to grab ui.columnIndex and immediately use it to determine the new width of the column instead of having to loop through all the columns and count visible ones :-)
Thank you again for your reply.
All column related features (Resizing, Moving, Fixing etc.) work with visible (DOM) column indexes. Hidden columns are not rendered in the DOM, thus they are not taken into account. Looping through the column collection is the way to go.