Responsiveness is an approach to shrink web pages based on
device width. This technique plays a key role in modern web applications to
help users view the most important parts of a web page and to simplify
interaction in different form factors. As per a Statista report, mobile
phone and tablet
users are increasing rapidly year by year. This report clearly shows that responsiveness
is going to be an important factor in developing web applications.
In web applications, a grid is a vital component for displaying
data in a tabular structure, but achieving responsiveness in a grid is cumbersome.
Fortunately, the Syncfusion Angular grid
component provides built-in responsive support.
Note: All the features
and information in this blog are applicable to our other Essential JS 2
frameworks for React, Vue, ASP.NET Core, ASP.NET MVC, and JavaScript.
In this blog, we are going to explain how to utilize the responsiveness
feature of the Angular grid. Before starting, you can download a starter grid
sample from this GitHub
repository and also check out this
overview blog.
Before starting
To download the sample from GitHub, use the following
command.
git clone https://github.com/SyncfusionSamples/ej2-angular-grid-simple.git cd ej2-angular-grid-simple
Once all the files are downloaded, you can install packages
related to Angular and the grid by using the following command.
npm install
Built-in responsive features
From the initial stage of development, we focused on giving
all features in the grid a responsive nature. The grid has many advanced
features such as sorting, paging, filtering, grouping, CRUD, virtual scrolling,
and more. These advanced features are responsive in nature and work very well on
different devices.
Angular grid on Desktop device
In the previous images, you can clearly see how the grid adapts
to different form factors. In desktop view, the grid adapts with a horizontal
layout and occupies the entire parent width along with the pager. In tablet
view, a horizontal scroll bar is provided to make the grid more readable, and the
pager’s design is changed to include previous and next buttons. The same occurs
for mobile view: the grid and its pager adapt to a small view. You can check out
the responsiveness of different features in our Angular grid by visiting our
grid demos on different devices.
Hiding columns based on browser width
In our responsive grid technique, one of the most commonly
used approaches is hiding columns based on browser width. For this, first we
have to mark priority for individual columns. After that, we need to define CSS
to hide columns in Media Queries. In
our Essential JS 2 grid, we have simplified this approach and introduced a new
property called hideAtMedia
which accepts Media Queriesonce the
given condition is satisfied. The grid will then hide the specified columns.
In the cloned demo application, we are going to define hideAtMedia with (min-width: 700px)forthe Freightcolumn as shown in the following file, grid.component.html.After that, if we resize the browser below 700 pixels, then the specified columns will be hidden.
<ejs-grid [dataSource]='data' [allowPaging]='true' [allowSorting]='true'[allowFiltering]='true' [allowGrouping]='true' [filterSettings]='filterSettings' [pageSettings]="pageSettings"><e-columns><e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column><e-column field='CustomerID' headerText='Customer ID' width=120></e-column><e-column field='Freight' textAlign='Right' format='c2' hideAtMedia='(min-width: 700px)' width=120></e-column><e-column field='CustomerName' headerText='Customer Name' hideAtMedia='(min-width: 500px)' width=120></e-column><e-column field='ShipCountry' headerText='Ship Country' width=120></e-column></e-columns></ejs-grid>
Grid in browser with width greater than 700 px
Grid in browser with width less than 700 px
Adapt within parent container
Sometimes we will have scenarios where we need to place the
entire grid inside a parent element without affecting its height and width; for
example, placing the grid inside a card component in dashboard applications. To
do this, we need to define the height
and width for the parent container
and then define the grid height and width as 100%. In the following code sample, we define the parent container
for app-grid in app.component.html.
Here we have defined widthand height as 100% in grid.component.html.
<ejs-grid [dataSource]='data' [allowPaging]='true' [allowSorting]='true' width='100%' height='100%' [allowFiltering]='true' [allowGrouping]='true' [filterSettings]='filterSettings' [pageSettings]="pageSettings"><e-columns><e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column><e-column field='CustomerID' headerText='Customer ID' width=120></e-column><e-column field='Freight' textAlign='Right' format='c2' hideAtMedia='(min-width: 700px)' width=120></e-column><e-column field='CustomerName' headerText='Customer Name' hideAtMedia='(min-width: 500px)' width=120></e-column><e-column field='ShipCountry' headerText='Ship Country' width=120></e-column></e-columns></ejs-grid>
After applying the parent container, the grid will adapt to
its container.
Grid within parent container
Summary
In this blog we looked at the built-in responsive features
and common responsive techniques in our Essential JS 2 grid component, such as
hiding columns based on browser width and adapting to fit a parent container. These
details will be helpful when developing an application with responsiveness in
mind. Also, you can check out the responsive behavior explained in this blog inour
GitHub repository, which is readily runnable.
Want to check out other features of our Angular grid? Visit the Angular grid component features page, the source in GitHub, other demos, and our documentation to explore more live samples of
its features and API.
If you have any questions, please let us know in the comments section below. You can also contact us through our support forum or Direct-Trac. We are happy to assist you!
If you like this blog post, we think you’ll also like the following free e-books:
- JavaScript Succinctly
- TypeScript Succinctly
- AngularJS Succinctly
- Angular 2 Succinctly
- React.js Succinctly