Dynamic Resize of Grid Component with a Window
In general, the Grid component gets its width from its parent block element. In addition, because of virtualization, the grid height requires to be set either in CSS or in code. Whenever the parent element that contains the grid changes its size, the grid size should also update. However, if this is set in CSS, the grid layout will remain the same and requires an update.
In this article, you will learn how to update the Grid size whenever its parent element size changes or the browser window is resized. As a parent element a Window component is used, because it allows you to change the window size from its border in every direction. A sample code is available in JavaScript, Angular, React and Vue, in following sections below.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
As demo shows, there is a Window that contains the Grid component, occupying the whole space. You can resize the window, by moving the mouse cursor over the window edge where you will see a change in mouse cursor specifying the direction at which you can resize it. Whenever window is dynamically resized, the grid size will update accordingly.
In addition, when window is maximized, resizing the browser window will also update the Window component size, which will also trigger update of the grid size.
The example also shows how to edit grid data using Form Editing. To edit a row, double click on a row or move the mouse cursor over first column cells and click on the pencil icon. A form will appear on right side, from where you can edit the grid row.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
How to Handle Window Size Changes to Update the Grid
At first, you need to put the Grid component inside a window. You can use CSS to determine the grid height, which is related to the window height. The IntegralUI Window is a native web component that can contain any standard or custom HTML elements placed in the slot space. In case of a Grid component (which is also a custom HTML element), you just need to use its tag and set some properties. For example:
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
You may notice that in this example, the autoSizeColumns property is set to true, which means that all columns in the grid will occupy the whole space. When grid resizes, the column size will auto-update to make sure there is no empty space.
The Window component has sizeChanged event, which is fired whenever window size changes. You can handle this event in your code and update the grid layout by calling the updateLayout method. For this to work, you need to get a reference to the Grid component first, which will allow you to call any public method available:
Now, this solves the grid size changes whenever window is resized. However, when window is maximized, the window size will remain the same and it needs an update. In all modern browsers, there is a way to handle size changes to any HTML element using the ResizeObserver. By creating this kind of an object, you can track any change to an element and updates its children accordingly.
In this case, the Window component is placed in a parent block element (standard
Whenever block size changed and the window is maximized, update the window size to the block size. Because you are setting the window size using a property, this will internally fire the sizeChanged event, which because of the event handler set previously, the grid layout will also update.
Notice that the grid size will change automatically, because it is set in CSS in relation to the parent window. However, this will not trigger update to the grid layout, which includes column size changes and layout of other elements that are contained in the gird. For this reason, you need to handle the window sizeChanged event and update the grid layout from code.
When all this is set, you can dynamically change the grid size whenever its parent window size changes or browser window is resized. This will follow with an auto-update of the grid layout accordingly.
Conclusion
To dynamically adjust the size to the Grid component, one way is to place the grid inside a Window component and handle changes to the window size to update the grid layout. In addition, you can also track changes to the size of custom HTML elements using the ResizeObserver object, which when happens you can update the size of child elements like the Grid.
A sample code that shows how to dynamically resize the grid component is available in vanilla JavaScript, Angular, React and Vue. The Grid component is part of IntegralUI Web.