Hello,
See below code. I need help with the following 2 items:
1. In ControlTemplate the RadGridView has IsReadyOnly=true but for "Select" column (checkbox) I want the IsReadOnly=false
2. AllowMultipleSelection="True" for the Combobox but the DisplayMemberPath is not showing the multiple names selected (from the ControlTemplate)
===========================================================================================================
<UserControl x:Class="DropDownWithHeaders.Example"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
mc:Ignorable="d"
DataContext="{StaticResource ViewModel}"
d:DesignHeight="300" d:DesignWidth="300">
<StackPanel>
<StackPanel Margin="10">
<TextBlock Text="NonEditable ComboBox" />
<telerik:RadComboBox x:Name="nonEditableCombo"
MinWidth="300"
HorizontalAlignment="Left"
ItemsSource="{Binding Materials}"
NonEditableTemplate="{StaticResource NonEditableComboBox}"
DisplayMemberPath="Name"
VerticalAlignment="Top"
StaysOpenOnEdit="True"
AllowMultipleSelection="True"
SelectedItem="{Binding SelectedMaterial, Mode=TwoWay}">
</telerik:RadComboBox>
</StackPanel>
</StackPanel>
</UserControl>
===========================================================================================================
<ControlTemplate x:Key="NonEditableComboBox" TargetType="telerik:RadComboBox">
<Grid x:Name="VisualRoot">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DropDownIcon" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.5"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIcon" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonIconForeground_Disabled}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIcon" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonIconBackground_Disabled}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonChrome" Storyboard.TargetProperty="RenderEnabled">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<sys:Boolean>False</sys:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ButtonChrome" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.6"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledBorder" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonChrome" Storyboard.TargetProperty="RenderMouseOver">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<sys:Boolean>True</sys:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIcon" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonIconForeground_MouseOver}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIcon" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonIconBackground_MouseOver}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="DropDownOpen">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIcon" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonIconForeground_Pressed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIcon" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonIconBackground_Pressed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border IsHitTestVisible="False" Background="{TemplateBinding Background}" CornerRadius="{StaticResource SplitButton_SpanCornerRadius}"/>
<telerik:RadToggleButton x:Name="PART_DropDownButton" Foreground="{TemplateBinding Foreground}" IsTabStop="False" Margin="0" Padding="0" ClickMode="Press">
<telerik:RadToggleButton.Template>
<ControlTemplate TargetType="telerik:RadToggleButton">
<ContentPresenter/>
</ControlTemplate>
</telerik:RadToggleButton.Template>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border x:Name="DisabledBorder"
IsHitTestVisible="False"
BorderBrush="{StaticResource ControlOuterBorder_Disabled}"
BorderThickness="{TemplateBinding BorderThickness}"
Opacity="0"
CornerRadius="{StaticResource SplitButton_SpanCornerRadius}"
Grid.ColumnSpan="2"/>
<telerikChromes:ButtonChrome x:Name="ButtonChrome"
Grid.ColumnSpan="2"
CornerRadius="{StaticResource SplitButton_SpanCornerRadius}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
RenderPressed="{TemplateBinding IsDropDownOpen}"
RenderFocused="{TemplateBinding IsFocused}"
RenderEnabled="{TemplateBinding IsEnabled}"
RenderMouseOver="{TemplateBinding IsMouseOver}"/>
<Border Grid.ColumnSpan="2"
Background="{TemplateBinding Background}"
IsHitTestVisible="False"
CornerRadius="{StaticResource SplitButton_SpanCornerRadius}"
Margin="1"/>
<ContentControl x:Name="DropDownIcon"
Grid.Column="1"
IsTabStop="False"
Foreground="{StaticResource ButtonIconForeground_Normal}"
Background="{StaticResource ButtonIconBackground_Normal}"
Template="{StaticResource ArrowTemplateNonEditableCombobox}"/>
<ContentPresenter x:Name="Content"
Grid.Column="0"
Margin="{TemplateBinding Padding}"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</telerik:RadToggleButton>
<Popup x:Name="PART_Popup">
<Grid x:Name="PopupRoot">
<Border
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
MinWidth="{TemplateBinding MinDropDownWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}"
Background="{StaticResource PickerPopupBackground}"
CornerRadius="{StaticResource SplitButton_SpanCornerRadius}"
x:Name="PART_ResizeBorder">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<telerik:RadButton x:Name="PART_ClearButton"
Grid.Row="0"
Margin="-1 -1 -1 0"
Visibility="{TemplateBinding ClearSelectionButtonVisibility}"
Content="{TemplateBinding ClearSelectionButtonContent}"/>
<ScrollViewer x:Name="PART_ScrollViewer"
Grid.Row="1"
Foreground="{TemplateBinding Foreground}"
Padding="0 1 0 0"
BorderThickness="0"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
CanContentScroll="True">
<!--<ItemsPresenter/>-->
<telerik:RadGridView ItemsSource="{Binding ItemsSource, RelativeSource={RelativeSource TemplatedParent}}"
RowIndicatorVisibility="Collapsed"
EnableLostFocusSelectedState="False"
SelectedItem="{Binding SelectedItem, RelativeSource={RelativeSource TemplatedParent}}"
ShowGroupPanel="False" IsFilteringAllowed="False" IsReadOnly="False"
DataLoaded="RadGridView_DataLoaded" />
</ScrollViewer>
</Grid>
</Border>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
private void RadGridView_DataLoaded(object sender, EventArgs e)
{
var radGridViewobj = (sender as RadGridView);
List<string> colNames = new List<string>();
foreach(Telerik.Windows.Controls.GridViewColumn column in radGridViewobj.Columns)
{
if (column is GridViewDataColumn)
{
var currentCol = column as GridViewDataColumn;
if (currentCol.DataType.Equals(typeof(bool)))
currentCol.IsReadOnly = false;
}
}
}
===========================================================================================================
public class ViewModel: ViewModelBase
{
public ObservableCollection<Material> Materials { get; set; }
public ViewModel()
{
this.Materials = new ObservableCollection<Material>
{
new Material { Select=false, Id = 1, Name = "Item 1", Type = "Material Type 1", Description="Description 1" },
new Material { Select=true, Id = 2, Name = "Item 2", Type = "Material Type 2", Description="Description 2" },
new Material { Select=true, Id = 3, Name = "Item 3", Type = "Material Type 3", Description="Description 3" },
new Material { Select=false, Id = 4, Name = "Item 4", Type = "Material Type 4", Description="Description 4" },
new Material { Select=true, Id = 5, Name = "Item 5", Type = "Material Type 5", Description="Description 5" },
};
}
private Material selectedMaterial;
public Material SelectedMaterial
{
get
{
return this.selectedMaterial;
}
set
{
if (this.selectedMaterial != value)
{
this.selectedMaterial = value;
this.OnPropertyChanged(() => this.SelectedMaterial);
}
}
}
}
===========================================================================================================
public class Material
{
public bool Select { get; set; }
public int Id { get; set; }
public string Name { get; set; }
public string Type { get; set; }
public string Description { get; set; }
}
===========================================================================================================
Thanks,
Sri
10 Answers, 1 is accepted
Thank you for the code provided.
I will address both your questions in the same order.
1. If the IsReadOnly property of RadGridView is set to True, it would be expected that setting the IsReadOnly of a given column would not make any difference. All columns would be marked as readonly as this setting is applied on control level. What I can suggest you as an alternative approach, is to set the IsReadOnly to all columns with the needed value.
2. There is no out-of-the-box mechanism to synchronize the selected items of RadGridView and RadComboBox. What might be a possible solution would be to implement an attached behavior to handle the case. Binding the selected items of the two controls is demonstrated in the following two examples:
- RadGridView: Binging Selected Items from View Model
- RadComboBox: Selected Items Binding
I hope this helps.
Regards,
Stefan
Progress Telerik
Rank 1
Stefan, Thanks for your response.
You suggested an alternative approach "to set the IsReadOnly to all columns with the needed value." but as you see in the code example the columns are binded dynamically from a POCO class (e.g: Material). So how to set the IsReadOnly value?
I might be missing something, but you should be able to achieve this through the approach you have already used. In the DataLoaded event handler you can check the type of the given column and set its IsReadOnly property based on it. Can you please clarify what is the obstacle to using such an approach?
Regards,
Stefan
Progress Telerik
Rank 1
Stefan,
The approach I tried using DataLoaded event handler is not applying the IsReadOnly value set based on the given column. The IsReadOnly="True" was set in the XAML and it seems like that value was not being overwritten by the value set in DataLoaded event. Can you try this example code I sent and let me know? Is there an alternate options?
Thanks,
Sri
Please, refer to my last but one post. I can confirm, that if RadGridView has its IsReadOnly set to True, you would not be able to set a particular column to not be readonly. When the IsReadOnly is set on control level, overriding its value on column level would not be possible. So, you will need to avoid setting the property to RadGridView and keep setting only to the columns of the control instead.
I hope this clarifies your concerns.
Regards,
Stefan
Progress Telerik
Rank 1
Got it, worked. Thanks
Another issue in relate to this same topic/example.. When I wanted to edit checkbox value (say OrderDelivered checkbox for Books in attached picture example) it's taking additional clicks to get to checkbox value edit. The numbers below are each number screenshot in the picture. Is there a setting in RadGridView to avoid the Click 2 and 3 below?
1. First click to open the combobox dropdown
2. Second click is highlighting (or selecting) the gridview row
3. Third click is highlighting (or selecting) the row cell
4. Forth click allowed to check/uncheck the checkbox value
Thanks,
Sri
I am happy to hear that the readonly functionality of the control is now working as expected. As to your inquiry regarding clicking the checkbox, please, take a look at the Number of clicks in GridViewCheckBoxColumn help article.
Hope it helps. Have a nice week, Sri.
Regards,
Stefan
Progress Telerik
Rank 1
Stefan,
Since the Bool datatype properties are binding to RadGridView (see code from beginning of this thread) the checkbox columns are treated as "GridViewDataColumn" hence unable to set AutoSelectOnEdit="True" but setting EditTriggers=GridView.GridViewEditTriggers.CellClick has reduced one click.
private void RadGridView_DataLoaded(object sender, EventArgs e)
{
var radGridViewobj = (sender as RadGridView);
List<string> colNames = new List<string>();
foreach (GridViewColumn column in radGridViewobj.Columns)
{
if (column is GridViewDataColumn)
{
var currentCol = column as GridViewDataColumn;
if (currentCol.DataType.Equals(typeof(bool)))
currentCol.IsReadOnly = false;
else
currentCol.IsReadOnly = true;
currentCol.EditTriggers = Telerik.Windows.Controls.GridView.GridViewEditTriggers.CellClick;
}
}
}
Let me know if you know of any other ideas. Thanks for pointing out to this article.
Another possible solution would be to benefit from the AutoGeneratingColumn event of the control. Please, take a look at the snippet below.
private void clubsGrid_AutoGeneratingColumn(object sender, GridViewAutoGeneratingColumnEventArgs e) { if (e.ItemPropertyInfo.PropertyType == typeof(bool)) { Binding binding = new Binding((e.Column as GridViewDataColumn).DataMemberBinding.Path.Path); GridViewCheckBoxColumn column = new GridViewCheckBoxColumn() { DataMemberBinding = binding}; column.AutoSelectOnEdit = true; column.EditTriggers = Telerik.Windows.Controls.GridView.GridViewEditTriggers.CellClick; e.Column = column; } }You can also take a look at the Column Events topic for further reference.
Hope this helps.
Regards,
Stefan
Progress Telerik
Rank 1