Issu with styling of Grid view header cell DragIndicator

[Shailesh Shahane]

Hi,

We are facing issue with drag indicator of telerik grid view header cell. Previously when we used to drag header cell to reorder columns, the drag indicator was showing copy of header cell attached to cursor and which was semi transparent.

Now we have implemented silverlight implicit styling. So in application resources we have implicit style for Grid and Rectangle. After this change, drag indicator is showing solid colors. It is not coming semi transparent.
I guess the template for drag indicator is inbuilt created in telerik. Do we have feature where we can set template for drag indicator explicitly? or is there any other work around for this issue?

Thanks,
Shailesh

[Vanya Pavlova]

Hello Shailesh,

 

When you define styles in App.xaml they are applied to all rectangles and all grids in this application. However you may override this behavior by creating a simple targeted at a Rectangle element on a RadGridView level and it will be applied to these elements residing in the grid. Thus the style defined in the Application's Resources will be ignored. Please try the following makrup and let me know how this works for you:

<telerik:RadGridView Margin="40,48,32,96" AutoGenerateColumns="False" ItemsSource="{Binding Collection}">
            <telerik:RadGridView.Resources>
                <Style TargetType="Rectangle">
                    <Setter Property="Fill" Value="Green"/>
                 </Style>
                </telerik:RadGridView.Resources>
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn  Header="Property1"  DataMemberBinding="{Binding Property1}">
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Vertical" >
                                    <Rectangle Height="20" Margin="5" Width="100"/>
                                        <TextBlock Text="{Binding Property1}" Margin="5"/>
                                </StackPanel>
                            </DataTemplate>
                        </telerik:GridViewDataColumn.CellTemplate>
                    </telerik:GridViewDataColumn>
                </telerik:RadGridView.Columns>
            </telerik:RadGridView>

Also you may submit a new support ticket where you can attach sample application where we can see what is going on.

All the best,
Vanya Pavlova
the Telerik team

[Shailesh Shahane]

Hi,
Thanks for reply.

I tried given solution, but it didn't work for me. As i see, the drag element always refer to resources under Application file and not local resources. As it seems this element get added to Root container and not in user control or gridview control. Hence it takes styles from parent which is application root. I have also tried creating implicit DraggedElement style which is used for drag indicator. Even after removing all contents in ControlTemplate of DraggedElement style it uses implicit style of grid for its background. The Background setter property of this style is set to Transparent and seems to be not working.

<!-- App.xaml Resource -->
<Style TargetType="Grid">
    <Setter Property="Background" Value="Blue"></Setter>
</Style>


<!-- User control -->
<UserControl.Resources>
        <ControlTemplate x:Key="DraggedElementTemplate" TargetType="telerik:DraggedElement">
            <Border Style="{x:Null}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                <Grid Style="{x:Null}">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    <Grid Style="{x:Null}" x:Name="PART_NoCursor" HorizontalAlignment="Left" Height="18" Visibility="Collapsed" VerticalAlignment="Bottom" Width="18">
                        <Ellipse Fill="#FFFFFFFF" Stroke="#FF535353"/>
                        <Path Data="M6.5000155,0.5 L0.5,6.5000704" Fill="{x:Null}" Margin="4.565,4.462,3.517,3.418" Stretch="Fill" Stroke="#FF000000" StrokeThickness="3"/>
                        <Path Data="M6.5000155,0.5 L0.5,6.5000704" Fill="{x:Null}" Margin="3.002,2.876,2.832,2.708" Stretch="Fill" Stroke="#FFCE3527" StrokeThickness="3"/>
                        <Ellipse Fill="{x:Null}" Margin="1.831,1.832,1.833,1.832" Stroke="#FFCE3527" StrokeThickness="2"/>
                        <Path Data="M16,8 C8.127,4.9999293 6.627,10.999763 0,8 0,3.581722 3.581722,0 8,0 12.418278,0 16,3.581722 16,8 z" Margin="0.999,1,1.001,8.134" Stretch="Fill" Stroke="{x:Null}">
                            <Path.Fill>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#99FFFFFF" Offset="0"/>
                                    <GradientStop Color="#33FFFFFF" Offset="1"/>
                                </LinearGradientBrush>
                            </Path.Fill>
                        </Path>
                    </Grid>
                </Grid>
            </Border>
        </ControlTemplate>

        <Style  TargetType="telerik:DraggedElement">
            <Setter Property="Template" Value="{StaticResource DraggedElementTemplate}"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="5"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="VerticalContentAlignment" Value="Top"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>

        </Style>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot"  Style="{x:Null}"   DataContext="{Binding Source={StaticResource Emp}}">

        <telerik:RadGridView Margin="8,8,291,0"   DataContext="{Binding}" d:DataContext="{Binding}" ItemsSource="{Binding Collection}"  ScrollViewer.HorizontalScrollBarVisibility="Visible" Height="191" VerticalAlignment="Top" >
            <telerik:RadGridView.Resources>
                <Style TargetType="Grid">
            <Setter Property="Background" Value="Transparent"></Setter>
            </Style>
            </telerik:RadGridView.Resources>

        </telerik:RadGridView>
    </Grid>

The DataContext assigned is dummy data context assigned from Blend.



Thanks,
Shailesh

[Vanya Pavlova]

Hello Shailesh,

 

Generally in RadGridView and all its parts the Grid layout control is used in the templates (and within its internal logic) of RadGridView and you may see that even with this style that the DraggedElement stays bluish in some kind. Do you actually need to use this implicit style targeted at Grid control? In my opinion it is better to remove it from App.xaml in order to avoid any future issues that you might already have.
Please let me know how this works for you!

Regards,
Vanya Pavlova
the Telerik team

[Shailesh Shahane]

Hi,

Unfortunately removing implicit style is not possible, since this is large scale application and already in production. This change will need lot of changes and testing again. So is there any possible way to tackle this.
Like i see in silverlight data grid, dragged indicator is never moves beyond its header boundaries. Is there any other property in telerik grid view which gives same behavior. In that case its parent will be grid control and not application container. That should resolve this issue.

[Tsvyatko]

Hi Shailesh Shahane,

 I have prepared simple application that demonstrate how to achieve the desired behavior throughout the application. Please have a look at the sample project and let me know if this fits into your scenario.

Regards,
Tsvyatko
the Telerik team

[Shailesh Shahane]

Hi,

Thanks for sample. I've checked the given sample application and it is working fine. However it will take time to implement it in actual project, because we will need to see performance impact and impact on other drag and drop elements. Also as you have mentioned previously, we are getting more issues with other controls like telerik popup control because of implicit styling. So i am going to open support ticket for all other issues at once.

Thanks for your support
Shailesh