Grid Main Header and button on grid column

[Ben Junior]

Does  the SfGrid has a Main Header (not column header) property? Please see the attached picture. I searched for but only found "How to hide grid Header" nothing else. 

Also, I use the ContextMenu that pops when user right click on the row, but I would like to know if it is possible to fire it using a button in a grid column?  And if does if you can provide an example.

Thanks

Attachment: GridHeader_5c302e4f.zip

[Vignesh Natarajan]

Hi Ben,  

 

Greetings from Syncfusion support.  

 

Query: “the SfGrid has a Main Header (not column header) property?”  

 

We suggest you to achieve your requirement using Stacked Header feature of the Grid. Kindly refer the below code example for your reference 

 

<SfGrid DataSource="@Orders" AllowResizing="true" AllowPaging="true"> 

    <GridPageSettings PageSizes="true"></GridPageSettings> 

    <GridColumns> 

        <GridColumn HeaderText="All Registered Users" TextAlign="TextAlign.Center"> 

            <GridColumns> 

                <GridColumn Width="120"> 

                    <Template> 

                        @{ 

                            var employee = (context as Order); 

                            <SfDropDownButton Content="Options"> 

                                <DropDownMenuItems> 

                                    <DropDownMenuItem Text="Cut"></DropDownMenuItem> 

                                    <DropDownMenuItem Text="Copy"></DropDownMenuItem> 

                                    <DropDownMenuItem Text="Paste"></DropDownMenuItem> 

                                </DropDownMenuItems> 

                            </SfDropDownButton> 

                        } 

                    </Template> 

                </GridColumn> 

                <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

                <GridColumn Field=@nameof(Order.OrderDate) Width="130" HeaderText="Order Date" Format="d" TextAlign="TextAlign.Right" MinWidth="10" AllowResizing=false></GridColumn> 

                <GridColumn Field=@nameof(Order.Freight) Width="135" HeaderText="Freight($)" Format="C2" TextAlign="TextAlign.Right" MinWidth="10"></GridColumn> 

            </GridColumns> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

 

 

Instead of default ContextMenu, we suggest you to render DropDownMenu control in Grid Column using Column Template feature and perform your action in it. 

 

Refer the below screenshot for the output 

 

 

   

For your convenience we have prepared a sample which can be downloaded from below  

 

Sample:  https://www.syncfusion.com/downloads/support/forum/156230/ze/BlazorApp1-514789250  

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/columns/#column-template 

https://blazor.syncfusion.com/documentation/drop-down-menu/getting-started/  

 

Kindly get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan