Dynamically changing RadDiagram based on changes done on a RadGrid

4 posts, 1 answers
  1. Dean
    Dean avatar
    13 posts
    Member since:
    Oct 2018

    Posted 25 Oct 2018 Link to this post

    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.

  2. Vessy
    Admin
    Vessy avatar
    2093 posts

    Posted 29 Oct 2018 Link to this post

    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.
  3. Dean
    Dean avatar
    13 posts
    Member since:
    Oct 2018

    Posted 29 Oct 2018 in reply to Vessy Link to this post

    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?

  4. Answer
    Vessy
    Admin
    Vessy avatar
    2093 posts

    Posted 29 Oct 2018 Link to this post

    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.
Back to Top