question

MojtabaHakim-8125 avatar image
0 Votes"
MojtabaHakim-8125 asked HuiLiu-MSFT commented

How to add an editable tree datagrid in C# WPF

I'm using C# WPF and SQL Server Database DB first, I want to show data and edit them in Tree DataGrid , I could not find exactly what I was looking for on the internet

213784-048d8be6-4bbd-4c3a-a1a9-6e63827db145.png

How can I add this data grid model exactly like this gif in WPF?

213767-last.gif

Please introduce me a link or guide that I can find the way


dotnet-csharpwindows-wpfdotnet-wpf-xaml
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

49337269 avatar image
0 Votes"
49337269 Suspended answered MojtabaHakim-8125 commented

In most cases, the logical tree is a more useful representation of the elements in a WPF application. Although you do not modify the logical tree directly, this view of the application is useful for understanding property inheritance and event routing. Unlike the visual tree, the logical tree can represent non-visual data objects, such as ListItem. For more information on the logical tree, see Trees in WPF.

The VisualTreeHelper class provides methods for returning the bounding rectangle of visual objects. You can return the bounding rectangle of a visual object by calling GetContentBounds. You can return the bounding rectangle of all the descendants of a visual object, including the visual object itself, by calling GetDescendantBounds. The following code shows how you would calculate the bounding rectangle of a visual object and all its descendants.

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

I think I should use DataGrid in Datagrid by row detail

1 Vote 1 ·
HuiLiu-MSFT avatar image
1 Vote"
HuiLiu-MSFT answered HuiLiu-MSFT commented

Hi,@MojtabaHakim-8125 . Welcome Microsoft Q&A.
Yes, you could try to collapse and expand the details.
Xaml:

  <Window.DataContext>
         <local:ViewModel/>
     </Window.DataContext>
     <Grid>
         <DataGrid Name="dg1" AutoGenerateColumns="False" SelectionMode="Single" CanUserAddRows="false" 
                   CanUserDeleteRows="False" SelectionUnit="FullRow" ItemsSource="{Binding View}" >
             <DataGrid.CellStyle>
                 <Style TargetType="DataGridCell">
                     <Setter Property="BorderThickness" Value="0"/>
                 </Style>
             </DataGrid.CellStyle>
             <DataGrid.RowHeaderTemplate>
                 <DataTemplate>
                     <Expander Expanded="Expander_Expanded" Collapsed="Expander_Collapsed">
                     </Expander>
                 </DataTemplate>
             </DataGrid.RowHeaderTemplate>
             <DataGrid.Columns>
                 <DataGridTextColumn Header="ID" IsReadOnly="True" Width="100" Binding="{Binding ID}" />
                 <DataGridTextColumn Header="Name" IsReadOnly="True" Width="100" Binding="{Binding Name}" />
             </DataGrid.Columns>
             <DataGrid.RowDetailsTemplate>
                 <DataTemplate>
                     <DataGrid ItemsSource="{Binding Details}"  CanUserAddRows="True" AutoGenerateColumns="False"
                   CanUserDeleteRows="True"  >
                         <DataGrid.Columns>
                             <DataGridTextColumn Header="Age" IsReadOnly="True" Width="100" Binding="{Binding Title}" />
                             <DataGridTextColumn Header="Address" IsReadOnly="True" Width="100" Binding="{Binding Address}" />
                         </DataGrid.Columns>
                     </DataGrid>
                 </DataTemplate>
             </DataGrid.RowDetailsTemplate>
         </DataGrid>
     </Grid>

Codebehind:

214212-8.txt

Update:

  <DataGrid.RowDetailsTemplate>
                 <DataTemplate>
                     <DataGrid x:Name="dg" ItemsSource="{Binding Details}" Initialized="dg_Initialized"  >
                         <DataGrid.Columns>
                             <DataGridTextColumn Header="Age" IsReadOnly="True" Width="100" Binding="{Binding Title}" />
                             <DataGridTextColumn Header="Address" IsReadOnly="True" Width="100" Binding="{Binding Address}" />
                         </DataGrid.Columns>
                     </DataGrid>
                 </DataTemplate>
             </DataGrid.RowDetailsTemplate>

The codebehind:

  public IEnumerable<T> FindVisualChildren<T>(DependencyObject depObj) where T : DependencyObject
     {
       if (depObj != null)
       {
         for (int i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++)
         {
           DependencyObject child = VisualTreeHelper.GetChild(depObj, i);
    
           if (child != null && child is T)
             yield return (T)child;
    
           foreach (T childOfChild in FindVisualChildren<T>(child))
             yield return childOfChild;
         }
       }
     }
    
     private void dg_Initialized(object sender, System.EventArgs e)
     {
       foreach (var datagrid in FindVisualChildren<DataGrid>(this))
       {
         if (datagrid.Name == "dg")
         {
    
           datagrid.Columns[0].Header = "MyAge";
           datagrid.AutoGenerateColumns=false;
           datagrid.CanUserAddRows = true;
           datagrid. CanUserDeleteRows =true;
    
           TextBlock x = datagrid.Columns[0].GetCellContent(datagrid.Items[2]) as TextBlock;
           if (x != null)
             MessageBox.Show(x.Text);
         }
       }
     }

The result:
214109-image.png


If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.




image.png (16.9 KiB)
8.txt (2.9 KiB)
· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

thanks so much dear HuiLiu-MSFT

a littlie problem U
Why I can't access by name to row detail !
214454-2.png


0 Votes 0 ·
2.png (30.9 KiB)
HuiLiu-MSFT avatar image HuiLiu-MSFT MojtabaHakim-8125 ·

Hi,@ MojtabaHakim-8125. I updated my answer, you could check it out.

0 Votes 0 ·
HuiLiu-MSFT avatar image HuiLiu-MSFT MojtabaHakim-8125 ·

Hi,@MojtabaHakim-8125 . Is there some update to the question? Did the answer solve your problem? If so, you could accept it as the answer. It's helpful for community members with related questions.

0 Votes 0 ·
49337269 avatar image
1 Vote"
49337269 Suspended answered

<Window.DataContext>
<local:ViewModel/>
</Window.DataContext>
<Grid>
<DataGrid Name="dg1" AutoGenerateColumns="False" SelectionMode="Single" CanUserAddRows="false"
CanUserDeleteRows="False" SelectionUnit="FullRow" ItemsSource="{Binding View}" >
<DataGrid.CellStyle>
<Style TargetType="DataGridCell">
<Setter Property="BorderThickness" Value="0"/>
</Style>
</DataGrid.CellStyle>
<DataGrid.RowHeaderTemplate>
<DataTemplate>
<Expander Expanded="Expander_Expanded" Collapsed="Expander_Collapsed">
</Expander>
</DataTemplate>
</DataGrid.RowHeaderTemplate>
<DataGrid.Columns>
<DataGridTextColumn Header="ID" IsReadOnly="True" Width="100" Binding="{Binding ID}" />
<DataGridTextColumn Header="Name" IsReadOnly="True" Width="100" Binding="{Binding Name}" />
</DataGrid.Columns>
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<DataGrid ItemsSource="{Binding Details}" CanUserAddRows="True" AutoGenerateColumns="False"
CanUserDeleteRows="True" >
<DataGrid.Columns>
<DataGridTextColumn Header="Age" IsReadOnly="True" Width="100" Binding="{Binding Title}" />
<DataGridTextColumn Header="Address" IsReadOnly="True" Width="100" Binding="{Binding Address}" />
</DataGrid.Columns>
</DataGrid>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
</DataGrid>
</Grid>

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

75549503 avatar image
0 Votes"
75549503 answered

I think I should use DataGrid in Datagrid as per row details

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.