DataGrid vertical scroll bar

Question

Hello,I took Blazor example "ExpenseTracker.Server" (https://github.com/syncfusion/blazor-showcase-expense-tracker), and it has grid with only 11 row on the page /expense, by parameters (result on picture 1): Okay, but if I want to create fixed height of SfGrid and I want to show everything inside this fixed grid with scroll bar, then scroll bar does not appear, I use parameters (result on picture 2): Another solution would be for me, If I put height 100% and use StickyHeader, but it also does not work, header just goes up behind screen, when I am scrolling rows down (pic3): I have feeling, that it some how related to the fact, that grid is located inside body-container, but can't find solution. Thank you in advance!

Prathap Senthil · Answer

Hi Den, Based on your needs, we suggest using the following CSS customization to set the grid height according to your desired height. Please refer to the modified code snippet and screenshot below for your reference. TestGrid.Razor Index.css /*.e-gridcontent .e-content { overflow-y: hidden !important; }*/ Regards, Prathap Senthil

Den · Answer

Hi Prathap!Thank you, it solved the problem with fixed height. Could you also advice, what settings I need to change to achieve

Height="100%" EnableStickyHeader="true"

functionality?Best Regards,Den

Prathap Senthil · Answer

Based
on your requirements, when using the EnableStickyHeader set to true in the Grid
with customized themes, you need to customize the CSS styles to achieve your
desired result. Kindly refer to the code snippet and screenshot below for your
reference.

Index.css file 
  
  .e-grid .e-groupdroparea.e-sticky, .e-grid .e-toolbar.e-sticky, .e-grid .e-gridheader.e-sticky {
      position: fixed;
      top: 38px;
      z-index:10;
  }