Changing Diagram Constraints of a Diagram that is inside of a Dashboard Layout's Panel

[Shani Berger]

I'm currently working on a project in which I need to show pre-designed diagrams inside multiple panels of a Dashboard Layout. I do this by inserting a diagram from an Observable Collection into a PanelModel's content on creation, and then loading the diagram onto the panel from a JSON file, like so:

Creating the panel:

PanelModel panelModel = new PanelModel();

panelModel.Content = @<div style="height:100%; width:100%">

<SfDiagram @ref="DiagramCollection[diagramIndex]">

</SfDiagram>

</div>;

await dashboardObject.AddPanel(panelModel);

Loading the JSON file:​

string json = System.IO.File.ReadAllText("wwwroot/Diagrams/DemoDiagram.json");

DiagramCollection[diagramIndex].LoadDiagram(json);

Now, this seems to be working fine. The problem is, that the Diagram shown in the panel needs to be disabled to the user, i.e. the user should not be able to modify the Diagram in any way.

I know that you can set the Diagram Constraints to "None", but the Constraints in the JSON file are set to "Default", as it comes directly from where you CAN change the Diagram, and I can't seem to directly change the Diagram's Constraint because it's a Blazor Parameter. I've tried connecting the Diagram Constraints to an outside variable when I create the PanelModel:

panelModel.Content = @<div style="height:100%; width:100%">

<SfDiagram @ref=DiagramCollection[diagramIndex]" Constraints="_constraints">

</SfDiagram>

</div

But it doesn't seem to work. 

How should I do this?

[Gowtham Gunashekar]

 

Hi Shani 

 

 

Please refer to the following sample for how to load a saved diagram inside the dashboard layout and set the different constraints after loaded the saved diagram. In the sample we have added a button to load the saved diagram into the dashboard diagram, in the same method we can change the constraints for the diagram. We suggest you add constraints to the diagram at the tag level and change the required constraints after loading the saved diagram.  

 

Code snippet: 

    public async Task LoadDiagram() 

    { 

        string json = System.IO.File.ReadAllText("wwwroot/Diagram.json"); 

        json = json.Replace(System.Environment.NewLine, string.Empty); 

        Diagram.LoadDiagram(json.ToString()); 

        Constraints = DiagramConstraints.None; 

        StateHasChanged(); 

    } 

    public async Task AddClick(EventArgs args) 

    { 

        string ContentValue = this.Count.ToString(); 

        PanelModel panel = new PanelModel 

        { 

            Id = this.Count.ToString() + "_layout", 

            SizeX = 3, 

            SizeY = 3, 

            Column = 0, 

 

            Row = 0, 

            Content =@<div style="height:100%; width:100%"> 

        <SfDiagram @ref="Diagram" Constraints="@Constraints"> 

        </SfDiagram> 

    </div> 

        }; 

        await dashboardObject.AddPanelAsync(panel); 

        this.Count = this.Count + 1; 

    } 

 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DiagramLoadChangeConstraints2126123100.zip 

   

Regards   

Gowtham