Grid with Height 100% ignores Custom Toolbar Height

[Marco Wollschläger]

Hello,

I need a grid with at calculated hight. For this, I have a div around the grid with a calc expression for the height and the grid height set to 100%.

The issue is that the e-gridcontent is larger than the grid should be and the reason is that the height on the e-gridcontent is set to "calc(100% - 44px);". This means that only the column-header (e-gridheader) is substracted and the height of my custom toolbar (via template) is getting ignored.

I tried setting the height on the toolbar directly but that did not do anything.

Can you please assist?

Best regards,

Marco

[Joseph Christ Nithin Issack]

Hi Marco,

Greetings from Syncfusion support.

Thank you for reaching out to us with your inquiry. We understand that you need assistance in resolving an issue you are facing with our grid. In order to provide an accurate and effective solution, we kindly ask that you provide us with the following information:

• Explain your exact requirement in detail.
• Complete grid rendering code
• A video demo of the requirement.
• A Simple sample you are using.
• Syncfusion package version you are using

This will enable us to fully understand the problem and provide you with the best possible solution. We apologize for any inconvenience this may cause and we are here to assist you every step of the way. Please let us know if there is anything else we can do to help.

Regards,

Joseph I.

[Marco Wollschläger]

Hi Joseph,

I'm using @syncfusion/ej2-angular-grids@20.4.44 and my requirement is very simple: I need the grid to scale with the size of the browser vh with exact measurements, not with percent values. An example would be: calc(100vh-256px)

That is all.

Currently I have a div around the grid that has my height setting and a grid with the height set to 100%. Like this:

<div style="height: calc(100vh - 256px)">
   <ejs-grid height="100%">
      [...] 
   </ejs-grid> 
</div>

This generally works with scaling the grid but my issue with this is, that when scrolling down the grid, it will cut off part of the last item. From what I can see when looking at the generated html code is that the generated e-gridcontent, that contains the grid rows, is extending over the actual grid height and therefore not fully visible. I suspect the issue is that I use a toolbar template like this:

<div style="height: calc(100vh - 256px)">
   <ejs-grid height="100%">
       <ng-template #toolbarTemplate let-data>
          [...]
       </ng-template>
       [...]
  </ejs-grid>
</div>

This toolbar's height seems to be ignored by generation of the e-gridcontent and therefore the incorrect height is applied. 

Here is an image of the generated html, where you can see the incorrect height:

For your reference in this example the height of my toobar is 43px and the height of e-gridheader is 42px with 1px border top and bottom (44px in total).

Hopefully this will help you understand my issue.

Best regards,

Marco

[Marco Wollschläger]

Hello,

do you have any update for me here?

Best regards,

Marco

[Suganya Gopinath]

Hi Marco,

Our team is working on the reported issue. We apologize as it is taking little more time than usual. Team will update the details by today. 

Regards,

Suganya Gopinath.

[Joseph Christ Nithin Issack]

Marco,

  We have validated your query, by preparing a sample from our side, but we were not able reproduce the issue from our side. Please refer the below sample and screenshot for your reference.

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

  Screenshot:

 

Here in this sample, the height of the toolbar is 42px and the header row is 44px, as you can see the content id `100%-86px`. If you still face the issue, kindly share the below details.

• Replicate the issue in the sample provided or share a simple issue replicating sample.
• Complete grid rendering code along with the code used for the toolbar.
• Video demo of the issue you are facing.

[Marco Wollschläger]

Hi Joseph,

I modified your example to match my implementation and I was able to reproduce the issue:
https://stackblitz.com/edit/angular-bdg2wa-jltmke?file=src/app.component.html

When you scroll down in the example, you will see that the last row is not completly visible as the gridcontent is too large.

Best regards,

Marco

[Joseph Christ Nithin Issack]

Marco,

   On inspecting the sample provided, we could see that you are rendering the grid inside a card component, when you render the grid in other components like card, dialog or tab, the grid contents height will ignore the height of the toolbar and pager in the grid. This is the reason for the reported behavior, we suggest you to add the toolbar height to the grids content element in the dataBound event of the EJ2 Grid.

 

[app.component.css]

.add-height {

  height: calc(100% - 84px) !important;

}

 

[app.component.ts]

 

dataBound() {

    (this.grid.element.querySelector('.e-gridcontent') as any).classList.add(

      'add-height'

    );

  }

 

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

[Marco Wollschläger]

Hi Joseph,

thank you for the response. I've implemented this though I feel this is more of a workaround than a solution. 

Do you consider this behavior to be a bug that will be fixed in a future version? From my point of view it should be because why should it not consider the toolbar hight in specific containers?

Best regards,

Marco

[Joseph Christ Nithin Issack]

Marco,

  We have confirmed the reported scenario as a usability improvement from our side and logged as “Grid's Content cropped when rendering with toolbar template inside a card component”. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and will include the defect fix in our patch release scheduled to be rolled out on 15^th March, 2023. We appreciate your patience until then.

You can now track the status of your request, review the proposed resolution timeline, and contact us for any further inquiries through the below link.

Feedback: https://www.syncfusion.com/feedback/41463/grids-content-cropped-when-rendering-with-toolbar-template-inside-a-card-component

Regards,

Joseph I.

[Joseph Christ Nithin Issack]

Marco,

   We are glad to announce that our Essential Javascript2 patch release (v20.4.54) has been rolled out successfully and in that release, we have added the fix for the issue - “Grid's Content cropped when rendering with toolbar template inside a card component”. So please update your packages to this version to include this fix.

Release Notes: https://ej2.syncfusion.com/angular/documentation/release-notes/20.4.53/?type=all#grid

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

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.