We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Responsive datagrid

Thread ID:

Created:

Updated:

Platform:

Replies:

150872 Jan 22,2020 04:18 PM UTC Jan 27,2020 10:23 AM UTC Angular - EJ 2 5
loading
Tags: Grid
Gaylord Petit
Asked On January 22, 2020 04:18 PM UTC

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 [Syncfusion]
Replied On January 23, 2020 12:50 PM UTC

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. 



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

Regards, 
R.Dhivya 


Gaylord Petit
Replied On January 23, 2020 01:06 PM UTC

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 [Syncfusion]
Replied On January 24, 2020 06:43 AM UTC

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; 

 
 
By default we explained about detail template in below sample link. 
 
 
 
Please get back to us, if you need any further assistance. 
 
Regards, 
Prasanna Kumar N.S.V 
 


Gaylord Petit
Replied On January 24, 2020 08:11 AM UTC

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 [Syncfusion]
Replied On January 27, 2020 10:23 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon