Custom Row Horizontal scrolling issue

[Daní]

Hi,

I'm using the GridView with a custom row style where i've defined a row template, but when horizontal scroll appears it doesn't scroll the row content.

Thanks

[Vlad]

Hi Daní,

Please post the grid XAML.

Regards,
Vlad
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Daní]

Edited to use Format Code Block

Hi Vlad,

You must know that I'm using SL3.

[Daní]

Hi Vlad,

this the formatted code:

The MainPage.xaml:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerikGridView="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    x:Class="SilverlightApplication2.MainPage"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot" Background="White">
        <telerikGridView:RadGridView x:Name="uxGridView"  RowStyle="{StaticResource rowStyle}">
            <telerikGridView:RadGridView.Columns>
                <telerikGridView:GridViewDataColumn HeaderText="Field1" DataMemberPath="Field1"/>
                <telerikGridView:GridViewDataColumn DataMemberPath="Field2" Header="Field2"/>
                <telerikGridView:GridViewDataColumn DataMemberPath="Field3" Header="Field3"/>
                <telerikGridView:GridViewDataColumn DataMemberPath="Field4" Header="Field4"/>
                <telerikGridView:GridViewDataColumn HeaderText="Field5" DataMemberPath="Field5"/>
                <telerikGridView:GridViewDataColumn HeaderText="Field6" DataMemberPath="Field6"/>
                <telerikGridView:GridViewDataColumn HeaderText="Field7" DataMemberPath="Field7"/>
            </telerikGridView:RadGridView.Columns>
        </telerikGridView:RadGridView>
    </Grid>
</UserControl>

The RowTemplate.xaml

<Application
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:gridView="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    x:Class="SilverlightApplication2.App">
    <Application.Resources>
        <ControlTemplate x:Key="customRowTemplate" TargetType="gridView:GridViewRow">
            <Grid Margin="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid Margin="1,0,1,1">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <gridView:GridViewCell Value="{Binding Field1}" FontSize="18" Grid.Column="0" Grid.Row="0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,10,0,0">
                        <gridView:GridViewCell.Template>
                            <ControlTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="Field1:" FontFamily="Verdana" FontSize="13.333" FontWeight="Bold"/>
                                    <TextBlock FontFamily="Verdana" FontSize="13.333" Text="{Binding Field2, Mode=OneWay}"/>
                                </StackPanel>
                            </ControlTemplate>
                        </gridView:GridViewCell.Template>
                    </gridView:GridViewCell>
                    <gridView:GridViewCell HorizontalAlignment="Left" Value="{Binding Field2, Mode=OneWay}" Grid.Column="1" Margin="0,10,0,0">
                        <gridView:GridViewCell.Template>
                            <ControlTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="Field2" FontFamily="Verdana" FontSize="13.333" FontWeight="Bold" />
                                    <TextBlock FontFamily="Verdana" FontSize="13.333" Text="{Binding Field2, Mode=OneWay}"/>
                                </StackPanel>
                            </ControlTemplate>
                        </gridView:GridViewCell.Template>
                    </gridView:GridViewCell>
                    <gridView:GridViewCell HorizontalAlignment="Right" Grid.Column="2" Value="{Binding Field3, Mode=OneWay}" Margin="0,10,10,0">
                        <gridView:GridViewCell.Template>
                            <ControlTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="Field3:" FontFamily="Verdana" FontSize="13.333" FontWeight="Bold"/>
                                    <TextBlock Text="{Binding Field3, Mode=OneWay}" FontFamily="Verdana" FontSize="13.333"/>
                                </StackPanel>
                            </ControlTemplate>
                        </gridView:GridViewCell.Template>
                    </gridView:GridViewCell>
                    <gridView:GridViewCell HorizontalAlignment="Right" Grid.Column="3" Value="{Binding Field4, Mode=OneWay}" Margin="0,10,0,0">
                        <gridView:GridViewCell.Template>
                            <ControlTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="Field4:" FontFamily="Verdana" FontSize="13.333" FontWeight="Bold"/>
                                    <TextBlock  Text="{Binding Field4, Mode=OneWay}" FontFamily="Verdana" FontSize="13.333"/>
                                </StackPanel>
                            </ControlTemplate>
                        </gridView:GridViewCell.Template>
                    </gridView:GridViewCell>
                    <gridView:GridViewCell HorizontalAlignment="Right" Grid.Column="4" Value="{Binding Field5, Mode=OneWay}" Margin="0,10,10,0" Grid.RowSpan="2">
                        <gridView:GridViewCell.Template>
                            <ControlTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <Image Height="40" Width="120" Source="Imatges/GT.jpg" Stretch="Fill"/>
                                </StackPanel>
                            </ControlTemplate>
                        </gridView:GridViewCell.Template>
                    </gridView:GridViewCell>
                    <gridView:GridViewCell Value="{Binding Field6, Mode=OneWay}" Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="1" Margin="0" HorizontalAlignment="Stretch">
                        <gridView:GridViewCell.Template>
                            <ControlTemplate>
                                <StackPanel x:Name="stackPanel">
                                    <TextBlock Text="Field6" TextWrapping="Wrap" FontSize="14.667"/>
                                    <TextBlock Text="{Binding Field6, Mode=OneWay}" TextWrapping="Wrap" Width="Auto" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                                </StackPanel>
                            </ControlTemplate>
                        </gridView:GridViewCell.Template>
                    </gridView:GridViewCell>
                    <gridView:GridViewCell HorizontalAlignment="Center" Value="{Binding Field7, Mode=OneWay}" Grid.Column="0" Grid.ColumnSpan="5" Grid.Row="2" BorderThickness="0" Margin="0,22,0,1" >
                        <gridView:GridViewCell.Template>
                            <ControlTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="Field7:"/>
                                    <TextBlock Text="{Binding Field7, Mode=OneWay}"/>
                                </StackPanel>
                            </ControlTemplate>
                        </gridView:GridViewCell.Template>
                    </gridView:GridViewCell>
                </Grid>
            </Grid>
        </ControlTemplate>
        <Style x:Key="rowStyle" TargetType="gridView:GridViewRow">
            <Setter Property="Template" Value="{StaticResource customRowTemplate}"/>
        </Style>
    </Application.Resources>
</Application>

The Data Class used to populate the GridView

public class Data
        {
            string _field1;

            public string Field1
            {
                get { return _field1; }
                set { _field1 = value; }
            }
            string _field2;

            public string Field2
            {
                get { return _field2; }
                set { _field2 = value; }
            }
            string _field3;

            public string Field3
            {
                get { return _field3; }
                set { _field3 = value; }
            }
            string _field4;

            public string Field4
            {
                get { return _field4; }
                set { _field4 = value; }
            }
            string _field5;

            public string Field5
            {
                get { return _field5; }
                set { _field5 = value; }
            }
            string _field6;

            public string Field6
            {
                get { return _field6; }
                set { _field6 = value; }
            }
            string _field7;

            public string Field7
            {
                get { return _field7; }
                set { _field7 = value; }
            }

            static List<Data> _testData = new List<Data>();

            public static List<Data> TestData
            {
                get { return Data._testData; }
                set { Data._testData = value; }
            }
            static Data()
            {
                for (int i = 0; i < 8; i++)
                {
                    _testData.Add(new Data
                    {
                        Field1 = "Data1",
                        Field2 = "Data2",
                        Field3 = "Data3",
                        Field4 = "Data4",
                        Field5 = "Data5",
                        Field6 = "Large Text: ddfasffffffffffffffffffffffffffffffffffffffffffffffffffffffffffsfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdfsssssssssssssssssssssssssssss",
                        Field7 = "Data7"
                    });
                }
            }
        }

Hope this helps.

Thanks

[Kalin Milanov]

Hi Daní,

I am not quite grasping why are you going through all the trouble of defining cells manually when you can set a simple DataTemplate for each column. Am I missing something?

I am sending you a sample SL3 application in which shows the approach mentioned above. Please review it and tell me if this fits your case. It also handles the horizontal scrolling which seems to be the issue.  

I hope this works for you.

Kind regards,
Kalin Milanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Daní]

Thanks Kalin,

 

What I did was to try to do something similar to the "Custom Row Layout" in your demo application Custom Row Layout. I don't want a "tabular format", just a custom row layout. I want to show the columns header to allow filtering and maybe grouping. In this scenario, the gridView horizontal scroll, does not scrolls the row content. Please, try using the Row Style I provided you and you will see what I mean.

[Daní]

Any advance in this issue? Do you need any information else? I'm really interested to solve this.

[Pavel Pavlov]

Hello Daní,

Please excuse me for the late answer. We are a bit short of resources right now.

The attached example demonstrates ho to enable horizontal scroll for your custom row template.
Actually what you need to do is to wrap your template visual elements the following way :

<

gridView:HorizontalScrollPanel x:Name="PART_PartialScrollContainer" >

 

    //place your row elements here

</

gridView:HorizontalScrollPanel>

 

Please keep the "PartialScrollContainer " name as the RadGridView relies on this naming to find a scrollable panel.
To see this in action , please open the attached project.

Regards,
Pavel Pavlov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Daní]

Thanks Pavel,

Yo're totally excused. It's working great!!!!!