radDiagramToolBar - disable gallery / node

[Lior]

Do you know of  a way to disable a gallery and/or single nodes (GraphNode / NodeViewModelBase) - so it will be "grayed" and can't be dragged.

I wan't to disable some objects in that palette when certain condition apply to the diagram (max nodes count)

Thanks,
Guy

[Petar Mladenov]

Hello Guy,

 This is an interesting requirement. We prepared a sample project for you and we hope it can be a good starting point. I uses MVVM to fill the ToolBox based on this article. We added an IsEnabled property of the type MyShape:

private bool isEnabled;
        public bool IsEnabled
        {
            get { return this.isEnabled; }
            set
            {
                if (this.isEnabled != value)
                {
                    this.isEnabled = value;
                    this.OnPropertyChanged("IsEnabled");
                }
            }
        }

and we introduced an additional Path in the ToolBoxItemTemplate:

<Grid>
                              <telerik:RadDiagramShape Margin="15"
                                               VerticalAlignment="Top"
                                               HorizontalContentAlignment="Center"
                                               VerticalContentAlignment="Center"
                                               Geometry="{Binding Geometry}"
                                               IsHitTestVisible="False"
                                               Visibility="{Binding IsEnabled, Converter={StaticResource BooleanToVisibilityConverter}}"/>
                              <Path Visibility="{Binding IsEnabled, Converter={StaticResource invertedConverter}}"
                                    Data="{Binding Geometry}" Fill="Gray" Margin="15" Stretch="Fill"
                                    />
                          </Grid>

On Diagram.Drop event we increment the number of shapes (we save them int he ViewModel) and if the number is > 3, we disable certain MyShape-s.

private void DisableSomeShapes()
    {
        this.Items[0].Shapes[0].IsEnabled = false;
        this.Items[0].Shapes[2].IsEnabled = false;
        this.Items[0].Shapes[4].IsEnabled = false;
    }

This makes the Path visible and the Shape invisible in the template and the drag is not possible over these "disabled shapes".
However, keep in mind that the number of shapes is changed when you perform delete , cut.. So you can subscribe to the execution of DeleteCommand to update the DiagramShapesCount in the ViewModel.

Please check out the solution and let us know if it helps you or not.

Regards,
Petar Mladenov
the Telerik team

[Lior]

Hi,

The sample work OK, but when i try to implement it in my code i fail to see the change, i am using a MVVM with a slightly more complex template:

<DataTemplate x:Key="ToolboxItemTemplate">
    <Border Width="76"
            Height="100"
            Margin="0 1 1 0"
            Background="Transparent"
    Visibility="{Binding IsEnabled, Converter={StaticResource BooleanToVisibilityConverter}}"
    >
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Viewbox Width="64"
                     Height="80"
                     Margin="5 10 5 0"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Top"
                     Stretch="Uniform">
                <Grid>
                    <StackPanel>
                        <Image Source="{Binding ImageName}" />
                        <TextBlock Grid.Row="1"
                           Margin="0 0 0 5"
                           HorizontalAlignment="Left"
                           FontFamily="Segoe UI Semibold"
                           Padding="4 0"
                           Text="{Binding Title}"
                           TextAlignment="Center"
                           TextWrapping="Wrap"
                           Visibility="{Binding IsEnabled, Converter={StaticResource BooleanToVisibilityConverter}}"/>

                        <Path Visibility="{Binding IsEnabled, Converter={StaticResource invertedConverter}}"
                      Data="{Binding Geometry}" Fill="Gray" Margin="15" Stretch="Fill"
                      />
                    </StackPanel>
                </Grid>
            </Viewbox>
        </Grid>
    </Border>
</DataTemplate>

The shape in the toolbox do not get disabled, am I missing someting ?...

[Petar Mladenov]

Hi Guy,

 In the project with Shape and Path, the idea was that they both share common geometry and the path covers entirely and precisely the shape behind it. So this way we can achieve a disabled look and feel, actually the Style of the RadDiagramShape does not provide a disabled state.

 In your XAML I can see Image and Path over the Image but the problem is that the Path does not cover entirely the Image and you cannot achieve the same disabled look and feel. However, you can consider binding the opacity of the Image. Furthermore, you have to change the code behind too. When dragging Image, the e.Entity in ItemSerializing will not be DiagramShape. If you need to serialize the Image I encourage you to serialize the path to the Image in string, instead of representing the image in a binary converted to string. On shape Deserialized you have to set a Content (holding the Image) of the new Shape in Diagram.

Regards,
Petar Mladenov
the Telerik team