Grid isResponsive and enableResponsiveRow problem

[Roman Sznajder]

Hi Team,

I would like to turn on 

[isResponsive]="true" and [enableResponsiveRow]="true" but I get this error Can't bind to 'isResponsive' since it isn't a known property of 'ejs-grid'.

Can you help me pls?

[Aishwarya Rameshbabu]

Hi Roman Sznajder,

Greetings from Syncfusion support.

The error you are encountering is due to the fact that the properties isResponsive and enableResponsiveRow belong to the Syncfusion EJ1 Grid, and these properties are not supported in the Syncfusion EJ2 Grid.

In EJ2 Grid, to enable responsive behavior, you can use the following properties:

1. enableAdaptiveUI – Set this property to true to enable adaptive rendering for better responsiveness.
2. rowRenderingMode – Set this property to 'Vertical' if you want to display row data vertically on smaller screens.

For more detailed guidance on enabling adaptive UI in the Syncfusion EJ2 Grid, please refer to our official documentation:

Documentation Links:
Adaptive Layout-Documentation
Adaptive Layout-Live Demo
Getting started with EJ2 Grid

If you need any other assistance or have additional questions, please feel free to contact us.

Regards,

Aishwarya R

[Roman Sznajder]

Hi Team,

What I am doing wrong?

<ejs-grid #grid [dataSource]="data" enableAdaptiveUI="true" rowRenderingMode="Vertical"

        [allowPaging]="true" [pageSettings]='pageSettings' [allowSorting]="true" [sortSettings]="sortSettings">

      <e-columns>  

        <e-column field="id" headerText="id" width="10" textAlign="Center"></e-column>

        <e-column field="name" headerText="name" width="30" textAlign="Center"></e-column>

        <e-column field="age" headerText="age" width="10" textAlign="Center"></e-column>

        <e-column field="city" headerText="city" width="20"></e-column>    

      </e-columns>

</ejs-grid>

import { Component } from '@angular/core';

import { RouterOutlet } from '@angular/router';

import { GridModule, PageService, PageSettingsModel, ResizeService, SortService, SortSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({

  selector: 'app-root',

  imports: [RouterOutlet,GridModule],

  templateUrl: './app.component.html',

  styleUrl: './app.component.scss',

  providers: [PageService, ResizeService, SortService],

})

export class AppComponent {

  title = 'grid-test';

  data = [

    { id: 1, name: 'John Doe', age: 30, city: 'New York' },

    { id: 2, name: 'Jane Smith', age: 25, city: 'Los Angeles' },

    { id: 3, name: 'Michael Johnson', age: 35, city: 'Chicago' },

    { id: 4, name: 'Emily Davis', age: 28, city: 'Houston' },

    { id: 5, name: 'William Brown', age: 40, city: 'Phoenix' },]

  pageSettings: PageSettingsModel = { pageSize: 5 };

  sortSettings: SortSettingsModel = {

    columns: [{ field: 'name', direction: 'Ascending' }]

  };

}

Thanks for any help.

[Aishwarya Rameshbabu]

Hi Roman Sznajder,

To ensure that the Syncfusion Angular Grid displays rows in a vertical layout when the rowRenderingMode is set to "Vertical," it is essential to include the e-bigger class within the parent container of the Grid. This specific class facilitates the adaptive layout and ensures accurate vertical row rendering functionality.

For further information, kindly refer to the updated sample, accompanying screenshot, and the related documentation provided below:

<div class="control-section e-bigger">

    <ejs-grid #grid [dataSource]="data" enableAdaptiveUI="true" rowRenderingMode="Vertical" [allowPaging]="true"

        [pageSettings]='pageSettings' [allowSorting]="true" [sortSettings]="sortSettings">

        <e-columns>
            ………………….

        </e-columns>

    </ejs-grid>

</div>

 

 

Sample: https://stackblitz.com/edit/angular-zb8dcyq3-dbfc3ksp?file=src%2Fapp.component.html,src%2Fapp.component.ts

Screenshot:

Documentation Link: Render-adaptive-dialogs

Regards,

Aishwarya R

[Roman Sznajder]

Hi  Aishwarya,

Is tailwind.css necessary for displaying vertical rows or I can do it with bootstrap too?

If yes which css file from bootstrap because I use only grid.css.

Thanks for help

Roman Sz.

[Aishwarya Rameshbabu]

Hi Roman Sznajder,

You can achieve vertical rows in the Syncfusion Angular Grid using Bootstrap as well. However, since you are currently using only grid.css from Bootstrap, some essential styles required for proper alignment and layout may not be included.

To ensure seamless integration and consistency with Bootstrap’s design system, we recommend using Syncfusion’s Bootstrap theme. This theme is specifically designed to maintain compatibility with Bootstrap components while providing a consistent and well-structured appearance for the Syncfusion Grid.

You can refer the themes using the CDN link below or by importing them from the node_modules.

Index.html

 

<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/29.1.33/bootstrap5.css" rel="stylesheet"/> 

 

 

(or)

 app.component.css

@import 'node_modules/@syncfusion/ej2-angular-grids/styles/bootstrap5.css';

@import 'node_modules/@syncfusion/ej2-base/styles/bootstrap5.css';  

@import 'node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css';  

@import 'node_modules/@syncfusion/ej2-calendars/styles/bootstrap5.css';  

@import 'node_modules/@syncfusion/ej2-dropdowns/styles/bootstrap5.css';  

@import 'node_modules/@syncfusion/ej2-inputs/styles/bootstrap5.css';  

@import 'node_modules/@syncfusion/ej2-navigations/styles/bootstrap5.css';

@import 'node_modules/@syncfusion/ej2-popups/styles/bootstrap5.css';

@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/bootstrap5.css';

@import 'node_modules/@syncfusion/ej2-notifications/styles/bootstrap5.css';

 

Bootstrap Grid sample: Kheyc2w2 (forked) - StackBlitz

For more detailed guidance on using Syncfusion themes, please refer to the official documentation:

Documentation Links:
Adding-css-reference

Themes in Angular | Syncfusion

Regards,

Aishwarya R