JavaScript (ES5)
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Responsive Columns in JavaScript (ES5) Grid control

08 May 2023 / 1 minute to read

You can toggle column visibility based on media queries which are defined at the hideAtMedia. The hideAtMedia accepts valid Media Queries. In the below sample, for OrderID column, hideAtMedia property value is set as (min-width: 700px) so that OrderID column will gets hidden when the browser screen width is lessthan 700px.

Source
Preview
index.js
index.html
Copied to clipboard
var grid = new ej.grids.Grid({
    dataSource: data,
    columns: [
        {
            field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right',
            hideAtMedia: '(min-width: 700px)'
        }, // column hides when browser screen width lessthan 700px;

        {
            field: 'CustomerID', headerText: 'Customer ID', width: 150,
            hideAtMedia: '(max-width: 500px)'
        }, // column shows when browser screen width lessthan or equalto 500px;

        {
            field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd',
            textAlign: 'Right', hideAtMedia: '(min-width:500px)'
        },// column hides when browser screensize lessthan 500px;

        { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' } // it always shown

    ],
    height: 315
});

grid.appendTo('#Grid');
Copied to clipboard
<!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="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-grids/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-calendars/styles/material.css" rel="stylesheet">
    
    
    
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div id="Grid"></div>        
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Previous
Next