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

7 posts, 0 answers
  1. Christophe
    Christophe avatar
    9 posts
    Member since:
    Sep 2011

    Posted 04 Jan 2012 Link to this post

    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
  2. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 04 Jan 2012 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  3. Christophe
    Christophe avatar
    9 posts
    Member since:
    Sep 2011

    Posted 04 Jan 2012 Link to this post

    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
  4. Christophe
    Christophe avatar
    9 posts
    Member since:
    Sep 2011

    Posted 04 Jan 2012 Link to this post

    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
  5. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 05 Jan 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  6. Christophe
    Christophe avatar
    9 posts
    Member since:
    Sep 2011

    Posted 05 Jan 2012 Link to this post

    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
  7. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 06 Jan 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top