Create custom items

[Sina]

Hi, 

how to create three items which have three different images. I read the previous answers, but I could not find the answer 

//////////////////////////

DiagramListViewDataItem item = new DiagramListViewDataItem();
item.Key = "MyShape";
item.Shape = new AShape();
item.Group = radDiagramToolbox1.Groups[0];
radDiagramToolbox1.Items.Add(item);

//////////////////////////

But the above code is about custom shape not custom image! 

[Dess | Tech Support Engineer, Principal]

Hello Sina, 

Thank you for writing.  

According to the provided brief description, I suppose that you are trying to add a custom DiagramListViewDataItem to the RadDiagramToolbox with a specific image. For this purpose, it is necessary to set the DiagramListViewVisualItem.Image property but hide the DiagramListViewVisualItem.ShapeElement. However, note that it is important to have a shape because when dropping the toolbox item a RadDiagramShape is created with the respective shape. 

public RadForm1()
{
    InitializeComponent();
    new RadControlSpyForm().Show();
    this.radDiagramToolbox1.VisualItemFormatting += radDiagramToolbox1_VisualItemFormatting;
    DiagramListViewDataItem item = new DiagramListViewDataItem();
    item.Key = "MyShape";
    item.Text = "My Shape";
    item.Shape = new AShape();
    item.Group = radDiagramToolbox1.Groups[0];
    this.radDiagramToolbox1.Items.Add(item);
}

public class AShape : ElementShape
{
    public override GraphicsPath CreatePath(Rectangle bounds)
    {
        GraphicsPath path = new GraphicsPath();
        path.AddString("A", new FontFamily("Arial"), 0, 50, Point.Empty, StringFormat.GenericTypographic);
        return path;
    }
}

private void radDiagramToolbox1_VisualItemFormatting(object sender, ListViewVisualItemEventArgs e)
{
    DiagramListViewDataItem dataItem = e.VisualItem.Data as DiagramListViewDataItem;
    if (dataItem != null)
    {
        if (dataItem.Key == "MyShape")
        {
            DiagramListViewVisualItem visual = e.VisualItem as DiagramListViewVisualItem;
            visual.Image = Properties.Resources.Earth;
            visual.ImageLayout = ImageLayout.Zoom;
            visual.ShapeElement.Opacity = 0;
        }
    }
}

I hope this information helps. Should you have further questions I would be glad to help.

Regards,
Dess
Progress Telerik

[Sina]

Hi Dess,

Thank you for the answer. Now I understood how to create a new item to the list, Honestly, the names like DiagramListViewDataItem, RadDiagramToolbox, DiagramListViewVisualItem are a bit difficult to be memorized! 

I defined a shape like this

*****************************

RadDiagramShape shape1 = new RadDiagramShape()
            {
                Text = "",
                Shape = new AShape(),
                BackColor = Color.LimeGreen,

                Image = ?????

       
            };

*********************************

I don't know how to set the same image to be shown in diagram, please see the attached.

Honestly, it's complicated.

Thank you. 

 

 

[Sina]

Dess,

I am not sure, maybe there is an event which is fired when dragging. If yes, again I put the name of item.key in If block ...

 

 

 

[Dess | Tech Support Engineer, Principal]

Hello Sina, 

Thank you for writing back. 

You can handle the RadDiagramToolbox1.ListViewElement.DragDropService.PreviewDragDrop event and assign the RadDiagramShape.DiagramShapeElement.Image property. Here is a sample code snippet: 

public RadForm1()
{
    InitializeComponent();

    this.radDiagramToolbox1.ListViewElement.DragDropService.PreviewDragDrop
        += DragDropService_PreviewDragDrop;
}

private void DragDropService_PreviewDragDrop(object sender, RadDropEventArgs e)
{
    DiagramListViewVisualItem dragItem = e.DragInstance as DiagramListViewVisualItem;
    RadDiagramElement dropTarget = e.HitTarget as RadDiagramElement;
    if (dragItem!=null && dropTarget !=null && dragItem.Data.Key=="MyShape")
    {
        e.Handled = true;
        RadDiagramShape shape = dropTarget.Shapes.Last() as RadDiagramShape;
        shape.DiagramShapeElement.Shape = null;
        shape.BackColor = Color.Transparent;
        shape.DiagramShapeElement.Image = dragItem.Image;
        shape.DiagramShapeElement.ImageLayout = dragItem.ImageLayout;

    };
}

I hope this information helps. If you have any additional questions, please let me know. 

Regards,
Dess
Progress Telerik

[Sina]

Hi Dess, 

Thank you for your help, I also found a way but I am not sure I used the rules correctly!

**************************************************

// event
            this.radDiagramToolbox1.VisualItemFormatting += radDiagramToolbox1_VisualItemFormatting;

            // item
            DiagramListViewDataItem item = new DiagramListViewDataItem() ;
            item.Key = "Unit";
            // item.Text = "Unit";

            // shape
            RoundRectShape rec = new RoundRectShape();
            rec.Radius = 0;

            // set
            item.Shape = rec;

            // group
            item.Group = this.radDiagramToolbox1.Groups[0];
            this.radDiagramToolbox1.Items.Add(item);

****************************************************

event ->

****************************************************

private void radDiagramToolbox1_VisualItemFormatting(object sender, ListViewVisualItemEventArgs e)
        {
            DiagramListViewDataItem dataItem = e.VisualItem.Data as DiagramListViewDataItem;
            if (dataItem != null)
            {
                DiagramListViewVisualItem el = e.VisualItem as DiagramListViewVisualItem;
                if (dataItem.Key == "Unit")
                {
                    // on toolbox
                    el.Image = Properties.Resources.units;
                    el.ImageLayout = ImageLayout.Zoom;
                    el.ShapeElement.Opacity = 0;
                    el.Text = "";
                    el.TextElement.Text = "";

                    // on diagram
                    el.ShapeElement.BackColor = Color.Transparent;
                    el.ShapeElement.Image = Properties.Resources.units;
                    el.ShapeElement.ImageLayout = ImageLayout.Stretch;
                    el.ShapeElement.Text = "";
                    el.ShapeElement.Size = new Size(110, 50);
                    // el.ShapeElement.Name = "Unit";
                    el.ShapeElement.BorderThickness = new Padding(0);

                }
                else
                {
                    el.ShapeElement.BackColor = Color.FromArgb(37, 160, 218);
                }
            }
        }

 

**********************************************************

it's working ;) 

My last question, I am wondering where I can find the documentation about telerik? as I visited 

 

docs.telerik.com/devtools/winforms/diagram/diagram-items/connections/connections

 

but I cannot find the code like the events and other tricks! 

I have many questions as I am trying to use diagram component as a flow diagram, to connect two units programmatically.  

Thank you.

[Dess | Tech Support Engineer, Principal]

Hello Sina, 

Thank you for writing back. 

The provided code snippet seems OK. Feel free to use it if it achieves your custom requirement.

The documentation regarding the RadDiagramToolbox is available here: http://docs.telerik.com/devtools/winforms/diagram/toolbox

However, it doesn't contain the demonstrated customizations as it is not a common case to customize the RadDiagramToolbox in that way. Note that RadDiagramToolbox is a derivative of the RadListView. Hence, you can refer to the RadListView's documentation in order to get a better understanding of the formatting options. 

I hope this information helps. If you have any additional questions, please let me know. 
Regards,
Dess
Progress Telerik

[Sina]

Thank you, Dess. 

[Paul]

Hi,

 

is it possible to add a "normal" control object like button or even an RadChart as RadDiagramShape ?

 

br

Paul

[Hristo]

Hello Paul,

I have answered your question in the other thread you have opened: http://www.telerik.com/forums/extended-diagram-shape.

In the future please avoid duplicating your questions as this may slow down our response. Thank you for the understanding.

I hope this helps.

Regards,
Hristo
Progress Telerik

[Tino]

The entire toolbox documentation (apart from class docs) is below. This is equivalent to just a 'design time' page from other controls. Is it possible to get more usage documentation? If I've missed it, please let me know.

Using the RadDiagramToolbox at design time
Since RadDiagramToolbox is a separate control it is available in the toolbox. Here is how to put it in action:
Drag and drop RadDiagramToolbox on the form.
Drag and drop RadDiagram on the form.
Run the application. Now, you are allowed to drag any shape from the RadDiagramToolbox and drop it onto the RadDiagram.

 

 

[Hristo]

Hi Tino,

Thank you for writing.

Indeed the documentation of the diagram toolbox control is scarce. That is why I have logged an internal item to improve it. I have also updated your Telerik points for bringing this question.

In the meantime, please let me know if you have some specific questions and I will try to help you.

Looking forward to your reply.

Regards,
Hristo
Progress Telerik