Create custom items

12 posts, 0 answers
  1. Sina
    Sina avatar
    13 posts
    Member since:
    Jan 2011

    Posted 15 Jun Link to this post

    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! 

  2. Dess
    Admin
    Dess avatar
    2103 posts

    Posted 15 Jun Link to this post

    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.
  3. Sina
    Sina avatar
    13 posts
    Member since:
    Jan 2011

    Posted 15 Jun in reply to Dess Link to this post

    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. 

     

     

  4. Sina
    Sina avatar
    13 posts
    Member since:
    Jan 2011

    Posted 15 Jun in reply to Dess Link to this post

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

     

     

     

  5. Dess
    Admin
    Dess avatar
    2103 posts

    Posted 19 Jun Link to this post

    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.
  6. Sina
    Sina avatar
    13 posts
    Member since:
    Jan 2011

    Posted 19 Jun in reply to Dess Link to this post

    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.

  7. Dess
    Admin
    Dess avatar
    2103 posts

    Posted 21 Jun Link to this post

    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.
  8. Sina
    Sina avatar
    13 posts
    Member since:
    Jan 2011

    Posted 26 Jun in reply to Dess Link to this post

    Thank you, Dess. 
  9. Paul
    Paul avatar
    6 posts
    Member since:
    Oct 2014

    Posted 10 Aug Link to this post

    Hi,

     

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

     

    br

    Paul

  10. Hristo
    Admin
    Hristo avatar
    1023 posts

    Posted 11 Aug Link to this post

    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.
  11. Tino
    Tino avatar
    37 posts
    Member since:
    Jul 2017

    Posted 31 Aug in reply to Dess Link to this post

    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.

     

     

  12. Hristo
    Admin
    Hristo avatar
    1023 posts

    Posted 01 Sep Link to this post

    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.
Back to Top