Resize the grid in various dimension in EJ2 TypeScript Grid control

24 Jun 20245 minutes to read

The Syncfusion EJ2 TypeScript Grid control offers a friendly way to resize the grid, allowing you to adjust its width and height for improved data visualization.

To resize the grid externally, you can use an external button to modify the width of the parent element that contains the grid. This will effectively resize the grid along with its parent container.

The following example demonstrates how to resize the grid on external button click based on input.

import { Grid } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
import { NumericTextBox } from '@syncfusion/ej2-inputs';
import { Button } from '@syncfusion/ej2-buttons';

let grid: Grid = new Grid({
    dataSource: data,
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 90 },
        { field: 'CustomerID', headerText: 'Customer ID',  width: 120 },
        { field: 'ShipCountry', headerText: 'Ship Country', width: 100 },
        { field: 'Freight', headerText: 'Freight', width: 80 }
    ],
    height: '100%'
});
grid.appendTo('#Grid');

let widthsize: NumericTextBox = new NumericTextBox({
    min : 400,
    max : 650,
    placeholder : 400,
    step : 5,
    width : 120
});
widthsize.appendTo('#WidthTextBox');

let heightsize: NumericTextBox = new NumericTextBox({
    min : 200,
    max : 650,
    placeholder : 200,
    step : 5,
    width : 120
});
heightsize.appendTo('#HeightTextBox');

let button: Button = new Button({
     cssClass: 'e-outline',
});
button.appendTo('#resizeButton');

(document.getElementById('resizeButton') as HTMLElement).onclick = function () {
    let parentDiv = document.getElementById('parent');
    (parentDiv as HTMLElement).style.width = widthsize.element.value + 'px';
    (parentDiv as HTMLElement).style.height = heightsize.element.value + 'px';
};
<!DOCTYPE html>
<html lang="en">
<head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <label style="padding: 10px 5px 0 0">Enter the width: </label>
        <input id="WidthTextBox" type="text"/>
        <label style="padding: 10px 5px 0 0">Enter the height: </label>
        <input id="HeightTextBox" type="text"/>
        <button style="margin:5px 0 5px 5px" id="resizeButton">Resize</button>
        <div id="parent">
        <div id="Grid"  style="padding:5px 5px"></div>  
    </div>      
    </div>
</body>
</html>