Edit dynamically added shapes

6 posts, 0 answers
  1. X
    X avatar
    12 posts
    Member since:
    Sep 2015

    Posted 19 May Link to this post

    Hi,

    I have managed to add a shape to my diagram doing the following:

    <button onclick="addValueCheck()">Add Value Check</button>

    function addValueCheck() {

            var shape = new kendo.dataviz.diagram.Shape({
                type: "rectangle",
                width: 240,
                height: 67,
                stroke: {
                    width: 1,
                    color: "#e8eff7"
                },
                fill: "#e8eff7",
                editable: true
            });
            var diagram = $("#diagram").getKendoDiagram();
            diagram.addShape(shape);
            diagram.bringIntoView(diagram.shapes);
        }

    The shape is added to the diagram visually but when I try and click it I get a Javascript error. I have attached the page I am working on and the javascript error.

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1966 posts

    Posted 23 May Link to this post

    Hello X,

    The problem i caused due to the fact that mixed binding is used. The shapes are loaded using DataSource (shapesDataSource), but the addShape method adds the shape directly to the Diagram. A valid approach should be adding the shape to the data source directly as shown in the http://dojo.telerik.com/upeZo example. 

    Regards,
    Boyan Dimitrov
    Telerik by Progress
    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. X
    X avatar
    12 posts
    Member since:
    Sep 2015

    Posted 25 May in reply to Boyan Dimitrov Link to this post

    This dojo doesnt work. No shape is added to the page.
  4. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1966 posts

    Posted 29 May Link to this post

    Hello,

    In order the shape to be shown immediately the shape should have an unique id and the DataSource should be synced. Please refer to the http://dojo.telerik.com/upeZo/5 example. 

    Regards,
    Boyan Dimitrov
    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.
  5. X
    X avatar
    12 posts
    Member since:
    Sep 2015

    Posted 13 Jun in reply to Boyan Dimitrov Link to this post

    Thanks for that.

    One other thing, is there a way to attach different properties to different shapes when you edit them?

    So for instance clicking on the President, would load up with...

    1. Name

    2. Date of Birth

    3. Date became president

    And then for Relations Manager for instance you could have....

    1. Date became Relations Manager

    2. Department

  6. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1966 posts

    Posted 15 Jun Link to this post

    Hello X,

    The editable.shapeTemplate can be defined as function in order to implement such functionality. Please refer to http://dojo.telerik.com/UVeDI example. It allows to display different template based on some condition. 

    Regards,
    Boyan Dimitrov
    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