This is a migrated thread and some comments may be shown as answers.

Changing the RadGridView Templates

5 Answers 253 Views

GridView

This is a migrated thread and some comments may be shown as answers.

Prakash asked on 02 Oct 2010, 04:46 AM

template.jpg

HI

Please find the screen shot

Requirement #1

I have edited the GroupPanleTemplate, to have 2 Texblock's and 2 ComboBox.

Problem 1: Since its GroupPanle, User can drag and Drop Header's over this panel to have grouping in

Radgrid. I dont want such thing to happen.

Solution needed: Instead of GroupPanle, can i have custom panale over the Header. if so provide me

a sample.

Problem 2: I need to find the name's of those

combobox's and add the custom collection from the user and then to have selection changed event

of those combobox's. Based on selection, grid should respond.

for ex: Grid should group based on the selection of Group Combobox. in the same Filter too.

If filtering combox is selected 1st then Grouping should be based on current rows in Grid.

Requirement #2

Edited the VerticalScrollBar, to have 3 button's (Add -> Add New Row, Delete --> Delete Row, Select --> Select Row)

I need to expose events to user for these buttons.

I need to have a panel below the Horizontal Scroll Bar, so that i can have RadPager and associated events to be fired

based on the selection of Pager...

Here is the Xaml Code

<UserControl 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:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="_38760_ScrollBarWidth.MainPage" Width="640" Height="480">

<UserControl.Resources>

<SolidColorBrush x:Key="GridView_GroupPanelOuterBorder" Color="#FF848484"/>

<SolidColorBrush x:Key="GridView_GroupPanelInnerBorder" Color="#FFEFF6FF"/>

<telerik:Office_BlackTheme x:Key="Theme"/>

<telerik:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>

<RadialGradientBrush x:Key="GridView_ScrollViewerIntersectionRectangleBackground" Center="0 0" GradientOrigin="0 0" RadiusY="1" RadiusX="1">

<GradientStop Color="#FF848484" Offset="0.066"/>

<GradientStop Color="#FFBFBFBF" Offset="0.066"/>

<GradientStop Color="#FFF0F0F0" Offset="0.29"/>

</RadialGradientBrush>

<ControlTemplate x:Key="GridViewGroupPanelTemplate" TargetType="telerik:GridViewGroupPanel">

<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="Grouping">

<VisualState x:Name="NoGroups"/>

<VisualState x:Name="HasGroups">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="panelTextGrouped" Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border Background="{TemplateBinding Background}"

BorderBrush="{StaticResource GridView_GroupPanelInnerBorder}" BorderThickness="1">

<StackPanel>

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"></RowDefinition>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"></ColumnDefinition>

<ColumnDefinition Width="2*"></ColumnDefinition>

<ColumnDefinition Width="Auto"></ColumnDefinition>

<ColumnDefinition Width="2*"></ColumnDefinition>

</Grid.ColumnDefinitions>

<TextBlock x:Name="part_txtBlockGroupBy" Grid.Row="0" Grid.Column="0"

Text="Group By" Width="100" Margin="0,5,0,-5"></TextBlock>

<ComboBox x:Name="part_GroupByCombo" Grid.Row="0" Grid.Column="1" Width="200" Margin="0,3,0,-5">

<ComboBox.Items>

<ComboBoxItem Content="Property1"></ComboBoxItem>

<ComboBoxItem Content="Property2"></ComboBoxItem>

<ComboBoxItem Content="Property3"></ComboBoxItem>

</ComboBox.Items>

</ComboBox>

<TextBlock x:Name="panelTextGrouped" Grid.Row="0" Grid.Column="2"

Text="Filter By" Margin="0,5,0,-5"/>

<ComboBox x:Name="part_FilterByCombo" Grid.Row="0" Grid.Column="3" Width="200" Margin="0,3,0,-5"></ComboBox>

</Grid>

</StackPanel>

</Border>

</ControlTemplate>

<ItemsPanelTemplate x:Key="GridViewGroupPanelItemsPanelTemplate">

<StackPanel VerticalAlignment="Stretch" Orientation="Horizontal"/>

</ItemsPanelTemplate>

<ControlTemplate x:Key="GridViewScrollViewerTemplate" TargetType="telerik:GridViewScrollViewer">

<Grid x:Name="PART_RootPanel" Background="{TemplateBinding Background}">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*"/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<telerik:ScrollContentPresenter

CanContentScroll="{TemplateBinding CanContentScroll}" Grid.Row="2"/>

<ScrollBar x:Name="PART_VerticalScrollBar" BorderThickness="1,0,0,0" Grid.Column="1" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0.0" Orientation="Vertical" Grid.Row="0" Grid.RowSpan="4" telerik:StyleManager.Theme="{StaticResource Theme}"

Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" MinWidth="40"/>

<Grid Grid.Column="0" Grid.Row="4" >

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="*"/>

</Grid.ColumnDefinitions>

<Button Content="Add" Grid.Column="0" Grid.Row="0"></Button>

<Button Content="Delete" Grid.Column="1" Grid.Row="0"></Button>

<Button Content="Select" Grid.Column="2" Grid.Row="0"></Button>

<ScrollBar x:Name="PART_HorizontalScrollBar" Grid.Column="3" Grid.Row="0" BorderThickness="0,1,0,0" IsTabStop="False"

Maximum="{TemplateBinding ScrollableWidth}" Minimum="0.0" Orientation="Horizontal" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}" MinHeight="40"/>

<telerik:RadDataPager Grid.Row="1" Grid.ColumnSpan="4" />

</Grid>

<Rectangle Grid.Column="1" Fill="{StaticResource GridView_ScrollViewerIntersectionRectangleBackground}" Grid.Row="4"/>

</Grid>

</ControlTemplate>

<Style x:Key="GridViewScrollViewerStyle" TargetType="telerik:GridViewScrollViewer">

<Setter Property="Template" Value="{StaticResource GridViewScrollViewerTemplate}"/>

</Style>

<ControlTemplate x:Key="RadGridViewTemplate" TargetType="telerik:RadGridView">

<Border x:Name="PART_MasterGridContainer"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

Padding="{TemplateBinding Padding}">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="GridViewActivity">

<VisualState x:Name="Idle">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_GridViewLoadingIndicator">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Busy">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_GridViewLoadingIndicator">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="ColumnHeadersVisibility">

<VisualState x:Name="ColumnHeadersVisible">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_HeaderRow">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="ColumnHeadersCollapsed">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_HeaderRow">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="ColumnFootersVisibility">

<VisualState x:Name="ColumnFootersVisible">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_FooterRow">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="ColumnFootersCollapsed">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_FooterRow">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="GroupPanelVisibility">

<VisualState x:Name="GroupPanelVisible">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_GroupPanel">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="GroupPanelCollapsed">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_GroupPanel">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="InsertRowVisibility">

<VisualState x:Name="InsertRowVisible">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_AddNewRow">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="InsertRowCollapsed">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_AddNewRow">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid x:Name="HierrarchyBackground" Background="{TemplateBinding Background}">

<Grid.ColumnDefinitions>

<ColumnDefinition/>

<ColumnDefinition x:Name="ScrollBarColumn" MinWidth="0" Width="0"/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition x:Name="PART_AttachedBehaviorRow" Height="Auto"/>

<RowDefinition/>

<RowDefinition x:Name="ScrollBarRow" Height="0" MinHeight="0"/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<telerik:GridViewGroupPanel x:Name="PART_GroupPanel"

BorderBrush="{StaticResource GridView_GroupPanelOuterBorder}"

Background="{TemplateBinding GroupPanelBackground}" Grid.ColumnSpan="2" Foreground="{TemplateBinding GroupPanelForeground}" Grid.Row="0" telerik:StyleManager.Theme="{StaticResource Theme}"/>

<telerik:GridViewScrollViewer x:Name="PART_ItemsScrollViewer" Background="Transparent" CanContentScroll="True" Grid.ColumnSpan="2" Grid.Row="2" Grid.RowSpan="2" telerik:StyleManager.Theme="{StaticResource Theme}" Style="{StaticResource GridViewScrollViewerStyle}">

<telerik:GridViewScrollViewer.FooterRow>

<telerik:GridViewFooterRow x:Name="PART_FooterRow"

IndentLevel="{TemplateBinding GroupCount}" telerik:StyleManager.Theme="{StaticResource Theme}"/>

</telerik:GridViewScrollViewer.FooterRow>

<telerik:GridViewScrollViewer.HeaderRow>

<telerik:GridViewHeaderRow x:Name="PART_HeaderRow"

IndentLevel="{TemplateBinding GroupCount}" telerik:StyleManager.Theme="{StaticResource Theme}"/>

</telerik:GridViewScrollViewer.HeaderRow>

<telerik:GridViewScrollViewer.NewRow>

<telerik:GridViewNewRow x:Name="PART_AddNewRow"

IndentLevel="{TemplateBinding GroupCount}" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="Collapsed"/>

</telerik:GridViewScrollViewer.NewRow>

<telerik:GridViewVirtualizingPanel x:Name="PART_GridViewVirtualizingPanel"/>

</telerik:GridViewScrollViewer>

<telerik:ScrollPositionIndicator x:Name="PART_ScrollPositionIndicator" Grid.ColumnSpan="2"

ContentTemplate="{TemplateBinding ScrollPositionIndicatorTemplate}" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="0,0,28,0" Grid.Row="2" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="{Binding IsScrolling,

Converter={StaticResource BooleanToVisibilityConverter}, Mode=TwoWay,

RelativeSource={RelativeSource TemplatedParent}}"/>

<Border x:Name="PART_FrozenColumnsPreview" Background="#33000000" HorizontalAlignment="Left" Grid.Row="1" Grid.RowSpan="4" Visibility="Collapsed" VerticalAlignment="Stretch" Width="6"/>

<telerik:GridViewLoadingIndicator x:Name="PART_GridViewLoadingIndicator" Grid.ColumnSpan="2" Grid.RowSpan="4"

telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="Collapsed"/>

</Grid>

</Border>

</ControlTemplate>

<SolidColorBrush x:Key="ControlBackground" Color="White"/>

<SolidColorBrush x:Key="ControlOuterBorder" Color="#FF848484"/>

<SolidColorBrush x:Key="ControlForeground" Color="Black"/>

<SolidColorBrush x:Key="Item_AlternateBackground" Color="#FFF4F4F4"/>

<SolidColorBrush x:Key="GridView_GridLinesItemBorder" Color="#FFCBCBCB"/>

<LinearGradientBrush x:Key="GridView_GroupPanelBackground" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFDFDFDF" Offset="1"/>

<GradientStop Color="#FFBABABA"/>

</LinearGradientBrush>

<SolidColorBrush x:Key="GridView_GroupPanelForeground" Color="Black"/>

<Style x:Key="GridViewGroupPanelStyle1" TargetType="telerik:GridViewGroupPanel">

<Setter Property="Template" Value="{StaticResource GridViewGroupPanelTemplate}"/>

<Setter Property="ItemsPanel"

Value="{StaticResource GridViewGroupPanelItemsPanelTemplate}"/>

<Setter Property="MinHeight" Value="32"/>

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

<Setter Property="Padding" Value="10,0,3,0"/>

<Setter Property="Background"

Value="{StaticResource GridView_GroupPanelBackground}"/>

<Setter Property="BorderBrush"

Value="{StaticResource GridView_GroupPanelOuterBorder}"/>

<Setter Property="BorderThickness" Value="0,0,0,1"/>

<Setter Property="VerticalContentAlignment" Value="Center"/>

<Setter Property="HorizontalContentAlignment" Value="Left"/>

</Style>

<Style x:Key="RadGridViewStyle" TargetType="telerik:RadGridView">

<Setter Property="Template" Value="{StaticResource RadGridViewTemplate}"/>

<Setter Property="Background" Value="{StaticResource ControlBackground}"/>

<Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorder}"/>

<Setter Property="Foreground" Value="{StaticResource ControlForeground}"/>

<Setter Property="BorderThickness" Value="1"/>

<Setter Property="AlternateRowBackground"

Value="{StaticResource Item_AlternateBackground}"/>

<Setter Property="VerticalGridLinesBrush"

Value="{StaticResource GridView_GridLinesItemBorder}"/>

<Setter Property="HorizontalGridLinesBrush"

Value="{StaticResource GridView_GridLinesItemBorder}"/>

<Setter Property="GroupPanelStyle"

Value="{StaticResource GridViewGroupPanelStyle1}"/>

<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>

<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>

<Setter Property="VerticalAlignment" Value="Stretch"/>

<Setter Property="HorizontalAlignment" Value="Stretch"/>

</Style>

</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">

<telerik:RadGridView Margin="8" ItemsSource="{Binding Collection}" Style="{StaticResource RadGridViewStyle}"/>

</Grid>

</UserControl>

5 Answers, 1 is accepted

answered on 07 Oct 2010, 10:36 AM

combosaboveheader.zip

Hello Prakash,

To avoid confusion , lets address the issues one by one .

So , regarding the comboboxes above the header :

1. Hide the GroupPanel using

 ShowGroupPanel="False" for RadGridView. 
This will prevent the user to group by draging, 
2. Place the combo boxes in a user control .
3. Place that user contol in the tempalte of the grid.

This is demonstrated in the attached project - it has a combo box above the grid header which can be
used to group the grid.

You can place the filtering combo box in the same user control , using exactly the same approach .

In case this point is clear , let me know so we can proceed with the next one .

Best wishes,
Vanya Pavlova
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items

answered on 08 Oct 2010, 05:40 AM



Hi  
  
1st i need to thank for ur support 
Great Sample. 
  
Adding the Combobox in template is fine. 
  
Here in this sample you have passed the itemsource for the Combo box in the user control's code page directly.. this shouldn't happen since this will be packed as single control and will be consumed by my development team,  
where i need to find the combo box and provide them associated events to them explicitly.  
  
  
RadGridView gridView = this.ParentOfType<RadGridView>(); 
  
ComboBox cbbx = (ComboBox)gridView.FindName("part_GroupByCombo"); 
  
cbbx.ItemsSource = new[] { "ID", "Category", "Description" }; 
  
cbbx.SelectionChanged += new System.Windows.Controls.SelectionChangedEventHandler(cbbx_SelectionChanged); 
  
This can be done? 
  
if so please proceed.. :)

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Changing the RadGridView Templates

5 Answers, 1 is accepted