Articles in this section
Category / Section

How to customize the Nested Grid style in the GridDataControl?

2 mins read

The GridDataControl provides support to customize the style for the nested grid by using QueryCellInfo event. The following screenshot illustrates the default appearance of the nested grid.

Figure 1: Default style of the Nested Grid

For customizing the styles of the nested grid, you can wire its QueryCellInfo event that is used to allow customization of each and every cell in the required format. You can wire the QueryCellInfo event for the child grid in the RecordExpanded event that gets triggered when the record is expanded.

Note: The QueryCellInfo event is invoked for each and every cell in the GridDataControl.

Refer to the following code example to wire the RecordExpanded event in the GridDataControl.

 

C#

public MainWindow()
{
    InitializeComponent();  
    //Wire  RecordExpaned event.
    this.grid.Model.Table.RecordExpanded += Table_RecordExpanded;
}

 

In the RecordExpanded event, you can access child models collection and wire the QueryCellInfo event of the child grid to customize the nested grid style. With the help of the ChildModels.TableProperties, you can also customize the entire child grid properties like DefaultHeaderRowHeight, AllowEdit, AllowDelete, etc.

The following code example illustrates how to wire the QueryCellInfo event and apply DefaultHeaderRowHeight for the child grid.

 

C#

void Table_RecordExpanded(object sender, Syncfusion.Windows.Controls.Grid.GridDataValueEventArgs<Syncfusion.Windows.Controls.Grid.GridDataRecord> e)
{
  //Here the QueryCellInfo event for the Nested Grid is accessed.
    e.Value.ChildModels[0].QueryCellInfo += MainWindow_QueryCellInfo;  
 //Here the Nested Grid's Row height is customized. 
   e.Value.ChildModels[0].TableProperties.DefaultHeaderRowHeight=50;
}

 

The following code example illustrates how to customize the style of Header Row and RowHeader for child grid in the QueryCellInfo event.

 

C#

void MainWindow_QueryCellInfo(object sender, Syncfusion.Windows.Controls.Grid.GridQueryCellInfoEventArgs e)
{          
    //Here the style of the NestedGrid's Header Row is customized (HeaderRow Row index starts from zero and column index starts from 1 if RowHeader exists.
    if(e.Style.RowIndex==0 && e.Style.ColumnIndex>0)
    {
        //Background color is customized for Header Row.
        e.Style.Background=Brushes.Pink;
        //FontSize is customized for Header Row.
        e.Style.Font.FontSize=20.0;
        //FontFamily is customized for Header Row. 
        e.Style.Font.FontFamily = new FontFamily("Segoe UI");                
    }
    //Here the style of the NestedGrid's RowHeader is customized.
    if(e.Style.ColumnIndex==0)
    {
        //Background color is customized for RowHeader.
        e.Style.Background=Brushes.Red;
    }                     
}

 

The above style has been applied to the child grid as shown in the following screenshot.

Figure 2: After customizing the Nested Grid’s Style

You can refer to the following sample link for customizing the nested grid style without applying the style of its parent grid.

Sample Link: StyleForNesedGrid_WPF

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