Hello Infragistics team,
I have a hierarchical grid and I want it to resize to full window size when the user is resizing the window. I got this to work except the children's column widths.
I use the following code:
$(window).resize(function () { resizeGrid();});function resizeGrid() { $("#grid1").igGrid("option", "height", window.innerHeight-250); $("#grid1").igGridResizing("resize", 0); // resize whole body to 100% $("#grid1").css("width", "100%"); // resize whole header to body width (because 100% doesn't take 'vertical scroll bar width' into account) var width = $("#grid1").width(); $("#grid1").parent().parent().find(".ui-iggrid-headertable").css("width", width); }
Can you please tell me how to resize the child tables.
Thank you in advance,
Petra.
Hello Petra,
To understand the requirement I would like to have some more information including:
How did you set up your grid?
Did you set up the width of the individual column of the grid also?
Are you resizing the window for different devices?
If you are resizing the window for different devices I would recommend you to use ‘Responsive Web Design’ mode feature of the iggrid.
RWD adopts the concepts of Responsive Web Design in order to improve user experience on different devices. Responsive Web Design mode allows you to support multiple screen sizes.
Please refer the below sample for RWD:
http://jsfiddle.net/t2zevc62/
Let me know if you need further assistance.
Hello Divya,
I initialize the grid in the controller and I set DefaultColumnWidth = "*" to get the best result. I additionally set one column to a special width because otherwise it gets too big.
What I want is the grid always to show maximum size, so when the user resizes the window the grid should increase or decrease in size. This is working perfectly with the code I sent you, but only for for not hierarchical grid and for the top level part of hierarchical grid. Now I need the same for the child rows and headers.
The application is actually not planned for using on mobile devices, but I will take a look into the responsive feature. Thank you for providing this information.
Kind regards,
Thank you for providing the steps to reproduce it.As per my understanding you are setting a width to one column which will be fix width when you will resize the window. I would recommend you to set the width to all the column in % and see if you still getting the same response.
Or you could also try to set the width to the child grid too.In order to set the height and width to the child grid layout you need to access it first. For that the hierarchical grid provides a method to access all the child grid by using ‘ allChildrenWidgets ()’ method as like this this:
var hierarchicalGridWidgets = $(".selector").igHierarchicalGrid("allChildrenWidgets");
You can loop thru array of allChildrenWidgets () and access all the child widget and set the width to all the child grid.
Please let me know if you need further assistance.
Hi Divya,
I am on Window 7 using IE11, FF52 or Chrome 57.
You do the following:
You will see that
This is good. But what you also see, is that the child columns stay the same size.
I am repeating myself, which is a little frustrating ...
Regards,
Thank you for providng the updated sample.
I am not ablr to reproduce the behavior you are describing .May i know which browser (version) you are using ?
During my test I followed the below steps:
1)Run the sample on chrome and IE.Parent and child Grid loaded with the same width
2)I tried to resized the windoe so many time still bit the gris has same width.
Looking forward to hear you back meanwhile i will perform the test on other machine too and will see if i am able to reproduce the same behavior.
as we have many columns, we cannot define each width in percentage. What we want is to use the auto width feature which we get with the defaultColumnWidth property. Additionally we want the grid AND the columns to resize, when the user resizes the browser window.
From the post https://ko.infragistics.com/community/forums/t/104423.aspx we got the javascript code to achieve what we want, but this only works for not hierarchical grids and for the top level of hierarchical grids. What we need is to resize the children.
I modified your sample to show it. If you increase the browser window's width, you see the top level columns increasing its width. The children's columns stay as they are.
Best regards,
To understand the requirement more clearly I have created a sample application of igHierarchicalGrid and the set the width of the parent grid and the child grid , also I set he width of the columns ,
Now when I resize the window both the grid does increase and decrease (resized) accordingly.
Grid resized based on the width I set in grid in %.
for example if you set the width of parent grid 100% and child grid 50 % and when you resize the window every time parent grid would take 100% of the current window size
and child grid would take 50 % of the current window.
Please find the attached sample and if the sample project is not an accurate demonstration of what you're trying to do,
feel free to modify it and send it back with the steps I have to take to reproduce the scenarios.