We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Unable to Load ejDiagram

Hi,

Currently, I faced a problem on loading json string into ejDiagram.

This is what I try to achieve:
1. Users can drag and drop palette items into ejDiagram
2. They can save the diagram. The diagram will convert to json string and save in database
3. When user refresh the page, the page will get the json string from database and load into ejDiagram.

Steps to trigger error:
1. when click on save button, the saveDiagram() will be called.  This function will convert ejDiagram to json string and pass as parameter to C# for save in database.
2. when reload page, the loadState() will be called in order to load diagram state. However, ejDiagram unable to load anything. When I debug, I found this error : Uncaught SyntaxError: Unexpected token f.

In aspx:

        function saveDiagram() {
            saveData = $('#DiagramContent').ejDiagram('instance').save();
            var diagramState = JSON.stringify(saveData);

            var params = "{'state':'" + diagramState + "'}";
           
            $.ajax({
                type: "POST",
                url: "Test.aspx/SaveDiagramState",
                data: params,
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: onSaveSucess,
                error: onError
            });
        }

       var diagramState = '<%=diagramState %>';

        function loadState(diagramState) {
            if (diagramState)
            {
                $('#DiagramContent').ejDiagram('instance').load(JSON.parse(diagramState));
            }
        }

<div>
<ej:Diagram ID="DiagramContent" runat="server" Height="100%" Width="100%"></ej:Diagram>
</div>


After investigating the issue, I suspect the json string that I saved was wrong. Please assist me on how to solve this issue.

Thanks

3 Replies

SG Shyam G Syncfusion Team May 20, 2015 12:54 PM UTC

Hi phataporn

Thanks for using Syncfusion products.

We are glad to let you know that we have created a sample of save and load the diagram in the database using AJAXPageMethods.

Sample:http://www.syncfusion.com/downloads/support/forum/119180/databasesample1685197586.zip

We have provided the Knowledge base link below which represents how to save and load the diagram in the database.

Knowledge base:http://www.syncfusion.com/kb/3049/how-to-save-and-load-diagram-from-database

Please let me know if any concerns.

Regards,
Shyam G


PH phataporn May 21, 2015 11:44 AM UTC

Hi,

Thank for the answer.

I have follow the save and load function from the sample.  However, the diagram still cannot be load.
So, I used my json string and hard code inside the load function of the sample program, but still cannot be load. Thus, I debug in Chrome and get this error: Uncaught SyntaxError: Unexpected token f

Please refer to the attachment for the json string.

Thanks

Attachment: WebApplication20_20150521_7ddbf1ff.zip


SG Shyam G Syncfusion Team May 23, 2015 02:06 AM UTC

Hi phataporn

Thanks for your update.

We are glad to inform you that we have modified your JSON String to resolve your reported issue and provided the modified sample below for your reference.

Sample:http://www.syncfusion.com/downloads/support/forum/119180/modifiedsample-1283168339.zip

Please let me know if any concerns.

Regards,
Shyam G

Loader.
Live Chat Icon For mobile
Up arrow icon