telerik:RadGridView.Columns issue

[Ariel]

I found the next xaml code for windows gridView (template selector):

<DataGridTemplateColumn>
                 <DataGridTemplateColumn.HeaderTemplate>
                        <DataTemplate>
                            <ItemsControl ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:TypeWindow}},
                                 Path=DataContext.Headers}">
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <StackPanel Orientation="Horizontal"/>
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <TextBlock Margin="2" Width="{Binding Width}" Foreground="{Binding Color}" Text="{Binding Data}"/>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </DataTemplate>
                    </DataGridTemplateColumn.HeaderTemplate>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <ItemsControl ItemsSource="{Binding ColumnsData}"
                                          ItemTemplateSelector="{StaticResource typeSelector}">
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <StackPanel Orientation="Horizontal"/>
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                            </ItemsControl>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

for <telerik:RadGridView.Columns> I get this error: "Error 1 A value of type 'DataGridTemplateColumn' cannot be added to a collection or dictionary of type 'GridViewColumnCollection'. C:\Users\arivlin\documents\visual studio 2010\Projects\bindTests\bindTests\UCGrid.xaml 33 17 bindTests"

What object can I use for  DataGridTemplateColumn ?

[Dimitrina]

Hi,

 You can use GridViewDataColumn and define a Header/CellTemplate to achieve your goal. Please check our demos and documentation for more info.   

Regards,
Didie
the Telerik team

[Amin]

Hi Telerik Team,

I think something is wrong about FlowDirection binding with RadGridView.
When the FlowDirection property of the window is not set, everything works well. You can bind FlowDirection of CellTemplate controls to your view model and their direction are changed normally.
But when the FlowDirection property of the window is set to LeftToRight or RightToLeft the FlowDirection binding doesn't work anymore.

Note that setting FlowDirection of CellTemplate without binding works as well but when it's bind is doesn't work.
In addition everything is fine by using ListView and GridView.


 
<Window x:Class="WpfApplicationTestFlowDirection.WinEmployee"
        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:local="clr-namespace:WpfApplicationTestFlowDirection"
        Title="WinEmployee" Height="487" Width="626"
        FlowDirection="LeftToRight">

    <Window.Resources>
        <local:EmployeeViewModel x:Key="EmployeeViewModel"/>
        <local:BoolToFlowDirectionConverter x:Key="BoolToFlowDirectionConverter"/>
    </Window.Resources>
    
    <StackPanel>
        <ListView ItemsSource="{Binding Source={StaticResource EmployeeViewModel}, Path=Employees}">
            <ListView.View>
                <GridView>
                    <GridView.Columns>
                        <GridViewColumn Width="120">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <telerik:RadMaskedTextBox Value="{Binding FirstName}" Width="100"
                                                      FlowDirection="{Binding RightToLeft, Converter={StaticResource BoolToFlowDirectionConverter}}"/>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn Width="120">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <telerik:RadWatermarkTextBox Text="{Binding LastName}" Width="100"
                                                         FlowDirection="{Binding RightToLeft, Converter={StaticResource BoolToFlowDirectionConverter}}"/>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn Width="200">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <telerik:RadDateTimePicker SelectedDate="{Binding StartingDate}" IsTooltipEnabled="False" Width="180"
                                                       FlowDirection="{Binding RightToLeft, Converter={StaticResource BoolToFlowDirectionConverter}}"/>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn Width="120">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <telerik:RadNumericUpDown Value="{Binding Salary}" Width="100"
                                                      FlowDirection="{Binding RightToLeft, Converter={StaticResource BoolToFlowDirectionConverter}}"/>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                    </GridView.Columns>
                </GridView>
            </ListView.View>
        </ListView>
        <telerik:RadGridView x:Name="EmployeesGrid" AutoGenerateColumns="False"
                             ItemsSource="{Binding Source={StaticResource EmployeeViewModel}, Path=Employees}">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding FirstName}" Width="120">
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <telerik:RadMaskedTextBox Value="{Binding FirstName}"
                                                      FlowDirection="RightToLeft"/>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding LastName}" Width="120">
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <telerik:RadWatermarkTextBox Text="{Binding LastName}"
                                                         FlowDirection="{Binding RightToLeft, Converter={StaticResource BoolToFlowDirectionConverter}}"/>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding StartingDate}" Width="200">
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <telerik:RadDateTimePicker SelectedDate="{Binding StartingDate}" IsTooltipEnabled="False"
                                                       FlowDirection="{Binding RightToLeft, Converter={StaticResource BoolToFlowDirectionConverter}}"/>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Salary}" Width="120">
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <telerik:RadNumericUpDown Value="{Binding Salary}"
                                                      FlowDirection="{Binding RightToLeft, Converter={StaticResource BoolToFlowDirectionConverter}}"/>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </StackPanel>
</Window>

[Dimitrina]

Hi,

I have created a test project having the code snippets you posted. I did not include a converter as I am not sure how you have defined yours.

In my project I can see the same behavior for both the ListView and RadGridView. Actually the GridViewColumns do not have a FlowDirection property - in your code you have set this for the different editor you have placed as CellTemplate. So this questions is related to the specific editors.

I have also set the FlowDirection (to be "RightToLeft" having "LeftToRight" flow direction set for the Window) for the RadGridView and I did not encounter any issues. You can find the test project attached for a reference.

Regards,
Didie
the Telerik team

[Amin]

Hi Didie,
Thanks for the reply, 

by removing the BoolToFlowDirectionConverter and the RightToLeft property you have omitted the issue completely because now the FlowDirection is bind to a property (RightToLeft) which is not exist.

let's make some change in your project to see the issue,

public class Club : INotifyPropertyChanged
{
// Add a new property to the club
private System.Windows.FlowDirection _RightToLeft;
        public System.Windows.FlowDirection RightToLeft
        {
            get { return _RightToLeft; }
            set
            {
                _RightToLeft = value;
                this.OnPropertyChanged("RightToLeft");
            }
        }

        public static ObservableCollection<Club> GetClubs()
        {
//Set RightToLeft property to System.Windows.FlowDirection.RightToLeft for Liverpool and Chelsea

           club = new Club("Liverpool", new DateTime(1892, 1, 1), 45362);
            club.RightToLeft = System.Windows.FlowDirection.RightToLeft;

            club = new Club("Chelsea", new DateTime(1905, 1, 1), 42055);
            club.RightToLeft = System.Windows.FlowDirection.RightToLeft;
        }
}

See the attachment for the result

[Dimitrina]

Hello,

I have added the changes you suggested. Do you mean the different behavior for the third column where the editor inside CellTemplate is RadMaskedTextBox? 

Regards,
Didie
the Telerik team

[Amin]

Hi Didie,

yes, I mean the different behavior for the third column where the editor inside CellTemplate is RadMaskedTextBox
and the forth column where the editor inside CellTemplate is RadDateTimePicker
and the fifth column where the editor inside CellTemplate is RadNumericUpDown.

The attachment image is completely obvious, in ListView-GridView everythig is fine but in RadGridView, FlowDirection binding is not working.
In reply please tell me what to do for making the Result in RadGridView become similar to ListView-GridView.

PLEASE SEE THE ATTACHMENT

Regards,
Amin

[Dimitrina]

Hello,

Would you please specify a valid Source (through a StaticResource) for the Binding to the RightToLeft property? If this does not help, would you please send me the updated project with the exact code you are using?

All the best,
Didie
the Telerik team