Dynamically changing RadDiagram based on changes done on a RadGrid

[Dean]

I have a RadDiagram that changes colours of its nodes based on selections and settings in a RadGrid.

The RadGrid "updates" the diagram by writing a JSON to a textbox that the diagram reads. 

My question is how to get the RadDiagram to refresh to reflect the updated colours without refreshing the entire page.

[Vessy]

Hi Eric,

You can pass the updated JSON string directly through the client-side load() method of the diagram. Such approach is demonstrated here:
https://demos.telerik.com/aspnet-ajax/diagram/examples/saveload/defaultcs.aspx

Namely:

<telerik:RadButton ID="LoadJSON" Text="Load from JSON" OnClientClicked="loadFromJSON" AutoPostBack="false" runat="server" />

function loadFromJSON(value) {
    var json = jsonTextBox.get_value();
    loadDiagram(json);
}
function loadDiagram(json) { //load the JSON in the diagram
    diagram.load(Sys.Serialization.JavaScriptSerializer.deserialize(json));
}

Regards,
Vessy
Progress Telerik

[Dean]

Hi Vessy,

Thanks for the suggestion. I'm trying it out but getting an error that the object doesn't support property or method load. Am I referencing the diagram wrong?

[Vessy]

Hi Eric,

Can you elaborate how you are getting a reference to the diagram? Are you doing it in the way shown in the demo, in the diagram_load() handler? The code below can be found in the scripts.js tab of this demo:

var jsonTextBox, diagram;

  function diagram_load(sender) {
      diagram = sender.get_kendoWidget();

      diagram.layout({
          type: "tree",
          subtype: "left",
          roots: [diagram.getShapeById("nadal_winner")],
          verticalSeparation: 20,
          horizontalSeparation: 30
      });
  }

Regards,
Vessy
Progress Telerik