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

Diagram - updating datasource from Custom toolbar

1 Answer 144 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
pankaj
Top achievements
Rank 1
Veteran
pankaj asked on 26 Aug 2020, 08:03 PM

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
               });

 

1 Answer, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 28 Aug 2020, 02:36 PM

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:

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

 

Kind Regards,
Anton Mironov
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

Tags
Diagram
Asked by
pankaj
Top achievements
Rank 1
Veteran
Answers by
Anton Mironov
Telerik team
Share this question
or