Articles in this section
Category / Section

How to load a button in Header using HeaderTemplate in code-behind?

1 min read

Column headers in SfDataGrid can be customized by using the HeaderTemplate property of the GridColumn.

Refer the following code in which a button is loaded in the header using GridColumn.HeaderTemplate.


public MainPage()
    dataGrid.DefaultColumnWidth = 120;
    dataGrid.AutoGenerateColumns = false;
    GridTextColumn orderID_Column = new GridTextColumn()
        MappingName = "OrderID",
        HeaderTemplate = new DataTemplate(() =>
            Button header = new Button();
            header.Text = "ORDER ID";
            header.BackgroundColor = Color.Aqua;
            header.TextColor = Color.Black;
            return header;
    dataGrid.Columns.Add(new GridTextColumn() { MappingName = "EmployeeID" });
    dataGrid.Columns.Add(new GridTextColumn() { MappingName= "CustomerID" });
    dataGrid.Columns.Add(new GridTextColumn() { MappingName = "ShipCountry" });
    dataGrid.Columns.Add(new GridSwitchColumn() { MappingName = "IsClosed" });


When the above code is executed, the output is obtained as follows:



Sample Link:

How to load a button in Header using HeaderTemplate in code-behind?

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment