Telerik grid view auto size issues

[Kavita]

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.

[Vlad]

Hello,

 Can you post the grid version at your end? 

Greetings,
Vlad
the Telerik team

[Kavita]

Hello,

We are using follwoing version of grid view :

2012.3.1129.40

[Vlad]

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

[Kavita]

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.

[Venkata]

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

[Kavita]

Hi Venkata,

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

Thanks

[Dimitrina]

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

[Leticia]

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,

[Petya]

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