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

Create custom items

11 Answers 90 Views
Diagram, DiagramRibbonBar, DiagramToolBox
This is a migrated thread and some comments may be shown as answers.
Sina
Top achievements
Rank 1
Sina asked on 15 Jun 2017, 05:02 AM

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! 

11 Answers, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 15 Jun 2017, 12:57 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Sina
Top achievements
Rank 1
answered on 16 Jun 2017, 03:06 AM

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. 

 

 

0
Sina
Top achievements
Rank 1
answered on 16 Jun 2017, 03:29 AM

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

 

 

 

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 19 Jun 2017, 07:52 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Sina
Top achievements
Rank 1
answered on 20 Jun 2017, 01:21 AM

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.

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 21 Jun 2017, 08:24 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Sina
Top achievements
Rank 1
answered on 27 Jun 2017, 02:21 AM
Thank you, Dess. 
0
Paul
Top achievements
Rank 1
answered on 10 Aug 2017, 02:57 PM

Hi,

 

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

 

br

Paul

0
Hristo
Telerik team
answered on 11 Aug 2017, 11:54 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tino
Top achievements
Rank 1
answered on 01 Sep 2017, 04:53 AM

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.

 

 

0
Hristo
Telerik team
answered on 01 Sep 2017, 08:38 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Diagram, DiagramRibbonBar, DiagramToolBox
Asked by
Sina
Top achievements
Rank 1
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Sina
Top achievements
Rank 1
Paul
Top achievements
Rank 1
Hristo
Telerik team
Tino
Top achievements
Rank 1
Share this question
or