Hello
We are trying to create a grid that is responsive. We are using the responsive feature for this and it kind of works. Except we want to change the width of a column when the grid enters responsive mode.
We have following setup: http://jsfiddle.net/k3759o0c/13/
As you can see we have 4 columns:
When changing into responsive mode these percentages are still in play, but the last visible column takes all available width (being Title here). So Title becomes larger than Name, while the opposite should be true.
Is there any way to solve this? Like changing the width of the columns when entering responsive mode?
Thank you!
Hello Michael,
I am glad that you managed to achieve your requirement.
Thank you for using Infragistics components.
Thank you very much Vasya. Our question has been resolved with this.
Thank you for getting back to me.
When the igGrid is initially loaded in "phone" mode the responsiveModeChanged event is not triggered and respectively the column widths are not recalculated as per your requirement. The approach with handling rendered event to determine what is the mode is a good one.
Please let me know if you have any additional questions regarding this matter.
Hello Vasya
Thank you! This works, however when opening the website from Mobile from the get-go, the layout still isn't right. What would be the correct way to solve that?
Currently we call the same method on the rendered event of a grid which does about the same check but with this.grid.igGridResponsive("getCurrentResponsiveMode");
Thank you
Thank you for posting in our community.
What I can suggest for achieving your requirement is handling responsiveModeChanged event. In this event the width option of the columns can be set relative to the new responsive mode. For example:
responsiveModeChanged: function (evt, ui) { if(ui.mode === "phone"){ ui.owner.grid.options.columns[1].width = "80%"; ui.owner.grid.options.columns[2].width = "20%"; } }
When column widths are set in % and the new responsive mode hides two of the columns the sum of the remaining column widths in % do not match 100%. In this scenario the browser is making its own calculations in order to get new column width.
In my snippet I am handling only the scenario when responsive mode is "phone", however, my suggestion is to handle all modes and set the appropriate widths to ensure that columns are going to be rendered as you expect.
Please let me know if you need any further assistance regarding this matter.