We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to change the column stacking at runtime in StackedHeader of SfDataGrid?

Platform: WinRT |
Control: SfDataGrid

You can define more than one header for SfDataGrid using SfDataGrid.StackedHeaderRows and you can define the columns by setting StackedHeaderRows.StackedColumns. The columns in StackedHeaderRow are stacked or grouped based on the StackedColumn.ChildColumns property. The following code example has SfDataGrid defined with StackedHeaderRows.

XAML

<Syncfusion:SfDataGrid Name="SfdataGrid" 
                       AutoGenerateColumns="True"
                       ItemsSource="{Binding Employee}">
    <Syncfusion:SfDataGrid.StackedHeaderRows>
        <Syncfusion:StackedHeaderRow>
            <Syncfusion:StackedHeaderRow.StackedColumns>
                <Syncfusion:StackedColumn ChildColumns="EmployeeID,Name" HeaderText="Employee Details"/>
                <Syncfusion:StackedColumn ChildColumns="ContactID,Title" HeaderText="Contact details"/>
                <Syncfusion:StackedColumn ChildColumns="SickLeaveHours,Salary" HeaderText="Salary Details"/>
            </Syncfusion:StackedHeaderRow.StackedColumns>
        </Syncfusion:StackedHeaderRow>
    </Syncfusion:SfDataGrid.StackedHeaderRows>
</Syncfusion:SfDataGrid>

The following screenshot shows SfDataGrid with StackedHeaderRows.

stacked header rows in SfDataGrid

Figure 1: SfDataGrid with StackedHeaderRows

You can change the column stacking at runtime by setting the StackedColumns.ChildColumns property as shown in the following code example.

C#

private void AddinStackedHeaderRow_Click(object sender, RoutedEventArgs e)
{
    var childcolumn = this.SfdataGrid.StackedHeaderRows[0].StackedColumns[0].ChildColumns;
    this.SfdataGrid.StackedHeaderRows[0].StackedColumns[0].ChildColumns = childcolumn + "," + "BirthDate" + "," + "NationalIDNumber";
}

The following screenshot shows the output of the SfDataGrid with the newly updated ChildColumns to the already existing StackedColumn in StackedHeaderRows.

child columns in SfDataGrid

Figure 2: ChildColumns added to the existing StackedColumn

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile