RadGridview - Hierarchical: Show the Expander “+” when needed

[Top Gun]

I have a hierarchical telerik gridview in Silverlight.  This Grid shows a list of people (person objects).  On the left most column, I have the expand button “+ sign.”   When I click the “+ sign” expand button, the row expands and I can see a list of classes for that selection.  Not all the rows need to expand (some have no list of classes).  Therefore I only want to see the “+ sign” on the rows that have classes/details.  How do I remove the expand button “+ sign” from the appropriate rows?

[Top Gun]

Xaml Grid Code

<Controls:RadGridView x:Name="PeopleGrid"  Margin="0"
                           RowIndicatorVisibility="Collapsed" IsReadOnly="True"
                           Width="748" MinHeight="386" MaxHeight="500"
                           AutoGenerateColumns="False"
                           VerticalAlignment="Top"
                           VerticalContentAlignment="Stretch"
                           HorizontalContentAlignment="Stretch"
                           HorizontalAlignment="Stretch"
                           >
          <Controls:RadGridView.Columns>
              <Controls:GridViewToggleRowDetailsColumn />
              <Controls:GridViewDataColumn Header="ID" DataMemberBinding="{Binding ID}" />
              <Controls:GridViewDataColumn Header="First Name" DataMemberBinding="{Binding FirstName}" />
              <Controls:GridViewDataColumn Header="Last Name" DataMemberBinding="{Binding LastName}" />
          </Controls:RadGridView.Columns>
          <telerik:RadGridView.RowDetailsTemplate>
              <DataTemplate>
                  <ItemsControl Name="ICClasses" ItemsSource="{Binding Path=ClassList, Mode=OneWay}">
                      <ItemsControl.ItemTemplate>
                          <DataTemplate>
                              <Border BorderBrush="DarkGray" BorderThickness="1" Margin="25,2,0,2" CornerRadius="5">
                                  <Grid HorizontalAlignment="Stretch" ShowGridLines="False" Background="Transparent" Margin="0,1,0,1">
                                      <Grid.ColumnDefinitions>
                                          <ColumnDefinition Width=".4*"/>
                                          <ColumnDefinition Width=".16*"/>
                                          <ColumnDefinition Width=".44*"/>
                                      </Grid.ColumnDefinitions>
                                      <Grid.RowDefinitions>
                                          <RowDefinition Height="*"/>
                                          <RowDefinition Height="*"/>
                                      </Grid.RowDefinitions>
                                      <TextBlock Grid.RowSpan="2" Text="{Binding Subject, Mode=OneWay}" Margin="0,0,40,0" VerticalAlignment="Center" HorizontalAlignment="Right"/>
                                      <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Professor, Mode=OneWay}" HorizontalAlignment="Center" Margin="0,1,0,0"/>
                                      <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Time, Mode=OneWay}" HorizontalAlignment="Center" Margin="0,1,0,0"/>
                                  </Grid>
                              </Border>
                          </DataTemplate>
                      </ItemsControl.ItemTemplate>
                  </ItemsControl>
              </DataTemplate>
          </telerik:RadGridView.RowDetailsTemplate>
      </Controls:RadGridView>

[Top Gun]

C# CodeBehind

public MainPage()
       {
           InitializeComponent();
           DataContext = this;
           People = new ObservableCollection<Person>(GetPeople());
           EnterClasses();
           PeopleGrid.ItemsSource = People;
       }
       private ObservableCollection<Person> _people;
       public ObservableCollection<Person> People
       {
           get { return _people; }
           set { _people = value; }
       }
       private List<Person> GetPeople()
       {
           var returnPeople = new List<Person>
                                  {
                                      new Person() {ID = "1234", FirstName = "John", LastName = "Berry"},
                                      new Person() {ID = "3512", FirstName = "Mary", LastName = "Edwards"},
                                      new Person() {ID = "1254", FirstName = "Henry", LastName = "Mas"},
                                      new Person() {ID = "0932", FirstName = "Terry", LastName = "Williams"},
                                      new Person() {ID = "3512", FirstName = "Beth", LastName = "Johnson"},
                                      new Person() {ID = "1254", FirstName = "Summer", LastName = "Sanford"}
                                  };
           return returnPeople;
       }
       private void EnterClasses()
       {
           var c1 = new ClassSubject()
                       {Professor = "Dr. John Dyer", Subject = "Biology", Time = "3PM - 4:30PM", UniqueId = "53913"};
           var c2 = new ClassSubject() { Professor = "Dr. George Berry", Subject = "Math", Time = "1PM - 2:00PM", UniqueId = "52973" };
           var classSchedule = new List<ClassSubject>
                                   {
                                       new ClassSubject() {Professor = "Dr. John Dyer", Subject = "Biology", Time = "3PM - 4:30PM", UniqueId = "53913"},
                                       new ClassSubject() {Professor = "Dr. Ron Maher", Subject = "Physics", Time = "3PM - 4:30PM", UniqueId = "53913"},
                                       new ClassSubject() {Professor = "Dr. George Berry", Subject = "Math", Time = "1PM - 2:00PM", UniqueId = "52973"}
                                   };
           var p1 = People[0];
           p1.ClassList = new ObservableCollection<ClassSubject>(classSchedule);
           var p2 = People[2];
           p2.ClassList = new ObservableCollection<ClassSubject>(classSchedule);
       }

[Milan]

Hi Top Gun,

The expand button's visibility is controlled by the IsExpandable property of its parent row. If this property is set to false the button will not be shown. 

This demon should give you a pretty good ideal about this approach. 

Best wishes,
Milan
the Telerik team

[Top Gun]

Yes, that was a good example.  This works but, I have a datagrid in the childs/details row.  I would like to click the expand button "+ sign" and see the ItemsControl.  (I do not want a datagrid on the expanded row.)  How do I put my original ItemsControl DataTemplate in the child row?

Datagrid in Xaml

<Controls:RadGridView x:Name="PeopleGrid"  Margin="0"
                             RowIndicatorVisibility="Collapsed" IsReadOnly="True"
                             Width="748" MinHeight="386" MaxHeight="500"
                             AutoGenerateColumns="False"
                             VerticalAlignment="Top"
                             VerticalContentAlignment="Stretch"
                             HorizontalContentAlignment="Stretch"
                             HorizontalAlignment="Stretch"
                             RowLoaded="PeopleGrid_RowLoaded"
                             >
            <Controls:RadGridView.Columns>
                <!--<telerik:GridViewToggleRowDetailsColumn Width="25" ExpandMode="Multiple"/>-->
                <Controls:GridViewDataColumn Header="ID" DataMemberBinding="{Binding ID}" />
                <Controls:GridViewDataColumn Header="First Name" DataMemberBinding="{Binding FirstName}" />
                <Controls:GridViewDataColumn Header="Last Name" DataMemberBinding="{Binding LastName}" />
            </Controls:RadGridView.Columns>
            <telerik:RadGridView.ChildTableDefinitions>
                <telerik:GridViewTableDefinition>
                    <telerik:GridViewTableDefinition.Relation>
                        <telerik:PropertyRelation ParentPropertyName="ClassList"/>
                    </telerik:GridViewTableDefinition.Relation>
                </telerik:GridViewTableDefinition>
            </telerik:RadGridView.ChildTableDefinitions>
            <!--Template needed In the Child Row -->
            <!--<telerik:RadGridView.RowDetailsTemplate>
                <DataTemplate>
                    <ItemsControl Name="ICClasses" ItemsSource="{Binding Path=ClassList, Mode=OneWay}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Border BorderBrush="DarkGray" BorderThickness="1" Margin="25,2,0,2" CornerRadius="5">
                                    <Grid HorizontalAlignment="Stretch" ShowGridLines="False" Background="Transparent" Margin="0,1,0,1">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width=".4*"/>
                                            <ColumnDefinition Width=".16*"/>
                                            <ColumnDefinition Width=".44*"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="*"/>
                                            <RowDefinition Height="*"/>
                                        </Grid.RowDefinitions>
                                        <TextBlock Grid.RowSpan="2" Text="{Binding Subject, Mode=OneWay}" Margin="0,0,40,0" VerticalAlignment="Center" HorizontalAlignment="Right"/>
                                        <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Professor, Mode=OneWay}" HorizontalAlignment="Center" Margin="0,1,0,0"/>
                                        <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Time, Mode=OneWay}" HorizontalAlignment="Center" Margin="0,1,0,0"/>
                                    </Grid>
                                </Border>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </DataTemplate>
            </telerik:RadGridView.RowDetailsTemplate>-->
        </Controls:RadGridView>

[Top Gun]

Ok, I figured it out.   In my first example,  I created the expand/collapse buttons by placing the following code in my datagrid. 

<Controls:GridViewToggleRowDetailsColumn />

I replaced this  with code to allow the datagrid column hold a silverlight button in a datatemplate.  (See Below)

 

 

<Controls:GridViewDataColumn >
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <Button x:Name="btnToggle"  Content="+" Click="btnToggle_Click" Tag="Inner" Visibility="{Binding IsToggleBtnVisible}"/>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </Controls:GridViewDataColumn>

 

 

Now, using the visibility property on the button, I can control whether the user sees the Expand (+) or Collapse(-) button.  The button’s Visibility property is bound to the IsToggleBtnVisible property.  This is just a property I created in my person object.  In this case, IsToggleBtnVisible is set to Visibility.Visible when the person has classes and Visibility.Collapse otherwise.

 

 

In the code behind, I added code for the btnToggle_Click handler.  (See below)

private void btnToggle_Click(object sender, RoutedEventArgs e)
        {
            Button button = sender as Button;
            if (button != null)
            {
                button.Content = button.Content.ToString() == "+" ? "-" : "+";
            }

            DependencyObject dep = (DependencyObject)e.OriginalSource;
            while (dep != null && !(dep is GridViewRow))
            {
                dep = VisualTreeHelper.GetParent(dep);
            }

            if (dep != null && dep is GridViewRow)
            {
                GridViewRow row = (GridViewRow)dep;

                row.DetailsVisibility = row.DetailsVisibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible;

            }
        }

In the event handler, the correct button content is displayed (+) or (-).  Thus, the visibility of the childrow is set as needed.  That's it.

 

Another example can be found here.

 

http://forums.silverlight.net/forums/t/184157.aspx 

 

 

http://cid-1bf46693be07cfa6.skydrive.live.com/self.aspx/.Public/DGExpandCollapse.zip#resId/1BF46693BE07CFA6!167