Create new dataItem's while providing shape options

6 posts, 1 answers
  1. Ralph
    Ralph avatar
    17 posts
    Member since:
    May 2011

    Posted 18 Feb 2015 Link to this post

    Hello,

    Is there currently a supported way of adding new elements to the diagram using the ShapeOptions type that also provides the underlying dataItem? Currently I can do diagram.addShape(shape, options) to pass in a ShapeOptions object, or diagram.dataSource.add(dataItem) to provide the dataItem and rely on the shapeDefaults. I would like the ability to combine this functionality by either passing the dataItem as part of the ShapeOptions object or as a parameter to a method with the ShapeOptions.

    Thanks
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 20 Feb 2015 Link to this post

    Hello,

    For a data-bound diagram, you can use the change event to apply options on the fly.

    For example, you can apply a color that is stored as part of the data item:
    function onChange(e) {
      var added = e.added[0];
      if (added) {
        added.redraw({
          fill: { color: added.dataItem.foo }
        });
      }
    }

    I hope this helps.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Ralph
    Ralph avatar
    17 posts
    Member since:
    May 2011

    Posted 20 Feb 2015 Link to this post

    Hi,

    Thank you for the response, however I would like the ability to apply all of the initialization data at once rather than having to conditionally update the shapes as different events fire. For instance on the drop event I would like to be able to provide one set of conditional logic to determine the underlying dataItem and its visual representation as shown in this example: http://dojo.telerik.com/iGAMI
    I receive an error when setting the dataItem on the shapesOptions object and have tried creating a valid model using the diagram.dataSource.reader.model(dataItem) function however, the appropriate bindings aren't created and the visualTemplate does not update when editing: http://dojo.telerik.com/aYiqi
    Or the ability to map the options in the schema somehow would also be acceptable as shown in this example: http://dojo.telerik.com/osOmA/6

    Thanks

  5. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 24 Feb 2015 Link to this post

    Hi,

    The schema goes only as far as built-in properties are concerned.
    There's no need to map the rest as they will not be used in any way by the diagram.

    The approach in the http://dojo.telerik.com/osOmA/6 snippet is what we'd recommend too.
    New items are added directly through the data source.
    The visual template is the same for all shapes and can call sub-templates based on data item fields.

    Mixing addShape (unbound mode) with dataSource.add is not recommended.
    When bound to a data source the widget expects all changes to channel through it.

    I hope this helps.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Ralph
    Ralph avatar
    17 posts
    Member since:
    May 2011

    Posted 25 Feb 2015 in reply to T. Tsonev Link to this post

    OK, following this model could you please provide an example of how to change a shapes connectors while in bound mode. For instance I want to have several different shapes represented using SVG paths and would like their connectors to be shape specific. I have tried changing the options.connectors array then redrawing from within the change function when the item is added to the dataSource however this does not work. http://dojo.telerik.com/osOmA/12
    If I call the init function for the shape then the connectors change but that causes other issues: http://dojo.telerik.com/Iqubi

    Thanks
  7. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 01 Mar 2015 Link to this post

    Hi,

    Apologies for the delay. I wanted to make sure that I'm not missing something.

    This is indeed a bug in the redraw method. For the moment, the following workaround is needed:
    shape.redraw({
      connectors: [{ name: "left" }, { name: "top" }, { name: "auto" }]
    });
                  
    if (shape._createConnectors) {
      shape.connectors = [];
      shape._createConnectors();
    }


    Here's the updated snippet.

    I've updated your Telerik points as a token of gratitude for your involvement.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready