This is a migrated thread and some comments may be shown as answers.

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

5 Answers 340 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Top Gun
Top achievements
Rank 1
Top Gun asked on 06 May 2011, 01:01 AM

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?



5 Answers, 1 is accepted

Sort by
0
Top Gun
Top achievements
Rank 1
answered on 06 May 2011, 01:02 AM
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>
0
Top Gun
Top achievements
Rank 1
answered on 06 May 2011, 01:04 AM
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);
       }


0
Milan
Telerik team
answered on 06 May 2011, 08:20 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Top Gun
Top achievements
Rank 1
answered on 06 May 2011, 07:06 PM
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>


0
Top Gun
Top achievements
Rank 1
answered on 08 May 2011, 04:35 PM
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

 

Tags
GridView
Asked by
Top Gun
Top achievements
Rank 1
Answers by
Top Gun
Top achievements
Rank 1
Milan
Telerik team
Share this question
or