Use Custom MVVM Binders for Diagram Shapes and Connections
Environment
| Product | Progress® Kendo UI® Diagram for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I use custom MVVM binders for the shapes and connection of the Kendo UI for jQuery Diagram?
Solution
The following example demonstrates how to create custom MVVM binders for the shapes and connections.
By using this approach, you can:
- Have more control over the bound data.
- Use recursive logic over the data.
- Update shapes and connections data separately.
<div id="example">
<div class="demo-section k-content">
<div>
Change name of:
<input data-role="dropdownlist"
data-text-field="name"
data-value-field="id"
data-bind="source: shapesSource,
value: shapeId" />
to:
<span class="k-input k-textbox k-input-solid k-input-md k-rounded-md">
<input type="text" class="k-input-inner" data-bind="value: shapeText,
events: {
change: onShapeTextChange
}"/>
</span>
<div id="diagram" data-role="diagram"
data-layout='{"type": "tree", "subtype": "right"}'
data-shape-defaults='{"type": "circle","content":{"template": "#= name #"}, "width": "70", "height":"70", "hover":{"fill": "Orange"}}'
data-connection-defaults='{"stroke":{"color":"#979797","width":1},"type":"polyline","startCap":"FilledCircle","endCap":"ArrowEnd","content":{"template":"#= label#"}}'
data-bind="diagramShapes: shapesSource,
diagramConnections: connectionsSource"
style="height: 250px;" ></div>
<span class="k-input k-textbox k-input-solid k-input-md k-rounded-md">
<input type="text" class="k-input-inner" data-bind="value: getShapes" style="width:100%;"/>
</span>
</div>
</div>
<script>
kendo.data.binders.widget.diagramShapes = kendo.data.Binder.extend({
init: function(widget, bindings, options) {
kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
},
refresh: function() {
var that = this,
value = that.bindings["diagramShapes"].get(); //get the value from the View-Model
$(that.element).data("kendoDiagram").setDataSource(value.toJSON()); //update the widget
}
});
kendo.data.binders.widget.diagramConnections = kendo.data.Binder.extend({
init: function(widget, bindings, options) {
kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
},
refresh: function() {
var that = this,
value = that.bindings["diagramConnections"].get(); //get the value from the View-Model
$(that.element).data("kendoDiagram").setConnectionsDataSource(value.toJSON()); //update the widget
}
});
function createDigaram() {
var viewModel = kendo.observable({
shapesSource: [
{id:"one", name:"One"},
{id:"two", name:"Two"},
{id:"five", name:"Five"},
],
connectionsSource:[
{from:"one", to:"two", label: "plus one"},
{from:"one", to:"five", label: "plus three"}
],
getShapes:function (){return JSON.stringify(this.get("shapesSource"))},
shapeId: "",
shapeText: "",
onShapeTextChange: function(ev){
var id = this.get("shapeId");
var text = this.get("shapeText");
var shapes = this.get("shapesSource");
var shape = shapes.find(function(shape){
return shape.id === id;
});
var idx = shapes.indexOf(shape);
shapes.splice(idx, 1, {id: id, name: text});
}
});
kendo.bind($("#example"), viewModel);
}
$(document).ready(createDigaram);
</script>
</div>