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()
{
    InitializeComponent();
    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(orderID_Column);
    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:

$C:\Users\suhasini.suresh\AppData\Local\Microsoft\Windows\INetCacheContent.Word\Screenshot_20170212-234619.png$