Diagram inside a Dialog(modal)

[John]

I am trying to insert a blank diagram inside a modal, but when I do this the diagram has no height or width.  Looking at the geneated code I can see that the SVG's within the diagram have no height or with, but the outer divs are set to 100%  for height and width.  This is probably a loading issue.  How can I resolve this?

[Aravind Ravi]

Hi John,  

 

We have created a sample to show diagram while open dialog. By default, in the diagram , we have calculated a diagram height and width based on the parent div height and width. In this sample we have rendered diagram as template for dialog component. So while open the dialog initially, the dialog did not gets rendered, so that diagram height and width does not gets set . In this sample on button click we have opened a dialog. After dialog gets rendered we have rendered the diagram component. Please refer the sample and code example below  

 

<SfDialog Height="75%" Width="435px" ShowCloseIcon="true" @bind-Visible="Visibility"> 

        <DialogTemplates> 

            <Header> @ResultDialogHeader </Header> 

            <Content> 

                @ResultDialogMessage 

            </Content> 

            <FooterTemplate> 

                @if (Visibility) 

                { 

                   <SfDiagram Height="300px" Width="300px"></SfDiagram> 

                } 

 

            </FooterTemplate> 

        </DialogTemplates> 

    </SfDialog> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/167336/ze/Diagram-Dialog1995949298 

 

Regards  

Aravind Ravi