Responsive datagrid

[Gaylord Petit]

Hello,

We need to reproduce the same thing as on the image uplaoded. When the screen size is reduced, the elements hide and can be seen by clicking on the + button.

How can we do this again with the datagrid of your solution.

thank you so much

Attachment: responsive_c6a36adc.zip

[Dhivya Rajendran]

Hi Gaylord, 

Greetings from Syncfusion support. 

We can achieve this requirement using hideAtMedia property. Using this property you can toggle column visibility based on media queries.  

We suspect your requirement is Initially render columns based screen resolution by enabling media query for each column. When the screen size is reduced, column will be hided based on media query and shown by externally again. For this case we can achieve using hideAtMedia property. Using this property you can toggle column visibility based on media queries.  

We have already explained responsive columns in below link. We assume this this helpful for you requirement. Please refer it. 

Link: https://ej2.syncfusion.com/angular/documentation/grid/columns/#responsive-columns 

Reference link: https://ej2.syncfusion.com/angular/documentation/api/grid/column/?no-cache=1#hideatmedia 

Please get back to us, if you need any further assistance. 

Regards, 

R.Dhivya 

[Gaylord Petit]

Hi,

It's not really what we want. 

We need exactly the same thing as on the image uploaded before.

We don't just want to hide columns like the documentation you sent us and that we had seen, but we want the columns to be hidden but can be visible by clicking on the + button (see image)

Did you understand my problem?

thanks in advance

[Prasanna Kumar Viswanathan]

Hi Gaylord, 

 

Sorry for the inconvenience caused. 

 

We have understood and achieved your requirement by using  detailTemplate property of EJ2 Grid.  Here we initially hide column details and displayed them by using the icon click ("+" click icon) . Once we click the icon content changed using this link as per your requirement . 

 

Please refer to the below code and sample link. 

 

[app.component.html] 

   

<ejs-grid #grid [dataSource]='data' id='Grid'> 

    <ng-template #detailTemplate let-data> 

      <table class="detailtable" width="100%"> 

           . . . 

      </table> 

    </ng-template> 

    <e-columns> 

      <e-column field='EmployeeID' headerText='Employee ID' width='125' textAlign='Right'></e-column> 

      <e-column field='FirstName' headerText='Name' width='120'></e-column> 

. . ..  

    </e-columns> 

  </ejs-grid> 

[app.component.css] 

 .e-grid .e-icon-grightarrow::before { 

          content: '\e823' !important;  

    } 

    .e-grid .e-icon-gdownarrow::before{ 

     content: '\e934' !important; 

} 

 

Sample link: https://stackblitz.com/edit/angular-cy1ams-znvwyr?file=app.component.ts 

 

By default we explained about detail template in below sample link. 

 

Link:  https://ej2.syncfusion.com/angular/demos/#/material/grid/detail-template 

 

Documentation Link: https://ej2.syncfusion.com/angular/documentation/api/grid/#detailtemplate 

 

Please get back to us, if you need any further assistance. 

 

Regards, 

Prasanna Kumar N.S.V 

 

[Gaylord Petit]

Hello,

Thank you very much for your answer. This is not quite what we want yet. The deployed part must not be visible by default and when resizing the page it must activate and as the page is reduced, the columns come to this place and therefore the table never needs the horizontal scroll.

Do you see what I mean?

I still put the html code of our grid in attachement.

Thanks again to you

Attachment: mydatagrid_1fd7c0cf.zip

[Prasanna Kumar Viswanathan]

Hi Gaylord, 

 

Sorry for the late reply. 

 

Based on your requirement that you need to display all the columns in Grid at the initial rendering. When the screen size is reduced you need to hide some of the columns and need to display the “+” button as the image uploaded. When you click on the “+” icon you need to view the hide column value details. 

 

We are sorry for the inconvenience that mentioned requirement is not feasible to achieved in the Grid UI.  We have responsive support in EJ2 Grid, but we unable to view the record values in vertical order and removes the horizontal scrolling for the Grid when we reduce the screen size.   

 

Regards, 

Prasanna Kumar N.S.V