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

Create new dataItem's while providing shape options

5 Answers 228 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Ralph
Top achievements
Rank 1
Ralph asked on 18 Feb 2015, 11:04 PM
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

5 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 20 Feb 2015, 03:54 PM
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!
 
0
Ralph
Top achievements
Rank 1
answered on 20 Feb 2015, 05:13 PM
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

0
T. Tsonev
Telerik team
answered on 24 Feb 2015, 03:56 PM
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!
 
0
Ralph
Top achievements
Rank 1
answered on 25 Feb 2015, 09:13 PM
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
0
Accepted
T. Tsonev
Telerik team
answered on 02 Mar 2015, 05:35 AM
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!
 
Tags
Diagram
Asked by
Ralph
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Ralph
Top achievements
Rank 1
Share this question
or