Diagram - updating datasource from Custom toolbar

[pankaj]

I am trying to add custom tool in org chart to update a value on node. The value gets updated on the datasource but not on the chart.

Nor does it trigger API hit to update the new value

$("#diagram").kendoDiagram({
                   dataSource: shapesDataSource,
                   connectionsDataSource: connectionsDataSource,
                   layout: {
                       type: "tree",
                       subtype: "tipover",
                       underneathHorizontalOffset: 140
                   },
                   shapeDefaults: {
                       visual: visualTemplate,
                       content: {
                           template: "#= dataItem.JobTitle #",
                           fontSize: 17
                       }
                   },
                   connectionDefaults: {
                       stroke: {
                           color: "black",
                           width: 2
                       }
                   },
                   //editable: {
                   //    tools: [{ name: "createShape" }, { name: "edit" },
                   //    { name: "undo" }, { name: "redo" }],
                   //    shapeTemplate: kendo.template($("#popup-editor").html())
                   //},
                   editable: {
                       tools: [{
                           type: "button",
                           text: "Set Selected Content",
                           click: function () {
                               var selected = $("#diagram").getKendoDiagram().select();
                               var content = $("#content").val();
                               for (var idx = 0; idx < selected.length; idx++) {
                                   selected[idx].dataItem.JobTitle = content;
                               }
                           }
                       }, {
                           template: "<input id='content' class='k-textbox' value='Foo' />"
                       }]
                   },
                   dataBound: onDataBound,
                   toolBarClick: onToolBarClick
               });

 

[Anton Mironov]

Hello Dimo,

Thank you for the provided code snippet!

In general, the visual changes for this case could be achieved by using the following method:

• https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/sync
  
  

Give this approach а try and let me know if I should look for another solution.

 

Kind Regards,
Anton Mironov
Progress Telerik