How to customize Shapes in ToolBox item?

[Shrikant]

Hi

Please check the attached Image, I have to customized toolbox items with Images & Text

Please I need a help on this, I am not getting any way to do this customization.

Help me here

Thanks

[Shrikant]

I tried with one Custom Shape Class but while dropping shape to Diagram it does not show the Image with Shape.
Also once dropped the shape reset to default in Toolbox.

public class CustomizedShapesCollection : List<GalleryItem>
  {
       public CustomizedShapesCollection()
       {
           this.LoadData();
       }

       public IEnumerable<GalleryItem> GetItemsByType(string type)
       {
           return this.Where(i => i.ItemType.Equals(type));
       }

       private static string GetShapeName(string typeName)
       {
           typeName = typeName.Replace("Shape", string.Empty);
           StringBuilder builder = new StringBuilder(typeName);
           for (int i = 0; i < builder.Length; i++)
           {
               if (i != 0 && (char.IsUpper(builder[i]) || char.IsDigit(builder[i])))
               {
                   builder.Insert(i, " ");
                   i++;
               }
           }
           return builder.ToString();
       }

       private void LoadData()
       {
           ImageBrush imgBrush = new ImageBrush();
           imgBrush.ImageSource = new BitmapImage(new Uri(@"Images/email_send.png", UriKind.Relative));
           imgBrush.Stretch = Stretch.Fill;
           RadDiagramShape tempObj = new RadDiagramShape()
           {
               Background = imgBrush
           };
           this.Add(new GalleryItem("Send Mail", tempObj, ToolboxCategoryNames.BasicShapes));

       }
   }

<features:Toolbox x:Name="toolbox" Margin="15" HorizontalAlignment="Right" ItemsSource="{Binding Items}" />

Please can someone here help me, How can I achieve Customization of Shapes?

[Alex Fidanov]

Hi,

 Dropping a shape from the Toolbox will use the serialization mechanism to create a new shape and add it to the RadDiagram. I can see that you are using an image brush to set the background of the shape. Please note that ImageBrushes do not have built-in serialization support. You would have to serialize/deserialize the image brush manually.

Another approach that I would recommend, is setting the image's source as content of the shape. Then, you can set the ContentTemplate and use an image, which source will be bound to the shape's content. This way, you would get the serialization out of the box.

All the best,
Alex Fidanov
the Telerik team

[Yoan]

Alex, could you give a sample of what you mean , because I have similar problem and I am not able to solve it through your solution , may be I am doing something wrong.

Thanks in advance,
Yoan

[Ambit]

Hi Alex,

I am also looking for the same thing , Can you please provide sample solution here?

Thanks

[Alex Fidanov]

Hello,

 Here is the DataTemplate and Image approach:

Populating the toolbox:

            RadDiagramShape item1 = new RadDiagramShape()
{
    Content = @"Images/Desert.jpg",
};
RadDiagramShape item2 = new RadDiagramShape()
{
    Content = @"Images/Hydrangeas.jpg",
};
items.Add(new GalleryItem("Item 1", item1, ToolboxCategoryNames.BasicShapes));
items.Add(new GalleryItem("Item 2", item2, ToolboxCategoryNames.BasicShapes));

The RadDiagram and the Shape style:

<UserControl.Resources>
        <Style TargetType="telerik:RadDiagramShape">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Image Source="{Binding}" MaxWidth="100" MaxHeight="100"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <telerik:RadDiagram Grid.Column="1"/>
        <features:Toolbox x:Name="ToolBox"/>
    </Grid>

Regards,
Alex Fidanov
the Telerik team

[Yoan]

Hello Alex, 

This sample is really working, but when I try binding TextBlock's Text property to a property of a bussiness object , which I have put in the Content , only the shape in toolbox gets the binding , for the shape which is created after the drop there is Binding error claiming property is not found.

Example :

         

RadDiagramShape shape = new RadDiagramShape()
                {
                    Content = new DataItem() { SomeTestData = "Yes test really" },
                };


            GalleryItem git = new GalleryItem("Function module",shape,"MyOwnType");

            galleryItems.Add(git);

<Style TargetType="telerik:RadDiagramShape">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid Background="Green" Width="150" Height="150">
                            <TextBlock Text="{Binding SomeTestData}"/>
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>

            
Result before/after drop are in the attached files.

[Shrikant]

Hi Alex,
Thank you so much for a Solution,

But You have binded Image Path to Content property & while editing Text its showing Image Path which is not good.

Is there any other way to do the same?

Thanks again

[Shrikant]

Any luck here?

[Alex Fidanov]

Hi,

 Shrikant, you can set the IsEditable property of the RadDiagram or handle the PreviewBeginEdit event of the diagram shape and cancel the beginning of edit mode.

Yoan, as I said, the content is not serialized if it is a business object. If you want to have a business object (like DataItem) as content, you would have to serialize it manually. For this, you have to inherit the RadDiagramShape class and override the Serialize and Deserialize methods. You can see how to save a custom property with the SerializationInfo here.

Greetings,
Alex Fidanov
the Telerik team

[Shrikant]

Hi Alex,
1. As per your solution it will not allow me to enter Text on Shapes, so the problem is
I want Image & Text too on Shapes.
& User can edit the text also.

2. The second solution suggested for Yoan, I tried this also for Custom Property but ShapeSerialized event is not working for Diagram.
Rather ShapeDeserialized is getting fired when shapes get dropped on Diagram.
Can you please tell one example with Custom property like ImagePath(string),ShapeName(string)?

please help me bit more,its hard to find sample codes for Diagram Controls here

Thanks for Support

[Alex Fidanov]

Hello,

 The edit mode is editting the content of the RadDiagramShape. If you have an image as content, then you will get the image path as editting content. If you want to edit other content, then you must store the image path elsewhere and not as content, for example the Tag property or you can subclass the RadDiagramShape and create a custom property for the image path.

The ShapeSerialized event is not raised, because the shape is not being serialized by the RadDiagram control. I would recommend inheriting the shape itself and overriding the Serialize and Deserialize methods.

Kind regards,
Alex Fidanov
the Telerik team

[Shrikant]

Hi Alex,
Thank you so much for your great support,
I finally did the Custom Shape with Diagram & Toolbox of Diagram using Custom Properties.


Thanks Again

[Hussain]

Hi Alex,

   Could you please show me some code snippets on how to bind the image path to the "Tag" property? Thanks!

[Alex Fidanov]

Hi,

 It depends on how you have defined the image - in the control template or in the content template, but you can use the RelativeSource of the binding expression and one of its options. For example, here you can find how to use the ancestor mode.

All the best,
Alex Fidanov
the Telerik team

[Ayaz]

Hi

Please check the attached Images, I have to customized shapes with Images & Text, I need a help on this, I am not getting any way to do this customization (I want to show default label with dropped shape, user has option to modify label of his choice).

Help me here, Could you please show me some code snippets on how to acheive this? Thanks!

[Petar Mladenov]

Hello Аyaz,

 You can find a sample attached demonstrating adding Label below the Shape. It also shows how to add additional TabItem in the SettingsPane which will provide TextBox for editing the Label's Text.
Let us know if it helps you proceed further.

Regards,
Petar Mladenov
Telerik

[Bhavya]

Hi Peter Mladenov,

I am creating a raddigram as in this link "http://docs.telerik.com/devtools/aspnet-ajax/controls/diagram/functionality/shape-templates"

but i am not using DiagramShape. i am able to get the data as shown in the picture pic1.

later i am calling a function to check the value has been increased or not, if value increased i have to update the value. only value should be updated, i should not redraw whole shape. can i do that? if so how?

Please help me in this context.

in timer i am doing in this way but not able to update.

aspx:

<telerik:RadDiagram runat="server" ID="theDiagram" width="1330" RenderMode="Auto">
                        <ClientEvents OnClick="OnClick"  />
                        <ShapeDefaultsSettings Visual="ImageTemplate"></ShapeDefaultsSettings>

</telerik:RadDiagram>

ImageTemplate:

function ImageTemplate(options) {
                   var dataviz = kendo.dataviz;
                    var group = new dataviz.diagram.Group({ autoSize: true });
                    var backGID = options.id;
                    if (backGID != "s1") {
                        group.append(new dataviz.diagram.Rectangle({
                            x: 0,
                            y: 0,
                            width: options.width,
                            height: options.height,
                            width: 195,
                            height: 75,
                            border_radius: 5,
                            background: "webkit-linear-gradient(top,  #bed2e2 0%,#abd3ee 94%,#d5ebfb 100%)",
                            fill: {
                                color: "#bed2e2"

                            }
                        }));

                        var textWrap1 = options.content.substring(0, 12);
                        var textWrap2 = options.content.substring(12, 19);
                        group.append(new dataviz.diagram.TextBlock({
                            text: textWrap1,
                            color: "#000000",
                            x: 70,
                            y: 10
                        }));

                        if (textWrap2 != "") {
                            group.append(new dataviz.diagram.TextBlock({
                                text: textWrap2,
                                color: "#000000",
                                x: 70,
                                y: 25
                            }));
                        }


                        var img = options.content;
                        if (img.indexOf("ead") != -1) {
                            img = "../Images/Img_HeadCount.png";
                            group.append(new dataviz.diagram.TextBlock({
                                text: options.Counter,
                                color: "#FF0000",
                                x: 100,
                                y: 45
                            }));
                        }
                        else if (img.indexOf("oll") != -1) {
                            img = "../Images/Img_Rollcall.png";
                            group.append(new dataviz.diagram.TextBlock({
                                text: options.Counter,
                                color: "#FF0000",
                                x: 100,
                                y: 45
                            }));
                           
                        }
                        else {
                            img = "../Images/Img_Assembly_Point.png";
                            group.append(new dataviz.diagram.TextBlock({
                                text: options.Counter,
                                color: "#FF0000",
                                x: 100,
                                y: 45
                            }));
                        }
                        var image = new dataviz.diagram.Image({
                            source: img,
                            x: 5,
                            y: 5,
                            width: 60,
                            height: 60,
                        });
                        group.append(image);
                    }
                    else {
                        var jsonFilename = '<%=backImageUpload%>';
                        if (jsonFilename == null || jsonFilename == "") {
                            var imageFolder = "../backgroundImage/backgound.jpg";
                        }
                        else {
                            var imageFolder = "../backgroundImage/" + jsonFilename + ".jpg";
                        }

                        var wid = dataviz.DEFAULT_WIDTH;
                        var image = new dataviz.diagram.Image({
                            source: "../backgroundImage/" + options.content + ".jpg",
                            x: 10,
                            y: 7,
                            width: wid + 550,
                            height: 400 + 200,
                        });
                        group.append(image);
                    }
                    return group;
                };

timer function:

function CountDownTimer() {
                    $.ajax({
                        type: "POST",
                        url: "Frm_MusteringMonitor.aspx/GetSessionValue",
                        contentType: "application/json;",
                        data: JSON.stringify(),
                        success: function (Data) {
                            if (Data.d != "") {
                           var diagramWidget1 = $find("<%= theDiagram.ClientID %>").kendoWidget;
                                var listOfObject = JSON.parse(Data.d);
                                var dectionaryItem = Data.d.replace(/[&\/\\#+()$~%.'"*?<>{}]/g, '');
                                var getVal = dectionaryItem.split(',');
                                var leng = diagramWidget1.shapes.length;
                                var i = 1;
                                for (i = 1; i < leng; i++) {
                                    var jsonObjName = getVal[i - 1].split(":");
                                    var DiaObjname = diagramWidget1.shapes[i].options.content;
                                    if (jsonObjName[0] === DiaObjname) {
                                        var NewValue = jsonObjName[1];
                                        diagramWidget1.shapes[i].options.Counter = NewValue ;

// i have three shapes so doing loop here and i am able to get the value here but not updating on diagram
                                    }
                                }
                            }
                           },
                           error: function (XMLHttpRequest, textStatus, errorThrown) {
                           }
                       });
                }

Thanks in advance.

 

[Petar Mladenov]

Hello Manu,

This thread is RadDiagram for Silverlight. Could you please post this question in Telerik ASP net - related forums on order to receive expertise from our ASP Net teams. 

Regards,
Petar Mladenov
Telerik by Progress

[Bhavya]

Okay Peter. thanks