Telerik grid view auto size issues

10 posts, 0 answers
  1. Kavita
    Kavita avatar
    12 posts
    Member since:
    Feb 2013

    Posted 15 Feb 2013 Link to this post

    Hi
       We are using telerik grid view and facing scroll bar and column size issues if we define column size as "*" in any column.

    Could you please see below scenarios and help us in fixing these issues:

    Case 1: Use of telerik control scroll bar:

            Requirement : In our telerik grid view we want to set some column with fixed width and some              variable width("*"). 

            Issue: Horizontal scroll bar doesn't spread acording to the column width,its width is always fixed due to this column with width "*" doesn't spread at all.Please find an attached snapshot of the screen (Case1.png)       


    See elow eg . in which column name company is set as variable width:- 

     

    Case 1 : Code Snippet :

    <Grid x:Name="radGridView" Grid.Row="1" Margin="0,30">
    <!--Change Detail section-->

    <!--<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" >-->

     

    <telerik:RadGridView ColumnWidth="150" IsTabStop="False" x:Name="radGridView1" CanUserResizeColumns="False" IsReadOnly="True" CanUserFreezeColumns="False" RowStyle="{StaticResource rowStyle}" ItemsSource="{Binding DemoClasses}" ShowColumnFooters="False" GridLinesVisibility="None" RowIndicatorVisibility="Collapsed" telerikGridViewHeaderMenu:GridViewHeaderMenu.IsEnabled="True" ActionOnLostFocus="None" ShowGroupPanel="False" AutoGenerateColumns="False" Margin="0,-9,-1,0">

     

    <telerik:RadGridView.Columns>

     

    <telerik:GridViewDataColumn IsSortable="False" >

     

    <telerik:GridViewDataColumn.Header>

     

    <TextBlock Text="Id" TextWrapping="Wrap" TextAlignment="Center"/>

     

    </telerik:GridViewDataColumn.Header>

     

    <telerik:GridViewDataColumn.CellTemplate>

     

    <DataTemplate>

     

    <TextBlock Text="{Binding ID}" ToolTip="{Binding RelativeSource={RelativeSource Self}, Path=Text}" HorizontalAlignment="Center" VerticalAlignment="Center"/>

     

    </DataTemplate>

     

    </telerik:GridViewDataColumn.CellTemplate>

     

    </telerik:GridViewDataColumn>

     

    <telerik:GridViewDataColumn IsSortable="False" Header="ClassName" DataMemberBinding="{Binding Name}">

     

    <telerik:GridViewDataColumn.CellTemplate>

     

    <DataTemplate>

     

    <TextBlock Text="{Binding Name}" ToolTip="{Binding RelativeSource={RelativeSource Self}, Path=Text}" HorizontalAlignment="Center" VerticalAlignment="Center"/>

     

    </DataTemplate>

     

    </telerik:GridViewDataColumn.CellTemplate>

     

    </telerik:GridViewDataColumn>

     

    <telerik:GridViewDataColumn Header="Company" DataMemberBinding="{Binding Company}" Width="*">

     

    <telerik:GridViewDataColumn.CellTemplate>

     

    <DataTemplate>

     

    <TextBlock Text="{Binding Company}" ToolTip="{Binding RelativeSource={RelativeSource Self}, Path=Text}" HorizontalAlignment="Center" VerticalAlignment="Center"/>

     

    </DataTemplate>

     

    </telerik:GridViewDataColumn.CellTemplate>

     

    </telerik:GridViewDataColumn>

     

    <telerik:GridViewDataColumn IsSortable="False" Header="Completed?" DataMemberBinding="{Binding IsComplete}" >

     

    <telerik:GridViewDataColumn.CellTemplate>

     

    <DataTemplate>

     

    <TextBlock Text="{Binding IsComplete}" ToolTip="{Binding RelativeSource={RelativeSource Self}, Path=Text}" HorizontalAlignment="Center" VerticalAlignment="Center"/>

     

    </DataTemplate>

     

    </telerik:GridViewDataColumn.CellTemplate>

     

    </telerik:GridViewDataColumn>

     

    <telerik:GridViewDataColumn IsSortable="False" Header="DueDate" DataMemberBinding="{Binding DueDate}">

     

    <telerik:GridViewDataColumn.CellTemplate>

     

    <DataTemplate>

     

    <TextBlock TextAlignment="Center" ToolTip="{Binding RelativeSource={RelativeSource Self}, Path=Text}" HorizontalAlignment="Center" VerticalAlignment="Center">

     

    <Run Text="{Binding DueDate, StringFormat={}{0:MM/dd/yyyy}}"/>

     

    <LineBreak/>

     

    <Run Text="{Binding DueDate, StringFormat={}{0: hh:mm tt}}"/>

     

    </TextBlock>

     

    </DataTemplate>

     

    </telerik:GridViewDataColumn.CellTemplate>

     

    </telerik:GridViewDataColumn>

     

    <telerik:GridViewDataColumn IsSortable="False" HeaderCellStyle="{DynamicResource columnSelectorHeaderCellStyle}" >

     

    <telerik:GridViewDataColumn.Header>

     

    <StackPanel Orientation="Horizontal">

     

    <Image x:Name="image1" Source="Images/images.jpg" Width="25" Height="25" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="20,5,5,5" MouseLeftButtonDown="Image_MouseDown"/>

     

    </StackPanel>

     

    </telerik:GridViewDataColumn.Header>

     

    </telerik:GridViewDataColumn>

     

    </telerik:RadGridView.Columns>

     

    </telerik:RadGridView>

     

    </Grid>





    Case 2: Use of scroll viewer:

    Requirement : same as case 1.

    Issue: horizontal scroll bar works perfectly but column with "*" width takes the width almost equals to the screen width. we have set the width as "*" only so from where it is taking this much of width.please find an attached snapshot of the screen(Case2.png)


    See elow eg . in which column name company is set as variable width and scroll viewer is being used:-

     

     

    Case 2 : Code Snippet :

    <Grid x:Name="radGridView" Grid.Row="1" Margin="0,30">
    <!--Change Detail section-->

     

    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">

     

     

    <telerik:RadGridView ColumnWidth="150" IsTabStop="False" x:Name="radGridView1" CanUserResizeColumns="False" IsReadOnly="True" CanUserFreezeColumns="False" RowStyle="{StaticResource rowStyle}" ItemsSource="{Binding DemoClasses}" ShowColumnFooters="False" GridLinesVisibility="None" RowIndicatorVisibility="Collapsed" telerikGridViewHeaderMenu:GridViewHeaderMenu.IsEnabled="True" ActionOnLostFocus="None" ShowGroupPanel="False" AutoGenerateColumns="False" Margin="0,-9,-1,0">

    <telerik:RadGridView.Columns>

    <telerik:GridViewDataColumn IsSortable="False" >

    <telerik:GridViewDataColumn.Header>

    <TextBlock Text="Id" TextWrapping="Wrap" TextAlignment="Center"/>

    </telerik:GridViewDataColumn.Header>

    <telerik:GridViewDataColumn.CellTemplate>

    <DataTemplate>

    <TextBlock Text="{Binding ID}" ToolTip="{Binding RelativeSource={RelativeSource Self}, Path=Text}" HorizontalAlignment="Center" VerticalAlignment="Center"/>

    </DataTemplate>

    </telerik:GridViewDataColumn.CellTemplate>

    </telerik:GridViewDataColumn>

    <telerik:GridViewDataColumn IsSortable="False" Header="ClassName" DataMemberBinding="{Binding Name}">

    <telerik:GridViewDataColumn.CellTemplate>

    <DataTemplate>

    <TextBlock Text="{Binding Name}" ToolTip="{Binding RelativeSource={RelativeSource Self}, Path=Text}" HorizontalAlignment="Center" VerticalAlignment="Center"/>

    </DataTemplate>

    </telerik:GridViewDataColumn.CellTemplate>

    </telerik:GridViewDataColumn>

    <telerik:GridViewDataColumn Header="Company" DataMemberBinding="{Binding Company}" Width="*">

    <telerik:GridViewDataColumn.CellTemplate>

    <DataTemplate>

    <TextBlock Text="{Binding Company}" ToolTip="{Binding RelativeSource={RelativeSource Self}, Path=Text}" HorizontalAlignment="Center" VerticalAlignment="Center"/>

    </DataTemplate>

    </telerik:GridViewDataColumn.CellTemplate>

    </telerik:GridViewDataColumn>

    <telerik:GridViewDataColumn IsSortable="False" Header="Completed?" DataMemberBinding="{Binding IsComplete}" >

    <telerik:GridViewDataColumn.CellTemplate>

    <DataTemplate>

    <TextBlock Text="{Binding IsComplete}" ToolTip="{Binding RelativeSource={RelativeSource Self}, Path=Text}" HorizontalAlignment="Center" VerticalAlignment="Center"/>

    </DataTemplate>

    </telerik:GridViewDataColumn.CellTemplate>

    </telerik:GridViewDataColumn>

    <telerik:GridViewDataColumn IsSortable="False" Header="DueDate" DataMemberBinding="{Binding DueDate}">

    <telerik:GridViewDataColumn.CellTemplate>

    <DataTemplate>

    <TextBlock TextAlignment="Center" ToolTip="{Binding RelativeSource={RelativeSource Self}, Path=Text}" HorizontalAlignment="Center" VerticalAlignment="Center">

    <Run Text="{Binding DueDate, StringFormat={}{0:MM/dd/yyyy}}"/>

    <LineBreak/>

    <Run Text="{Binding DueDate, StringFormat={}{0: hh:mm tt}}"/>

    </TextBlock>

    </DataTemplate>

    </telerik:GridViewDataColumn.CellTemplate>

    </telerik:GridViewDataColumn>

    <telerik:GridViewDataColumn IsSortable="False" HeaderCellStyle="{DynamicResource columnSelectorHeaderCellStyle}" >

    <telerik:GridViewDataColumn.Header>

    <StackPanel Orientation="Horizontal">

    <Image x:Name="image1" Source="Images/images.jpg" Width="25" Height="25" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="20,5,5,5" MouseLeftButtonDown="Image_MouseDown"/>

    </StackPanel>

    </telerik:GridViewDataColumn.Header>

    </telerik:GridViewDataColumn>

    </telerik:RadGridView.Columns>

    </telerik:RadGridView>

    </ScrollViewer>

    </Grid>



    Note : WHen all column's width is fixed then grid view behaviour is quite good but this doesn't suit our requirement.Attached is the snapshot of the grid when column width is fixed(radgridview.jpg).

    We want our grid to autosize to fill the view acordingly.

    Looking forward for the reply.

  2. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 19 Feb 2013 Link to this post

    Hello,

     Can you post the grid version at your end? 

    Greetings,
    Vlad
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Kavita
    Kavita avatar
    12 posts
    Member since:
    Feb 2013

    Posted 19 Feb 2013 Link to this post

    Hello,

    We are using follwoing version of grid view :

    2012.3.1129.40
  5. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 19 Feb 2013 Link to this post

    Hi,

     Your grid is inside ScrollViewer and in this case measure with infinity height and width. Star (*) width in this case will be infinity. If you want to use star column you should no place the grid in containers that will measure child components with infinity. 

    Kind regards,
    Vlad
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Kavita
    Kavita avatar
    12 posts
    Member since:
    Feb 2013

    Posted 19 Feb 2013 Link to this post

    Hi,

    Please have a look on the first case i have mentioned in my post.

    In this case i have not put my grid view inside a container. I am using grid view scroll bar only, then scroll bar does not spread acording to the column width . It is always fixed and due to this when i reduce my screen resolution then the column hides.
  7. Venkata
    Venkata  avatar
    6 posts
    Member since:
    Sep 2012

    Posted 30 Dec 2013 Link to this post

    Hi

    Any update on the issue.
    We are also facing same issue - horizontal scroll bar is not refreshed when re-size the column in grid. It has always fixed width same as when the data loaded first time. We have Itemcontrol bound to the last column (with orientation is set horizontal) to create dynamic column. When re-size the fixed column (not last column - ie. item control), some of the dynamic columns created by itemcontrol become invisible.

    The Grid view control version is same.

    Grid view version - 2012.3.1129.40

    Regards,
    M. Rabeek Ahamed
  8. Kavita
    Kavita avatar
    12 posts
    Member since:
    Feb 2013

    Posted 30 Dec 2013 Link to this post


    Hi Venkata,

     I have also got the same problem. You can resolve this problem by giving min width to the columns.

    Thanks
  9. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 01 Jan 2014 Link to this post

    Hi,

    The version you use is one year old now, Would you please test with our most recent version - 2013.3.1204 (2013 Q3 SP1)?

    Regards,
    Didie
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  10. Leticia
    Leticia avatar
    5 posts
    Member since:
    Oct 2015

    Posted 09 Oct 2015 in reply to Dimitrina Link to this post

    Hi Dimitrina, 

    is there any news on this issue?

    I have the same problem: a RadGridView with dinamic width columns. The scrollviewer around it doesn't know the real dimension of the grid, so everytime I drag -scroll-drop it, the scrollbar is resized and I have the impression that the scroll went back.

    Is there any workaround for this? I really cannot fix my columns width.

     My version: 2015.2.728.40

    Thanks  a lot,

  11. Petya
    Admin
    Petya avatar
    975 posts

    Posted 13 Oct 2015 Link to this post

    Hello Leticia,

    ScrollViewer is a control that measures its children in an infinite size, and this is something we strongly recommend against when using RadGridView. The reason is the fact that RadGridView is a virtualized control and for the UI virtualization to properly function, it needs to have a specific width. Otherwise, the application may suffer performance and memory-wise, and you'll be observing undesired visual results.

    Setting the width of the columns is not needed, but you need to ensure the control itself has specific dimensions.

    Regards,
    Petya
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for WPF is Visual Studio 2017 Ready