Articles in this section
Category / Section

How to handle selection when loading GridControl inside another GridControl?

6 mins read

You can add the WPF GridControl to inside the grid cell by using grid.Model.CellModels.Add() method and set the CellType as CustomGrid for add new grid into needed cells of parent grid.

Refer the below code for your reference.

XAML

<Grid>
     <local:CustomGrid x:Name="child" Visibility="Visible" />
</Grid>

C#

//Add custom grid
grid.Model.CellModels.Add("CustomGrid", new CustomGridCellModel());
 
public class CustomGridCellModel : GridCellModel<CustomGridCellRenderer> { }
 
public class CustomGridCellRenderer : GridVirtualizingCellRenderer<UserControl1>
{
    public CustomGridCellRenderer()
    { }
    public override void CreateRendererElement(UserControl1 uiElement, GridRenderStyleInfo style)
    {
        if (this.GridControl.Tag != null)
        {
            var range = this.GridControl.Model.SelectedRanges;
            var grid = uiElement.child;
            if (range != null && range.AnyRangeContains(GridRangeInfo.Cell(style.CellIdentity.RowIndex, style.CellIdentity.ColumnIndex)))
            {
               if (grid.Model.SelectedRanges.Count == 0)
               {
                   grid.Model.SelectedRanges.Add(GridRangeInfo.Table());
                   grid.InvalidateCell(GridRangeInfo.Cell(0, 0));
               }
            }
            else
            {
               grid.Model.SelectedRanges.Clear();
               grid.InvalidateCells();
            }
        }
        base.CreateRendererElement(uiElement, style);
    }
}

 

 

The GridControl do not have the support to draw the selection on cell UIElements. Selection will be rendered on the cell then only UIElements are drawn in our GridControl. So, if you want to select the inner grid elements while selecting the parent row or top left cell, you can use the grid.Model.SelectionChanging event.

Refer the below code for your reference.

C#

grid.Model.SelectionChanging += Model_SelectionChanging;
 
private void Model_SelectionChanging(object sender, GridSelectionChangingEventArgs e)
{
    if (e.Reason == GridSelectionReason.MouseDown)
    {
       grid.Tag = e.Range;
       if (e.Range.Top != 0)
       {
          var currentCell = this.grid.CurrentCell;
          UIElement element;
          if (currentCell.RowIndex != e.Range.Top)
          {
              element = this.GetInnerElement(currentCell.RowIndex, 1);
              var userControl = element as UserControl1;
              if (userControl != null)
              {
                 userControl.child.Model.SelectedRanges.Clear();
                 userControl.child.InvalidateCells();
              }
          }
          element = this.GetInnerElement(e.Range.Top, 1);
          if (element != null)
          {
             var innerElement = element as UserControl1;
             if (innerElement != null)
             {
                innerElement.child.Model.SelectedRanges.Clear();
                innerElement.child.Model.SelectedRanges.Add(GridRangeInfo.Table());
                innerElement.child.InvalidateCells();
             }
           }
       }
    }
    else if (e.Reason == GridSelectionReason.Clear)
    {
       this.grid.Tag = null;
       var style = this.grid.Model[this.grid.CurrentCell.RowIndex, 1];
       var element = this.GetInnerElement(this.grid.CurrentCell.RowIndex, 1);
       if (element != null)
       {
           var innerElement = element as UserControl1;
           if (innerElement != null)
           {
              innerElement.child.Model.SelectedRanges.Clear();
              innerElement.child.InvalidateCells();
            }
        }
     }
}
private UIElement GetInnerElement(int rowIndex, int colIndex)
{
    var element = this.grid.GetCellUIElements(rowIndex, colIndex);
    if (element != null && element.UIElements.Count > 0)
    {
       var innerElement = element.UIElements[0];
       if (innerElement != null)
       {
           return innerElement;
        }
     }
     return null;
}

If you want to select the top left cell of inner grid while selecting the parent row or top left cell, you can override the OnQueryCellInfo method.

Refer the below code for your reference.

protected override void OnQueryCellInfo(GridQueryCellInfoEventArgs e)
{
    base.OnQueryCellInfo(e);
    if (this.Model.SelectedRanges.Count > 0 && e.Cell.RowIndex == 0 && e.Cell.ColumnIndex == 0)
    {
       e.Style.CellType = "Static";
       e.Style.Background = new SolidColorBrush(Color.FromRgb(132, 177, 213));
    }
}

The below image shows the selection for entire grid while clicking the top left of parent gridSelect the parent grid and inner grid while clicking top left of parent grid

The below image shows the selection for inner grid row while clicking the parent grid row

Select the parent grid row and inner grid row while clicking header row of parent grid

Sample: View sample in GitHub

Conclusion

I hope you enjoyed learning about how to handle selection when loading GridControl inside another GridControl.

You can refer to our  WPF GridControl feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF GridControl documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

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