Category / Section
How to make Grid Responsive on DOM layout changes?
1 min read
This Knowledge base explains how to make grid responsive on DOM layout changes.
Solution:
By default, the grid act responsive based on the browser layout changes not on the DOM layout changes. To make grid responsive on DOM layout changes, we can use the windowonresize method of ejGrid.
For example, we have placed the Grid inside the Splitter control and in the resize event of the Splitter control we have called windowonresize method to make the grid responsive.
The following code example explains that how the grid act responsive when the grid inside the splitter control.
Example:
1.Render the Grid control.
HTML
<style type="text/css" class="cssStyles">
.e-splitter .e-pane {
overflow: hidden !important;
}
</style>
<div id="Splitter">
<div style="height:100%">
<div id="FlatGrid"></div>
</div>
<div>
<div id="Pane"></div>
</div>
</div>
JavaScript
<script type="text/javascript">
$(function () {
$("#Splitter").ejSplitter({
height: 400,
width: "100%",
orientation: ej.Orientation.Horizontal,
properties: [{}, { paneSize: 80 }],
resize: "resize"
});
$("#FlatGrid").ejGrid({
// the datasource "window.gridData" is referred from jsondata.min.js
dataSource: window.gridData,
allowPaging: true,
isResponsive: true,
minWidth: 900,
allowScrolling: true,
scrollSettings: { width: "100%", height: "100%" },
columns: [
{ field: "OrderID", isPrimaryKey: true, headerText: "Order ID", width: 75 },
{ field: "CustomerID", headerText: 'Customer ID', width: 75 },
{ field: "EmployeeID", headerText: 'Employee ID', width: 75 },
{ field: "ShipCountry", headerText: 'Ship Country', width: 75 }
]
});
});
</script>
MVC
@{Html.EJ().Splitter("Splitter").Height("400").Width("100%").Orientation(Orientation.Horizontal).ClientSideEvents(eve => { eve.Resize("resize"); }).PaneProperties(
p =>
{
p.Add().ContentTemplate(
@<div class="splitdiv" style="height: 100%">
@(Html.EJ().Grid<object>("FlatGrid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowPaging()
.IsResponsive()
.AllowScrolling()
.MinWidth(900)
.ScrollSettings(scroll => { scroll.Width("100%").Height("100%"); })
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(75).Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();
col.Field("ShipCity").HeaderText("Ship City").TextAlign(TextAlign.Right).Width(75).Add();
}))
</div>);
p.Add().ContentTemplate(
@<div class="cont">
</div>).PaneSize("80");
}).Render();}
C#
using EJGrid.Models;
using System.Linq;
using System.Web.Mvc;
using System.Web.UI.WebControls;
using Syncfusion.Linq;
namespace EJGrid.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.datasource = OrderRepository.GetAllRecords().ToList();
return View();
}
}
}
ASPX
<style type="text/css" class="cssStyles">
.e-splitter .e-pane {
overflow: hidden !important;
}
</style>
<ej:Splitter ID="Splitter" Height="400" Width="100%" Orientation="Horizontal" runat="server" ClientSideOnResize="resize">
<ej:SplitPane>
<div style="height:100%;">
<ej:Grid ID="FlatGrid" runat="server" AllowPaging="True" AllowScrolling="True" IsResponsive="true" MinWidth="900">
<ScrollSettings Width="100%" Height="100%" />
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" Width="75" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" Width="75" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="75" />
<ej:Column Field="ShipCity" HeaderText="ShipCity" Width="75" />
</Columns>
</ej:Grid>
</div>
</ej:SplitPane>
<ej:SplitPane PaneSize="80">
<div></div>
</ej:SplitPane>
C#
using System;
using System.Linq;
using System.Web.UI;
using Syncfusion.Linq;
namespace WebApplication21
{
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.FlatGrid.DataSource = OrderRepository.GetAllRecords().ToList();
this.FlatGrid.DataBind();
}
}
}
ASP.NET CORE
<style type="text/css" class="cssStyles">
.e-splitter .e-pane {
overflow: hidden !important;
}
</style>
<ej-Splitter id="Splitter" height="400" width="100%" resize="resize" orientation="@Orientation.Horizontal">
<e-split-panes>
<e-split-pane>
<e-content-template>
<div style="height:100%">
<ej-grid id="FlatGrid" allow-paging="true" allow-scrolling="true" is-responsive="true" min-width="500" datasource="ViewBag.DataSource">
<e-scroll-settings height=@("100%") width=@("100%") />
<e-columns>
<e-column field="OrderID" header-text="Order ID" width="75" is-primary-key="true"></e-column>
<e-column field="CustomerID" header-text="Customer ID" width="75"></e-column>
<e-column field="EmployeeID" header-text="Employee ID" width="75"></e-column>
<e-column field="ShipCity" header-text="ShipCity" width="75"></e-column>
</e-columns>
</ej-grid>
</div>
</e-content-template>
</e-split-pane>
<e-split-pane pane-size="80">
<e-content-template>
<div class="cont">
</div>
</e-content-template>
</e-split-pane>
</e-split-panes>
</ej-Splitter>
C#
using System.Linq;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;
namespace WebApplication1.Controllers
{
public class HomeController : Controller
{
private NORTHWNDContext _context;
public HomeController(NORTHWNDContext context)
{
_context = context;
}
public IActionResult Index()
{
ViewBag.datasource = _context.Orders.ToList();
return View();
}
}
}
2. In the resize event of the Splitter control we have called the windowonresize method to make the grid responsive.
JS
<script type="text/javascript">
function resize(args) {
var grid = $("#FlatGrid").ejGrid("instance");
grid.windowonresize();
}
</script>
Angular
HTML
<ej-splitter id="Spliter" class="ang-splitter" height ="400" width="100%" [properties]="proper" enableAutoResize="true" [orientation]="orientation" (resize)="resize($event)"> <div style="height:100%"> <ej-grid id="Grid" #grid [dataSource]="gridData" [allowPaging]="true" [isResponsive]="true" [minWidth]="900" [allowScrolling]="true" [scrollSettings]="scrollSettings"> <e-columns> <e-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="75" textAlign="right"></e-column> <e-column field="CustomerID" headerText="Customer ID" width="75"></e-column> <e-column field="EmployeeID" headerText="Employee ID" width="75" textAlign="right"></e-column> <e-column field="ShipCity" headerText="ShipCity" width="75"></e-column> </e-columns> </ej-grid> </div> <div> <div > </div> </div> </ej-splitter>
TS
import {Component, ViewEncapsulation,ViewChild} from '@angular/core';
import {CommonModule} from "@angular/common";
import { EJComponents } from "ej-angular2/src/ej/core";
@Component({
selector: 'ej-app',
templateUrl: 'src/grid/grid.component.html',
})
export class GridComponent {
public gridData;
public scrollSettings;
proper:Array<{paneSize:string}>;
@ViewChild('grid') grid: EJComponents<any, any>;
constructor() {
//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.proper = [{paneSize:""}, {paneSize:"50%"}];
this.scrollSettings = { width: "100%", height: "100%" };
}
resize(e: any) {
this.grid.widget.windowonresize()
}
}
Result:
Figure 1.Initial rendering of Grid inside splitter
Figure 2.After resizing the splitter
