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

Dynamically changing RadDiagram based on changes done on a RadGrid

3 Answers 12 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Dean
Top achievements
Rank 1
Dean asked on 25 Oct 2018, 09:22 PM

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.

3 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 29 Oct 2018, 07:43 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Dean
Top achievements
Rank 1
answered on 29 Oct 2018, 02:20 PM

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?

0
Accepted
Vessy
Telerik team
answered on 29 Oct 2018, 03:45 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Diagram
Asked by
Dean
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Dean
Top achievements
Rank 1
Share this question
or