Custom row template with editable controls

[Dmitriy]

Hi, my original issue is as following: I have a collection of Objects to be shown in a Grid; each Object has many individual properties that are editable by user. If I show each property as individual column (straight forward solution) then I end up with tens of columns and a very long horizontal scroll bar – very cumbersome view to inspect and work with data.

I am experimenting with custom row layout as an alternative solution. I declared a few columns (only fields I expect user to sort over) then the rest of the properties will be shown below in the custom layout. Here is a simplified example:

<telerik:RadGridView ItemsSource="{Binding Items}"
                     CanUserSelect="True" ShowGroupPanel="False" AutoGenerateColumns="False" CanUserFreezeColumns="False"
                     CanUserInsertRows="False" CanUserDeleteRows="False" RowIndicatorVisibility="Collapsed" IsFilteringAllowed="False"
                     SelectionMode="Extended"
                     RowStyle="{StaticResource MyRowStyle}">

    <telerik:RadGridView.Columns>
        <telerik:GridViewDataColumn Header="Name" DataMemberBinding="{Binding Name}" Width="75" IsReadOnly="True">
        <telerik:GridViewDataColumn Header="Quantity" DataMemberBinding="{Binding Quantity}" Width="50">
        <telerik:GridViewDataColumn Header="Price" DataMemberBinding="{Binding Price}" Width="55">
    </telerik:RadGridView.Columns>
</telerik:RadGridView>

 

<Style x:Key="MyRowStyle" TargetType="telerik:GridViewRow">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik:GridViewRow">
                <Border x:Name="rowsContainer"
                        Background="{TemplateBinding Background}"
                        Padding="0,0,0,3">

                    <StackPanel Orientation="Vertical">
                        <telerik:DataCellsPresenter x:Name="PART_DataCellsPresenter" IsTabStop="False" BorderThickness="0"/>

                        <Grid Margin="15,3,0,0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="8"/>
                                <ColumnDefinition Width="Auto" MinWidth="100"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="1"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="1"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <TextBlock Grid.Row="0" Grid.Column="0" Text="Title"/>
                            <TextBlock Grid.Row="2" Grid.Column="0" Text="Event Name"/>
                            <TextBlock Grid.Row="4" Grid.Column="0" Text="Weight"/>

                            <TextBox Grid.Row="0" Grid.Column="2"
                                             Text="{Binding Title, UpdateSourceTrigger=PropertyChanged}"
                                             MaxLength="30"/>
                            <TextBox Grid.Row="2" Grid.Column="2"
                                             Text="{Binding EventName, UpdateSourceTrigger=PropertyChanged}"
                                             MaxLength="30"/>
                            <TextBox Grid.Row="4" Grid.Column="2"
                                             Text="{Binding Weight, UpdateSourceTrigger=PropertyChanged}"
                                             MaxLength="20"/>
                        </Grid>
                    </StackPanel>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" TargetName="rowsContainer" Value="{StaticResource GridRowHighlightBrush}"/>
                    </Trigger>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Background" TargetName="rowsContainer" Value="{StaticResource SelectedItemBrush}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

 

I used DataCellsPresenter to show properties defined as columns properly aligned with respective column headers. The rest of the properties are show through individual editors laid out below.

All works well except for two issues:

Scenario: User starts editing value in “Quantity” column of the grid and then clicks mouse over “Title” textbox.

• Issue #1 Keyboard focus shifts over to “Title” textbox but the cell in “Quantiy” column still stays in edit more.
• Issue #2 If user click over “Title” textbox in a different row then that row doesn’t become selected.

Any suggestions?

[Dinko | Tech Support Engineer]

Hi Dmitriy,

Thank you for the provided code snippet.

Instead of modifying the default template of the control, you can consider using the Row Details feature of the RadGridView. You can read more about this functionality in the Row Details Overview help article and the articles below it.

In your particular case, when the inside TextBox is focused, you can call the CommitEdit() method of the RadGridView to close the commit operation. I have created a sample project based on the provided code snippet to demonstrate this approach. You can find it attached to this reply.

Regards,
Dinko
Progress Telerik