How to make GridViewDataColumn with "IsReadOnly=true" copyable?

[Christophe]

Hello,

I need to have a gridview where I could be able to enter each text cell (a GridViewDataColumn) to copy the value to the clipboard.
But if I do that by settting  IsReadOnly=true, then I just can't select the text anymore...

I had a try with defining my own GridViewDataColumn by setting the celltemplate to a simple silverlight textbox with "IsReadOnly = true", and then it works, but it is looking ugly....

Any chance for a simple solution ? (without templating, etc...)

Thank a lot,
Christophe

[Dimitrina]

Hi Christophe,

 You could use the Copy/Paste functionality of the GridView. When SelectionUnit is Cell the grid will paste and copy only selected cells. Here you can find more information about this feature. 

I hope that this is helpful.

All the best,
Didie
the Telerik team

[Christophe]

Hello Didie,

Thank you for your answer, but this is not exactly satisfactory.... (I need to be able to select by row to use the selecteditem property as a valid row)

Here is what I did in between (but looking for a better solution):
I created a GridViewDataColumn with the follwing celltemplate:

<telerik:GridViewDataColumn Header="Author" DataMemberBinding="{Binding DisplayName, Mode=OneWay}" >
    <telerik:GridViewDataColumn.CellTemplate>
        <DataTemplate>
             <TextBox Text="{Binding DisplayName}" Style="{StaticResource TextBoxStyle1}"></TextBox>
         </DataTemplate>
    </telerik:GridViewDataColumn.CellTemplate>
</telerik:GridViewDataColumn>

And here is the style:

<Style x:Key="TextBoxStyle1" TargetType="TextBox">
    <Setter Property="IsReadOnly" Value="True"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="#FF000000"/>
    <Setter Property="Padding" Value="2"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TextBox">
                <Grid x:Name="RootElement">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimation Duration="0" To="#FF99C1E2" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="MouseOverBorder"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="ReadOnly">
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                            </VisualState>
                            <VisualState x:Name="Unfocused">
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ValidationStates">
                            <VisualState x:Name="Valid"/>
                            <VisualState x:Name="InvalidUnfocused">
                            </VisualState>
                            <VisualState x:Name="InvalidFocused">
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="1" Opacity="1">
                        <Grid>
                            <Border x:Name="MouseOverBorder" BorderBrush="Transparent" BorderThickness="1">
                                <ScrollViewer x:Name="ContentElement" BorderThickness="0" IsTabStop="False" Padding="{TemplateBinding Padding}"/>
                            </Border>
                        </Grid>
                    </Border>
                    <Border x:Name="DisabledVisualElement" BorderBrush="#A5F7F7F7" BorderThickness="{TemplateBinding BorderThickness}" Background="#A5F7F7F7" IsHitTestVisible="False" Opacity="0"/>
                    <Border x:Name="FocusVisualElement" BorderBrush="#FF6DBDD1" BorderThickness="{TemplateBinding BorderThickness}" IsHitTestVisible="False" Margin="1" Opacity="0"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

But I would like to get rid of the verbose celltemplate (as I have multiple columns, it is annoying to have to repeat the binding to the  ) declaration within a GridViewDataColumn. I was imagining using the cellstyle property on the GridViewDataColumn , but 'till now, I could not find the solution.

Any idea?

Thank you
Christophe

[Christophe]

Ok, so here is what I did, the styling/templating:

<Style x:Key="TextBoxStyle1" TargetType="TextBox">
    <Setter Property="IsReadOnly" Value="True"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="#FF000000"/>
    <Setter Property="Padding" Value="2"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TextBox">
                <Grid x:Name="RootElement">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimation Duration="0" To="#FF99C1E2" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="MouseOverBorder"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="ReadOnly">
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                            </VisualState>
                            <VisualState x:Name="Unfocused">
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ValidationStates">
                            <VisualState x:Name="Valid"/>
                            <VisualState x:Name="InvalidUnfocused">
                            </VisualState>
                            <VisualState x:Name="InvalidFocused">
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="1" Opacity="1">
                        <Grid>
                            <Border x:Name="MouseOverBorder" BorderBrush="Transparent" BorderThickness="1">
                                <ScrollViewer x:Name="ContentElement" BorderThickness="0" IsTabStop="False" Padding="{TemplateBinding Padding}"/>
                            </Border>
                        </Grid>
                    </Border>
                    <Border x:Name="DisabledVisualElement" BorderBrush="#A5F7F7F7" BorderThickness="{TemplateBinding BorderThickness}" Background="#A5F7F7F7" IsHitTestVisible="False" Opacity="0"/>
                    <Border x:Name="FocusVisualElement" BorderBrush="#FF6DBDD1" BorderThickness="{TemplateBinding BorderThickness}" IsHitTestVisible="False" Margin="1" Opacity="0"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>


<Style x:Key="test" TargetType="telerik:GridViewCell">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik:GridViewCell">
                <TextBox Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource TextBoxStyle1}"></TextBox>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And here is what I set in the girdview:

<telerik:GridViewDataColumn Header="PO #" DataMemberBinding="{Binding PoNumber, Mode=OneWay}" CellStyle="{StaticResource test}"></telerik:GridViewDataColumn>

But I'm losing the alignment stuff which I did not in my previous version, that was:

<telerik:GridViewDataColumn Header="PO #" DataMemberBinding="{Binding PO, Mode=OneWay}" >

    <telerik:GridViewDataColumn.CellTemplate>

        <DataTemplate>

             <TextBox Text="{Binding PO}" Style="{StaticResource TextBoxStyle1}"></TextBox>

         </DataTemplate>

    </telerik:GridViewDataColumn.CellTemplate>

</telerik:GridViewDataColumn>

Any ideas?
Tahnks,
Chrsitophe


[Dimitrina]

Hello Chrsitophe,

 Following your code snippets, I would recommend you to add a border for the template:

<Style x:Key="test" TargetType="telerik:GridViewCell">
           <Setter Property="Template">
               <Setter.Value>
                   <Border Padding="0" Margin="0">
                       <ContentPresenter>
                           <ControlTemplate TargetType="telerik:GridViewCell">
                               <TextBox Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource TextBoxStyle1}"></TextBox>
                           </ControlTemplate>
                       </ContentPresenter>
                   </Border>
               </Setter.Value>
           </Setter>
       </Style>

 I hope that this is what you need.

All the best,
Didie
the Telerik team

[Christophe]

Hello Didie,

Thank you for your answer.
With your solution it looks ok, but now, I can't select the content, whereas with my previous solution I could. What is/am I missing?

Thanks in advance,
Christophe

[Vanya Pavlova]

Hello,

 
Generally it is not a good idea to predefine the entire template of a GridViewCell, thus you will loose the selection effects, gridlines etc. features that you may need. The wiser solution is to modify the default template of a GridViewCell and to replace the default ContentPresenter with a single TextBox control (ReadOnlyCopyCellStyle.png).
I am attaching you sample application which demonstrates how this can be achieved.
Will you verify how this works for you? 

Regards,
Vanya Pavlova
the Telerik team