Cells Margins when using CellTemplate

[Rotem]

I using radGridView containing two columns, one is of a plain text type and the other one is of a Rich Text (RadRichTextBox).

In order to implement it, I’ve set the grid column’s CellTemplate property (as shown in the following code).

Inside the cell, the data is being shown correctly. But the cell is being drawn with large margins (which become more noticeable when the row is selected or is the current row).
(Screenshot - http://imageshack.us/photo/my-images/864/radgriditemcontainersty.gif/ )

When clicking on those margins the cell’s content disappears.

What do I need to do in order to eliminate the cell margin?

Code:

<Window x:Class="GridTesting.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

        xmlns:telerikProvider="clr-namespace:Telerik.Windows.Documents.FormatProviders.Html;assembly=Telerik.Windows.Documents.FormatProviders.Html"

        Title="MainWindow" Height="350" Width="780" x:Name="GridTesting"

        >

    <Grid>

        <telerik:RadGridView

                                 CanUserReorderColumns="True" ReorderColumnsMode="ReorderColumns"

                                 RowIndicatorVisibility="Visible" SelectionMode="Extended" ShowGroupPanel="False"

                                 CanUserInsertRows="True" ShowInsertRow="False" CanUserDeleteRows="True" DragElementAction="None"

                                 ItemsSource="{Binding ItemsSource, ElementName=GridTesting}" AutoGenerateColumns="False">

            <telerik:RadGridView.Columns>

                <telerik:GridViewDataColumn Header="Name" Width="2*" >

                    <telerik:GridViewDataColumn.CellTemplate>

                        <DataTemplate>

                            <StackPanel>

                                <TextBox Text="{Binding Name, Mode=TwoWay}"

                                         HorizontalAlignment="Stretch" VerticalAlignment="Stretch" TextWrapping="Wrap"

                                                             BorderThickness="0" Padding="0" Margin="0" MaxHeight="100"/>

                            </StackPanel>

                        </DataTemplate>

                    </telerik:GridViewDataColumn.CellTemplate>

                </telerik:GridViewDataColumn>

                <telerik:GridViewDataColumn Header="Description" Width="5*">

                    <telerik:GridViewDataColumn.CellTemplate>

                        <DataTemplate>

                            <StackPanel>

                                <telerik:RadRichTextBox x:Name="DescriptionRichTextBox" AcceptsTab="False" MaxHeight="100" BorderThickness="0" IsSpellCheckingEnabled="False" />

                                <telerikProvider:HtmlDataProvider RichTextBox="{Binding ElementName=DescriptionRichTextBox}" Html="{Binding Description, Mode=TwoWay}" />

                            </StackPanel>

                        </DataTemplate>

                    </telerik:GridViewDataColumn.CellTemplate>

                </telerik:GridViewDataColumn>

            </telerik:RadGridView.Columns>

        </telerik:RadGridView>

    </Grid>

</Window>

(I also tried to change the ItemContainerStyle, but without success)

[Vanya Pavlova]

Hello Rotem,

 
You may remove this space using a simple style targeted at GridViewCell, as shown below:

<Style TargetType="{x:Type telerik:GridViewCell}">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Background" Value="Red"/>
</Style>

Mark this style as an implict or set it individually on a column through specifying the x:Key attribute.

 

Best wishes,
Vanya Pavlova
the Telerik team

[Rotem]

Hi Vanya,

I tried your solution, the margins of the bigger cell indeed had been removed, but all other cells still have the margin problem.

Here is a snapshot of it after I made your recommended changes : http://img88.imageshack.us/img88/8148/radgriditemcontainersty.png

For each cell, I am setting the following attributes: “HorizontalAlignment="Stretch" VerticalAlignment="Stretch"“, it doesn’t help.

 

You can see how the whole cell disappears after clicking on the margin of the second row.

 

By the way, have you noticed that every cell in your grid has a red pixel in the top left corner?

[Vanya Pavlova]

Hi Rotem,

 

Using a simple style I was not able to replicate such a behavior. 
May you please share with us the style you are currently using and how do you set it? 

Kind regards,
Vanya Pavlova
the Telerik team

[Rotem]

By saying the “Simple Style” did you mean the default style? (I am using the default style).

I’ve created a small sample and attached it to my original post. The described behavior reproduces there either.

To avid unknown style from interrupting, I’ve added “BasedOn="{x:Null}"” to the style definition that you gave to me, but  it didn’t make any difference.

            <telerik:RadGridView.Resources>

                <Style TargetType="{x:Type telerik:GridViewCell}" BasedOn="{x:Null}">

                    <Setter Property="Margin" Value="0"/>

                    <Setter Property="Padding" Value="0"/>

                    <Setter Property="Background" Value="Red"/>

                </Style>

            </telerik:RadGridView.Resources>

 

[Vanya Pavlova]

Hello Rotem,

 

Thank you for pointing this out! You have missed to specify the CellEditTemplate for this column and when the cell enters edit mode everything is lost. 
I have changed a little bit your code and now you may check this for further reference:

<Style  TargetType="{x:Type TextBox}">
            <Setter Property="BorderThickness" Value="0"/>
             <Setter Property="Background" Value="Red"/>
            </Style>
                <Style TargetType="{x:Type telerik:GridViewCell}" BasedOn="{x:Null}">
                    <Setter Property="VerticalAlignment" Value="Stretch"/>
                    <Setter Property="HorizontalAlignment" Value="Stretch"/>
                    <Setter Property="Margin" Value="0"/>
                    <Setter Property="Padding" Value="0"/>
                    <Setter Property="Background" Value="Red"/>
                </Style>


...
 <telerik:RadGridView
                                 CanUserReorderColumns="True" ReorderColumnsMode="ReorderColumns"
                                 RowIndicatorVisibility="Visible" SelectionMode="Extended" ShowGroupPanel="False"
                                 CanUserInsertRows="True" ShowInsertRow="False" CanUserDeleteRows="True" DragElementAction="None"
                                 ItemsSource="{Binding Collection}" AutoGenerateColumns="False">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn Header="Name" Width="2*" >
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBox Text="{Binding Property1, Mode=TwoWay}"
                                         HorizontalAlignment="Stretch"  TextWrapping="Wrap" Height="100"/>
                            </StackPanel>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                     <telerik:GridViewDataColumn.CellEditTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBox Text="{Binding Property1, Mode=TwoWay}"
                                         HorizontalAlignment="Stretch"  TextWrapping="Wrap" Height="100"/>
                            </StackPanel>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellEditTemplate>
                </telerik:GridViewDataColumn>


                <telerik:GridViewDataColumn Header="Description" Width="5*">
                    <telerik:GridViewDataColumn.CellEditTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <telerik:RadRichTextBox x:Name="DescriptionRichTextBox" AcceptsTab="False" MaxHeight="100" BorderThickness="0" IsSpellCheckingEnabled="False" />
                                <Telerik_Windows_Documents_FormatProviders_Html:HtmlDataProvider RichTextBox="{Binding ElementName=DescriptionRichTextBox}" Html="{Binding Description, Mode=TwoWay}" />
                                </StackPanel>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellEditTemplate>
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>

Regards,
Vanya Pavlova
the Telerik team

[Rotem]

Unfortunately that didn’t work as well.
I found the same behavior in your sample program, Image attached - http://imageshack.us/photo/my-images/846/captureax.png/
Does the margin problem reproduce on your computer as well?

[Vanya Pavlova]

Hello Rotem,

 

If you take a look at the xamlo definition of RadGridViewm you may see that the RowHeight is increased. The previously defined style for TextBox would not work, because its default height is different than the defined one.
Within TextBox's style just specify the Height of the TextBlock to 40 pixels as shown below:
 

<Style  TargetType="{x:Type TextBox}">
            <Setter Property="Height" Value="40"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Margin" Value="0"/>
....
</Style>

I am attaching you a runnable project of the proposed solution. 

Greetings,
Vanya Pavlova
the Telerik team

[Rotem]

First of all, I need to thank you for all the help.
I don’t think I explained the problem successfully.

Let’s stay with the last example. I want the textbox control to fill the whole cell’s space, so when the cell is being resized (for any reason) the textbox control should resize with it. For example, I have made the template text-box style column accept return (AcceptsReturn=”True”) so I’ll be able to make its height change (by pressing the return key when editing the text box).

To see the result please change these two lines in your example:

<telerik:GridViewDataColumn DataMemberBinding="{Binding FirstName}" Header="Last Name"/>

<telerik:GridViewDataColumn CellStyle="{StaticResource ss}" DataMemberBinding="{Binding LastName}" Header="Last Name" />

 

To these lines:

<telerik:GridViewDataColumn Header="FirstName" CellStyle="{StaticResource ss}">

 <telerik:GridViewDataColumn.CellTemplate>

  <DataTemplate>

   <TextBox AcceptsReturn="True" Background="LightBlue" Text="{Binding FirstName}"/>

  </DataTemplate>

 </telerik:GridViewDataColumn.CellTemplate>

 </telerik:GridViewDataColumn>

 <telerik:GridViewDataColumn Header="LastName" CellStyle="{StaticResource ss}">

  <telerik:GridViewDataColumn.CellTemplate>

   <DataTemplate>

    <TextBox AcceptsReturn="True" Background="LightBlue" Text="{Binding LastName}"/>

   </DataTemplate>                       

  </telerik:GridViewDataColumn.CellTemplate>

 </telerik:GridViewDataColumn>

 

And remove this line:
<Setter Property="Height" Value="40"/>

 

In the code beind, please change the first name to a multi line string:

public static ObservableCollection<Employee> GetEmployees()

{

 ObservableCollection<Employee> employees = new ObservableCollection<Employee>();

 Employee employee = new Employee();

 employee.FirstName = "M \n ar \n ia";

 employee.LastName = "Anders";

…

 

and you’ll get this result:
http://imageshack.us/photo/my-images/828/cellv.jpg/

As you can easily notice, the “Anders” text box’s height is not changed and its containing cell gets a margin look.

 

Thanks again for your help.

[Vanya Pavlova]

Hello Rotem,

 

You may just set the TextBox's TextWrapping property to Wrap as shown below:

<Style TargetType="{x:Type telerik:GridViewCell}">
                    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    <Setter Property="Margin" Value="0"/>
                    <Setter Property="Padding" Value="0"/>
                    <Setter Property="Background" Value="Red"/>
                </Style>

    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
        <telerik:RadGridView  ItemsSource="{Binding Collection}">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn  DataMemberBinding="{Binding Property1}">
                     <telerik:GridViewDataColumn.CellTemplate>
   <DataTemplate>
    <TextBox AcceptsReturn="True" TextWrapping="Wrap" Background="LightBlue" Text="{Binding Property1}"/>
   </DataTemplate>
  </telerik:GridViewDataColumn.CellTemplate>
                    </telerik:GridViewDataColumn>
                </telerik:RadGridView.Columns>
            </telerik:RadGridView>
    </Grid>
</UserControl>

In this way you will be able to control the text overflow when you resize a column. 

Regards,
Vanya Pavlova
the Telerik team

[Rotem]

Thanks.
Changing the Cell style is the solution.
Last time I applied the style on GridViewCellsPanel type instead of GridViewCell type.