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

[Solved] Need Help for adding new Panel..rather tan Group Panel

2 Answers 140 Views

GridView

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

This question is locked. New answers and comments are not allowed.

Selvakumar Savarimuthu asked on 30 Sep 2010, 04:47 PM

template.jpg

Hi

I have a attached the sample project for my requirement.

Requirement 1:

I have edited GroupPanelTemplate to add 2 TextBlock and 2 ComboBox. Onselectionchanged on Group By Combobox gird should

group what ever selected in combobox. in the same way filter too..

Problem Here: Since i have edited GroupPanel, User can drag and drop the column over the GroupPanel grid will start grouping..

I dont want this to happen. so, i would like to have panel other tan group panel over Header.

Please help me out to have panel or to stop drag and drop.

Requirement 2:

I have edited Vertical Scroll Bar template, to add 3 buttons for adding row, deleting row, selecting row. Exposing events to user when i

click on these buttons..or finding the x:Key Names of these buttons in controltemplate.?

Template i used

<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"/>

</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>

Hi

I have a attached the sample project for my requirement.

Requirement 1:
I have edited GroupPanelTemplate to add 2 TextBlock and 2 ComboBox. Onselectionchanged on Group By Combobox gird should
group what ever selected in combobox. in the same way filter too..

Problem Here: Since i have edited GroupPanel, User can drag and drop the column over the GroupPanel grid will start grouping..
I dont want this to happen. so, i would like to have panel other tan group panel over Header.
Please help me out to have panel or to stop drag and drop.

Requirement 2:
I have edited Vertical Scroll Bar template, to add 3 buttons for adding row, deleting row, selecting row. Exposing events to user when i
click on these buttons..or finding the x:Key Names of these buttons in controltemplate.?

2 Answers, 1 is accepted

answered on 01 Oct 2010, 07:33 AM

Hi Selvakumar Savarimuthu,

In my opinion it will be best to first hide the group panel and then create a new custom panel that is especially built your your case. For example:

<Grid Background="Azure">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<Border Grid.Row="0" HorizontalAlignment="Stretch" Height="30">

<Border.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

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

<GradientStop Color="#FFBABABA"/>

</LinearGradientBrush>

</Border.Background>

<StackPanel Orientation="Horizontal">

<telerik:RadComboBox Width="150"/>

</StackPanel>

</Border>

<telerik:RadGridView Grid.Row="1" ShowGroupPanel="False" x:Name="gridView"

SelectionUnit="FullRow">

</telerik:RadGridView>

</Grid>

Greetings,
Milan
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 02 Oct 2010, 03:11 PM

template.jpg

HI

Thanks for ur response.

I need to deliver as control to my team.
From user's who will consume the control think as if single control.

find the screen shot

can i have those panels?