1. Home
  2. Forum
  3. Blazor
  4. Fix the header columns in Grid and full scroll on Sidebar

Fix the header columns in Grid and full scroll on Sidebar

Is there a way to sticky the header columns while vertically scrolling through the Grid?

I found the suggested solution mentioned here:

SfGrid - How to freeze headers upon scroll | Blazor Forums | Syncfusion

The solution does not work for me.

But my MainLayout razor page isn't the generic one and I have a SfSidebar with fixed top navbar as shown in the attached file. Is there a workaround for such a situation?


Also, I am noticing that on the SfSidebar, when I open all the SfTreeView elements, the scroll for the Sidebar does not cover all the child elements.


Attachment: BlazorAppTest_1317ad97.zip

4 Replies 1 reply marked as answer
MS Monisha Saravanan Syncfusion Team February 23, 2022 02:02 PM UTC

Hi Nick, 

Greetings from Syncfusion support. 

Query: “Is there a way to sticky the header columns while vertically scrolling through the Grid?” 
 
We have anlayzed your query and made changes in the provided sample to achieve your requirement. The reported issue occur due to below styles applied to Grid parent element. Kindly check the attached code snippet and sample for your reference. 

Kindly follow the below steps to achieve sticky header. 

  1. Include the below styles in the Index.Razor page

[index.razor] 
<style> 
    .e-sidebar-context{ 
        overflow-x: unset; 
    } 
    .e-grid .e-gridheader { 
        position: -webkit-sticky; 
        position: sticky; 
        top: 56px; 
        z-index: 1; 
    } 
 
    .sf-license-warning { 
        display: none; 
    } 
</style> 

  1. Comment out the below lines in Mainlayout.razor

/* end of table ofcontent area styles */ 
    /* content area styles */ 
   /* #main-text.main-content { 
        overflow: hidden; 
    } 
*/ 


Kindly get back to us if you have further queries. 

Query: “I am noticing that on the SfSidebar, when I open all the SfTreeView elements, the scroll for the Sidebar does not cover all the child elements”    

We are currently validating this query at our end. We will update further details on (24.02.2022). Until then we appreciate your patience. 


Regards,              
Monisha 


MS Monisha Saravanan Syncfusion Team February 24, 2022 02:45 PM UTC

Hi Nick, 

Thanks for your patience.  
  
Query: “I am noticing that on the SfSidebar, when I open all the SfTreeView elements, the scroll for the Sidebar does not cover all the child elements”   

To resolve the query related to tree view kindly refer the below code snippet and include the changes on Mainlayout.razor page. 
   
<SfSidebar ID="sidebar1" HtmlAttributes="@HtmlAttribute" Width="290px" Target=".main-content" @ref="Sidebar" MediaQuery="(min-width:600px)"  
                   @bind-IsOpen="SidebarToggle" Type="SidebarType.Auto"EnableGestures="false">  
            <ChildContent>  
                <div class="main-menu">  
                    <div>  
                        <SfTreeView CssClass="main-treeview" @ref="TreeView"ExpandOn="@Expand" TValue="TreeData" FullRowNavigable="true">  
                            <TreeViewEvents TValue="TreeData"></TreeViewEvents>  
                            <TreeViewFieldsSettings Id="nodeId" Text="nodeText"IconCss="iconCss" DataSource="treedata" HasChildren="hasChild"  
                                                    ParentID="pid"NavigateUrl="navigateUrl">  
                            </TreeViewFieldsSettings>  
                        </SfTreeView>  
                    </div>  
                </div>  
            </ChildContent>  
        </SfSidebar>  
  
<style>  
  #sidebar1 {  
    height: calc(100vh - 50px);  
  }  
</style>  
  
  
Kindly get back to us if you have further queries. 
  
Regards,  
Monisha 


Marked as answer
BO Bogdan August 16, 2022 09:51 AM UTC

Hello

Could you please update the code sample for the latest versions of 20.2.43 and NET controls. 6.


I tried to do this but the app works differently from the original pattern.

I really care about the stationary menu bar for all subpages (while scrolling, the menu bar should be visible at the top of the screen all the time).


Regards

Bogdan


KG Keerthana Ganesan Syncfusion Team August 17, 2022 03:20 PM UTC

Hi Bogdan,


Welcome from Syncfusion support.


We have analyzed the query and we have made a solution file based on your requirement.NET6 with latest version(20.2.0.44).Kindly refer to the attached solution file for your reference.


Please get back to us if you have any further queries.


Regards,

Keerthana.


Attachment: BlazorTestApp_632da922.zip

Loader.
Up arrow icon