Custom Row Horizontal scrolling issue

9 posts, 1 answers
  1. Daní
    Daní avatar
    303 posts
    Member since:
    Feb 2008

    Posted 14 Jul 2009 Link to this post

    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
  2. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 15 Jul 2009 Link to this post

    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.
  3. DevCraft banner
  4. Daní
    Daní avatar
    303 posts
    Member since:
    Feb 2008

    Posted 15 Jul 2009 Link to this post

    Edited to use Format Code Block

    Hi Vlad,

    You must know that I'm using SL3.

  5. Daní
    Daní avatar
    303 posts
    Member since:
    Feb 2008

    Posted 15 Jul 2009 Link to this post

    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
  6. Kalin Milanov
    Admin
    Kalin Milanov avatar
    447 posts

    Posted 21 Jul 2009 Link to this post

    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.
  7. Daní
    Daní avatar
    303 posts
    Member since:
    Feb 2008

    Posted 21 Jul 2009 Link to this post

    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.

  8. Daní
    Daní avatar
    303 posts
    Member since:
    Feb 2008

    Posted 24 Jul 2009 Link to this post

    Any advance in this issue? Do you need any information else? I'm really interested to solve this.
  9. Answer
    Pavel Pavlov
    Admin
    Pavel Pavlov avatar
    2039 posts

    Posted 24 Jul 2009 Link to this post

    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.
  10. Daní
    Daní avatar
    303 posts
    Member since:
    Feb 2008

    Posted 24 Jul 2009 Link to this post

    Thanks Pavel,

    Yo're totally excused. It's working great!!!!!
Back to Top
DevCraft banner