Diagram with Devexpress CallbackPanel

[David van Laar Veth]

I am trying to use a diagram within a Devexpress Callback Panel. The diagram loads properly on first time load, but does not initialize after a callback is performed - there are just empty html divs in place of where the controls were.

I think I am missing an initialization call or script being run - can you point me to where the diagram is being initialized, and how I can run this after every callback?

Thanks

[Shyam G]

Hi David van Laar Veth, 

 

When you perform callback using DevExpress, the diagram scripts are not initialized and so the diagram is not rendered. So please initialize the diagram in DevExpress EndCallback event. Please refer to the code example below.  

Code example: 

var panel = new ASPxCallbackPanel(); 

//callback event of devexpress 

panel.ClientSideEvents.EndCallback = "EndCallback"; 

 

function EndCallback() {             

            $("#diagram").ejDiagram({ 

                width:"1000px", 

                height:"1000px", 

            }); 

        } 

Note: diagram is an diagram id. 

 

Regards, 

Shyam G 

[David van Laar Veth]

Hi Shyam,

Your solution makes the diagram re-initialize, thanks.

But my settings from the server side are not loading again:

            DiagramWebControl.OnClientDrop = "drop";

            DiagramWebControl.OnClientTextChange = "textChange";

            DiagramWebControl.Model.Nodes.Add(node);

            //etc

Also, I have a Symbol Palette which is not re-initializing, even though I am using the same method:

    $("#DiagramSymbolPalette").ejSymbolPalette({

        diagramId: "DiagramWebControl",

        width: "160px",

        height: "100%"

    });

Regards, 

David

[David van Laar Veth]

Hi,

Any update on this?

Thanks

[Naganathan Ganesh Babu]

Hi, 

 

Sorry for the delay update.  

 

We suspect that, you have created a diagram both via ASPX tag (i.e. using “<ej;diagram> </ej:diagram>” tags) and HTML element in your project. So only the diagram gets initialized twice at your end. we have created a sample by initializing the diagram using Html elements and the diagram related codes are given in CS page. Please refer to the below attached code example and sample. 

 

Code example: 

 

<div style="float: left;width:75%;height:100%"> 

                <div id="diagram"> 

                </div> 

            </div> 

 

Sample: http://www.syncfusion.com/downloads/support/forum/137928/ze/SyncfusionASPNETApplication21235052096  

 

If still the reported issue reproduced, please share us more details such as code example which you are using at your end to create the diagram. 

 

Regards, 

 

Naganathan K G 

[David van Laar Veth]

Hi Naganathan,

This sample works, thanks!

Regards,

David

[Naganathan Ganesh Babu]

Hi David,

Thanks for your update. 

We are happy to hear that your problem is resolved. Please let us know if you need any further assistance.

Regards, 

Naganathan K G