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

RadGeometryDropDownButton DropdownContent for export command disabled

3 Answers 130 Views

Diagram

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

Venkata asked on 29 May 2014, 01:18 PM

We are using the OrgChartDiagram to show the organization hierarchy in our application. To export the diagram, we used the RadGeometryDropDownButton control with two options PNG and BMP. We are using the telerik:DiagramCommands.Export command is used for that purpose. Sometimes, the options are disabled when we go to other page and back. We need to reload the page to get that option enabled. When the export command remove from the code, the options are enabled.

Please help us to resolve.

See below the code for your reference. ElementName in Command target is the org chart control name.

<telerik:RadGeometryDropDownButton Grid.Column="2" Content="Export" DropDownHeight="80" Style="{StaticResource RadGeometryDropDownButtonStyle}"

DropDownWidth="144" Margin="15 0 0 0" HorizontalAlignment="Center" VerticalAlignment="Center"

Geometry="M11,0L18,7L11,7zM0,0L10,0L10,7L10,8L18,8L18,12L8.88893,12L8.88893,9L3.82715,14L8.88893,19L8.88893,16L18,16L18,21L0,21z" Height="56" Width="42" >

<telerik:RadGeometryDropDownButton.DropDownContent>

<StackPanel Margin="10">

<telerik:RadGeometryButton Content="Export To PNG" Command="telerik:DiagramCommands.Export" CommandParameter="Png"

CommandTarget="{Binding ElementName=diagram}" Style="{StaticResource GeometryButtonMenuItemStyle}"

Geometry=

"M6.7093377,5.0820007 C10.505837,5.0813236 12.205385,8.5835428 13.709369,8.4989958 C15.616847,8.3917685 16.999527,6.8087606 16.999527,6.8087606 L17.000025,13.080002 L3.0000243,13.080002 L3.0000243,7.9753876 C3.0000243,7.9753876 4.842936,5.0823336 6.7093377,5.0820007 z M1.9999999,2.0000048 L1.9999999,13.999995 L18,13.999995 L18,2.0000048 z M1.1920929E-06,0 L20,0 L20,16 L0,16 z"

/>

<telerik:RadGeometryButton Content="Export To BMP" Command="telerik:DiagramCommands.Export" CommandParameter="Bmp"

CommandTarget="{Binding ElementName=diagram}" Style="{StaticResource GeometryButtonMenuItemStyle}"

Geometry=

"M6.7093377,5.0820007 C10.505837,5.0813236 12.205385,8.5835428 13.709369,8.4989958 C15.616847,8.3917685 16.999527,6.8087606 16.999527,6.8087606 L17.000025,13.080002 L3.0000243,13.080002 L3.0000243,7.9753876 C3.0000243,7.9753876 4.842936,5.0823336 6.7093377,5.0820007 z M1.9999999,2.0000048 L1.9999999,13.999995 L18,13.999995 L18,2.0000048 z M1.1920929E-06,0 L20,0 L20,16 L0,16 z"

/>

</StackPanel>

</telerik:RadGeometryDropDownButton.DropDownContent>

</telerik:RadGeometryDropDownButton

<local:OrgChartDiagram x:Name="diagram" GraphSource="{Binding GraphSource}" IsBackgroundSurfaceVisible="False" Margin="10"

ScrollViewer.HorizontalScrollBarVisibility="Auto"

ScrollViewer.VerticalScrollBarVisibility="Auto"

IsRotationEnabled="False"

ShapeStyle="{StaticResource OrgChartShapeStyle}" />

<Style x:Key="GeometryButtonMenuItemStyle" TargetType="telerik:RadGeometryButton">

<Setter Property="FontFamily" Value="Segoe UI" />

<Setter Property="Width" Value="224" />

<Setter Property="Height" Value="30" />

<Setter Property="FontSize" Value="12" />

<Setter Property="IsTabStop" Value="False" />

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

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

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

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

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

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

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:RadGeometryButton">

<Border x:Name="RootBorder" Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}" >

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal" />

<VisualState x:Name="MouseOver">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0:0:0"

Storyboard.TargetName="RootBorder"

Storyboard.TargetProperty="Background">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource MetroGray}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<StackPanel Orientation="Horizontal" Margin="6"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">

<Grid Visibility="{TemplateBinding GeometryVisibility}" Width="20" Height="20" >

<Viewbox Stretch="Uniform">

<Path x:Name="Path" Stretch="None" HorizontalAlignment="Center"

VerticalAlignment="Center" Data="{TemplateBinding Geometry}"

Fill="{StaticResource PathFill}" />

</Viewbox>

</Grid>

<ContentControl x:Name="Content" Grid.Column="1"

IsTabStop="False" Content="{TemplateBinding Content}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

Margin="{TemplateBinding Padding}"

ContentTemplate="{TemplateBinding ContentTemplate}"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />

</StackPanel>

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Style TargetType="telerik:RadGeometryDropDownButton" x:Key="RadGeometryDropDownButtonStyle">

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

<Setter Property="Foreground" Value="#333333" />

<Setter Property="BorderBrush" Value="#64003d" />

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

<Setter Property="extensions:GeometryButtons.GeometryFill" Value="{StaticResource PathFill}" />

<Setter Property="FontFamily" Value="Segoe UI" />

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

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

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

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

<Setter Property="DropDownPopupVerticalOffset" Value="-6" />

<Setter Property="IsOpen" Value="false" />

<Setter Property="extensions:GeometryButtons.EllipseHeight" Value="38"/>

<Setter Property="extensions:GeometryButtons.EllipseWidth" Value="38"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:RadGeometryDropDownButton" >

<Grid Background="{TemplateBinding Background}" >

<!--<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal" />

<VisualState x:Name="MouseOver">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Ellipse"

Storyboard.TargetProperty="Stroke">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AccentBrush}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Path"

Storyboard.TargetProperty="Fill">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AccentBrush}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Content"

Storyboard.TargetProperty="Foreground" >

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AccentBrush}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Pressed">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Ellipse"

Storyboard.TargetProperty="Stroke">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AccentBrush}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Path"

Storyboard.TargetProperty="Fill">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AccentBrush}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Content"

Storyboard.TargetProperty="Foreground" >

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AccentBrush}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Disabled">

<Storyboard>

<DoubleAnimation Duration="0" Storyboard.TargetName="Ellipse"

Storyboard.TargetProperty="Opacity" To="0.5" />

<DoubleAnimation Duration="0" Storyboard.TargetName="Path"

Storyboard.TargetProperty="Opacity" To="0.5" />

<DoubleAnimation Duration="0" Storyboard.TargetName="Content"

Storyboard.TargetProperty="Opacity" To="0.5" />

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="IsOpenState">

<VisualState x:Name="Closed" />

<VisualState x:Name="Opened">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Ellipse"

Storyboard.TargetProperty="Stroke">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AccentBrush}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Path"

Storyboard.TargetProperty="Fill">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AccentBrush}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Content"

Storyboard.TargetProperty="Foreground" >

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AccentBrush}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="FocusStatesGroup">

<VisualState x:Name="Unfocused" />

<VisualState x:Name="Focused" />

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>-->

<Grid HorizontalAlignment="Stretch">

<Grid.RowDefinitions>

<RowDefinition Height="*" />

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<Grid Background="Transparent">

<Ellipse x:Name="Ellipse" Stroke="{TemplateBinding BorderBrush}"

Fill="{TemplateBinding Background}"

Width="{Binding Path=(extensions:GeometryButtons.EllipseWidth), RelativeSource={RelativeSource TemplatedParent}}"

Height="{Binding Path=(extensions:GeometryButtons.EllipseHeight), RelativeSource={RelativeSource TemplatedParent}}"

StrokeThickness=

"{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness, Converter={StaticResource thicknessToDoubleConverter}}"

Visibility="{Binding Path=(extensions:GeometryButtons.EllipseVisibility), RelativeSource={RelativeSource TemplatedParent}}" />

<Path x:Name="Path" Data="{TemplateBinding Geometry}"

Visibility="{Binding Path=(extensions:GeometryButtons.GeometryVisibility), RelativeSource={RelativeSource TemplatedParent}}"

Fill="{Binding Path=(extensions:GeometryButtons.GeometryFill), RelativeSource={RelativeSource TemplatedParent}}"

HorizontalAlignment="Center" VerticalAlignment="Center" />

</Grid>

<ContentControl x:Name="Content" Grid.Row="1"

FontWeight="SemiBold" Margin="{TemplateBinding Padding}"

Content="{TemplateBinding Content}"

ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="Center" />

</Grid>

<Popup x:Name="DropDownPopup" VerticalOffset="{TemplateBinding DropDownPopupVerticalOffset}"

HorizontalOffset="{TemplateBinding DropDownPopupHorizontalOffset}">

<Grid>

<Grid.Effect>

<DropShadowEffect ShadowDepth="2" BlurRadius="6" Color="#FD000000" Opacity="0.6" />

</Grid.Effect>

<Path HorizontalAlignment="Center" VerticalAlignment="Top"

Data="M9,0.5 L17.5,7.5 L0.5,7.5 z" Fill="White" Stretch="Fill"

Stroke="{StaticResource Stroke}" UseLayoutRounding="False"></Path>

<Rectangle VerticalAlignment="Top" Height="1" Canvas.ZIndex="1" Width="14" Fill="White"

HorizontalAlignment="Center" Margin="0 6 0 0" />

<Border x:Name="DropDownPopupBorder" Margin="2 6 2 2" BorderBrush="#FFD6D4D4"

Background="#FFFFFFFF" BorderThickness="1" CornerRadius="0" MinWidth="3"

MinHeight="3" Width="{TemplateBinding DropDownWidth}"

Height="{TemplateBinding DropDownHeight}"

MaxWidth="{TemplateBinding DropDownMaxWidth}"

MaxHeight="{TemplateBinding DropDownMaxHeight}">

<ContentControl x:Name="DropDownPopupContent"

Content="{TemplateBinding DropDownContent}"

ContentTemplate="{TemplateBinding DropDownContentTemplate}"

HorizontalAlignment="Stretch" VerticalAlignment="Stretch"

DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DataContext}" />

</Border>

</Grid>

</Popup>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Style TargetType="telerik:RadGeometryButton" x:Key="RadGeometryButtonStyle2">

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

<Setter Property="Foreground" Value="#333333" />

<Setter Property="BorderBrush" Value="#64003d" />

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

<Setter Property="extensions:GeometryButtons.GeometryFill" Value="{StaticResource PathFill}" />

<Setter Property="FontFamily" Value="Segoe UI" />

<Setter Property="FontWeight" Value="Bold" />

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

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

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

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

<Setter Property="extensions:GeometryButtons.EllipseHeight" Value="38"/>

<Setter Property="extensions:GeometryButtons.EllipseWidth" Value="38"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:RadGeometryButton" >

<Grid Background="{TemplateBinding Background}" >

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal" />

<VisualState x:Name="MouseOver">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Ellipse"

Storyboard.TargetProperty="Stroke">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AccentBrush}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Path"

Storyboard.TargetProperty="Fill">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AccentBrush}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Content"

Storyboard.TargetProperty="Foreground" >

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AccentBrush}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Pressed">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Ellipse"

Storyboard.TargetProperty="Stroke">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AccentBrush}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Path"

Storyboard.TargetProperty="Fill">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AccentBrush}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Content"

Storyboard.TargetProperty="Foreground" >

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AccentBrush}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Disabled">

<Storyboard>

<DoubleAnimation Duration="0" Storyboard.TargetName="Ellipse"

Storyboard.TargetProperty="Opacity" To="0.5" />

<DoubleAnimation Duration="0" Storyboard.TargetName="Path"

Storyboard.TargetProperty="Opacity" To="0.5" />

<DoubleAnimation Duration="0" Storyboard.TargetName="Content"

Storyboard.TargetProperty="Opacity" To="0.5" />

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="IsOpenState">

<VisualState x:Name="Closed" />

<VisualState x:Name="Opened">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Ellipse"

Storyboard.TargetProperty="Stroke">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AccentBrush}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Path"

Storyboard.TargetProperty="Fill">

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AccentBrush}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Content"

Storyboard.TargetProperty="Foreground" >

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource AccentBrush}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="FocusStatesGroup">

<VisualState x:Name="Unfocused" />

<VisualState x:Name="Focused" />

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid HorizontalAlignment="Stretch">

<Grid.RowDefinitions>

<RowDefinition Height="*" />

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<Grid Background="Transparent">

<Ellipse x:Name="Ellipse" Stroke="{TemplateBinding BorderBrush}"

Fill="{TemplateBinding Background}"

Width="{Binding Path=(extensions:GeometryButtons.EllipseWidth), RelativeSource={RelativeSource TemplatedParent}}"

Height="{Binding Path=(extensions:GeometryButtons.EllipseHeight), RelativeSource={RelativeSource TemplatedParent}}"

StrokeThickness=

"{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness, Converter={StaticResource thicknessToDoubleConverter}}"

Visibility="{Binding Path=(extensions:GeometryButtons.EllipseVisibility), RelativeSource={RelativeSource TemplatedParent}}" />

<Path x:Name="Path" Data="{TemplateBinding Geometry}"

Visibility="{Binding Path=(extensions:GeometryButtons.GeometryVisibility), RelativeSource={RelativeSource TemplatedParent}}"

Fill="{Binding Path=(extensions:GeometryButtons.GeometryFill), RelativeSource={RelativeSource TemplatedParent}}"

HorizontalAlignment="Center" VerticalAlignment="Center" />

</Grid>

<ContentControl x:Name="Content" Grid.Row="1"

FontWeight="SemiBold" Margin="{TemplateBinding Padding}"

Content="{TemplateBinding Content}"

ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="Center" />

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

3 Answers, 1 is accepted

answered on 30 May 2014, 03:16 PM

DiagramTest.zip

Hi Venkata,
Unfortunately we're not aware of such issue and I wasn't able to reproduce it so I'd like to ask you for a sample project. For the command validation you could try to manually call the CommandManager's InvalidateRequerySuggested method:

CommandManager.InvalidateRequerySuggested();

I've attached my test project so that you could examine it and tell us what you're doing differently.

Regards,
Zarko
Telerik

Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.

answered on 08 Jun 2014, 02:34 PM

I tried to reproduce the issue with the sample project. But I am unable to reproduce that. I am sure that the disabling is happening when we use the export command. I am not able to attach the sample project.

I removed the export command and added the click event of the button. Now the export options are not disabling. See below the event code.

private void rgbExportPng_Click(object sender, RoutedEventArgs e)

{

SaveFileDialog dialog = new SaveFileDialog();

dialog.DefaultExt = "*.png";

dialog.Filter = "Files(*.png)|*.png";

if (!(bool)dialog.ShowDialog())

return;

Stream fileStream = dialog.OpenFile();

//radChart.ExportToExcelML(fileStream);

//this.diagram.AutoFit(new Thickness(10), false);

this.diagram.ExportToImage(fileStream);

fileStream.Close();

}

private void rgbExportBmp_Click(object sender, RoutedEventArgs e)

{

SaveFileDialog dialog = new SaveFileDialog();

dialog.DefaultExt = "*.bmp";

dialog.Filter = "Files(*.bmp)|*.bmp";

if (!(bool)dialog.ShowDialog())

return;

Stream fileStream = dialog.OpenFile();

//this.diagram.AutoFit(new Thickness(10), false);

this.diagram.ExportToImage(fileStream);

fileStream.Close();

}

answered on 10 Jun 2014, 02:20 PM

Hi Venkata,
This is a good way to workaround this issue but you'll have to update your Bmp export code - if you don't specify a bitmap encoder in the ExportToImage method it will use PngBitmapEncoder so your code should be:

this.diagram.ExportToImage(fileStream, new BmpBitmapEncoder());

As for the command - if you managed to isolate the problem into a sample application we'll be happy to examine it on our side.

Regards,
Zarko
Telerik