Grid vertical row problem

[Roman Sznajder]

Hi Team,

I created a small sample project where I try to display vertical rows on a small screen.  The current CSS file weighs 1.5MB and I would like to have css as small as possible. What should I add to the project to achieve it? How to switch programmatically from horizontal to vertical rows?

Attachment: gridtest_cc8ae6c.zip

[Sivaranjani Rajasekaran]

Hi Roman Sznajder,

 

Greetings from Syncfusion support!

 

To reduce the CSS file size in your Syncfusion Angular Grid project and enable vertical row rendering for small screens, please consider the following approaches:

 

Use Theme Studio to Generate Custom Minified CSS:

• Create custom themes for only the components you're using

• Generate minified CSS files containing only necessary styles

 

Referencing Only Dependent Styles (Individual CSS Files):

 

Instead of importing the entire Syncfusion theme CSS, you can import only the styles required for the components you're using. This helps reduce bundle size and improve performance, especially when you're using a few components like Grid, DropDownList, etc.

 

https://ej2.syncfusion.com/angular/documentation/grid/getting-started#adding-css-reference

Note : The Syncfusion Grid has internal dependencies on other components like Buttons, Popups, Navigations, Inputs, etc. So it's important to include only the required ones based on your usage (e.g., if you use filtering , include DropDowns ).

 

For more information please visit documentation Link :

1. Custom css :  https://ej2.syncfusion.com/angular/documentation/common/how-to/custom-css

2. Customized Theme : https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio#download-the-customized-theme

 

Query : Switching from Horizontal to Vertical Rows

To programmatically switch between horizontal and vertical row layouts for small screens, you can use the rowRenderingMode property of the Grid and set its value to "Horizontal"

 

 

Code Example :

 

(this.gridInstance as GridComponent).rowRenderingMode = "Horizontal"

 

We already have documentation available on this topic. Please refer to the links below for more information

 

Sample Link : https://stackblitz.com/edit/angular-3mec7fqq?file=src%2Fapp.component.ts

 

Documentation Link : https://ej2.syncfusion.com/angular/documentation/grid/adaptive#vertical-row-rendering

 

Feel free to get back to us if you need any further assistance.

 

Regards,

Sivaranjani R

[Roman Sznajder]

Hi  Sivaranjani,

In my sample project I exactly did what you mentioned in your response. I added these styles:

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

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

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

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

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

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

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

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

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

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

I added missing @import after comparing to your solution

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

but vertical rows still don't work. For this last css file there is bootstrap5.3-lite.css missing. I am using version 29.

What should I add more to make it working for bootstrap5.3-lite.css?

When I change all css files to bootstrap5.3.css vertical rows work as expected, so thank you for help.

[Sivaranjani Rajasekaran]

Hi Roman Sznajder,

Sorry for the inconvenience caused.

We would like to inform you that the Syncfusion Bootstrap 5.3 Lite theme does not include the e-bigger styles, which are essential for adaptive layout functionality. This is the intended behavior of the Lite theme.

If you require support for adaptive layout, we recommend using the Bootstrap 5.3 theme instead of the Lite version.

Please find the sample attached for your reference.

Let us know if you need any further assistance.

Attachment: gridtest_Modified_f69da6f5.zip