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
<
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
>
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);
}
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
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
>
<
Controls:GridViewToggleRowDetailsColumn
/>
<
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
>
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