Symbol Palette

[indrani Gajjarapu]

Hi,

I am working on Symbol Palette which doesn't give any compile errors or console errors but not rendered properly..

I have replicated the issue in sample attached. 

I have removed the bin folder to decrease the file size.

Please give me a work through this

Attachment: SyncfusionMvcApplication3_e0c64bfd.7z

[indrani Gajjarapu]

Here is the bin folder if u need

Attachment: bin_c52b8be2.zip

[Shyam G]

Hi Indrani, 

We have removed the unnecessary code from the _Layout.cshtml file and provided the modified sample below. 

Sample:https://www.syncfusion.com/downloads/support/directtrac/general/ze/indranidbsample1648577378 

Regards, 

Shyam G 

[indrani Gajjarapu]

Hi Shyam,

Thank you for your quick reply.

It works!!..

[indrani Gajjarapu]

Hi,

My sample project works if i delete "class='container'" in _Layout Page.I have created a sample project just to replicate the issue.But i want the diagram to be rendered with the layout in my actual project. Can you please send me a sample project with the layout in it using the class container.

<div class="container">
       @RenderBody()   	     
 </div>

[Shyam G]

Hi Indrani, 

The reported issue occurs due to the customization of styles done in the site.css file. We have overridden the style.css file and provided the modified sample below. 

Here is the code example of overridden style 

Code example: 

  <style> 

        .body-content{ 

            padding-left:0px; 

            padding-right:0px; 

        } 

        .container{ 

            width:100%; 

            height:100%; 

        } 

    </style> 

Sample:https://www.syncfusion.com/downloads/support/directtrac/general/ze/modifiedindranisample980786725 

Regards, 

Shyam G 

[indrani Gajjarapu]

Hi,

In my project i am using style.css

#page-wrapper {margin:0 0 0 220px;} causes the problem.

I have replicated the issue in the project..Should have done it in prior..sorry about that..

Attachment: SyncfusionMvcApplication3_f443777a.7z

[Shyam G]

Hi Indrani, 

 

In our Diagram Builder sample, we have set the diagram width based on the document and palette width(subtracting document width-palette width). In your sample, you have set an margin(#page-wrapper {margin:0 0 0 220px;}), so we have set the diagram width based on the parent element width(#main-right) and palette width as shown in the below code example. Please refer to the sample below. 

 

Code example: 

Method.js file 

function updateSize() { 

. . . .  

$("#main-right").css("width", "calc(100% - 270px)"); 

. . . . 

. . . . 

} 

 

function setDiagramSize(showpropeditor) { 

 . . . 

 . . . 

$("#main-right").css("width", "calc(100% - 270px)"); 

. . .  

} 

 

Sample:https://www.syncfusion.com/downloads/support/directtrac/general/7z/SyncfusionMvcApplication31579789208 

 

Regards, 

Shyam G 

[indrani Gajjarapu]

Hi,

Drag and drop functionality works. However, Properties Editor to the right is not shown when settings icon on the node is clicked.

[Shyam G]

Hi Indrani, 

Please modify the below code example in your sample to resolve your reported issue. 

Code example: 

Methods.js 

function setDiagramSize(showpropeditor) { 

    var width = $(window).width() - $("#main-left").width(); 

    var pwidth = $("#propertyEditor").width(); 

    var width = 270; 

    if (!showpropeditor) { 

        pwidth = 0; 

    } 

    else { 

        width += pwidth; 

    } 

    $("#main-right").css("width", "calc(100% - " + width + "px)"); 

    diagram.updateViewPort(); 

} 

Regards, 

Shyam G