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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Save Not Working: $("#diagram").ejDiagram("instance").save();

Thread ID:

Created:

Updated:

Platform:

Replies:

118709 Apr 1,2015 06:00 PM Apr 8,2015 12:39 PM ASP.NET MVC 8
loading
Tags: Diagram
Ryan Obbink
Asked On April 1, 2015 06:00 PM

Hi there,

Been stuck for a couple days with trying to get the save function to light up in javascript.  Was hoping if I give you the pieces to the puzzle that you could help point me in the right direction. So, here we go:


-----------------------------------------------------------------------------------------------------------------------------------

File: Project.csproj

    <Reference Include="Syncfusion.Chart.Wpf, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
    <Reference Include="Syncfusion.Compression.Base, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
    <Reference Include="Syncfusion.Core, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=632609b4d040f6b4" />
    <Reference Include="Syncfusion.Diagram.Base, Version=12.4451.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89, processorArchitecture=MSIL" />
    <Reference Include="Syncfusion.Diagram.Web, Version=12.4451.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89, processorArchitecture=MSIL" />
    <Reference Include="Syncfusion.DocIO.Base, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
    <Reference Include="Syncfusion.DocToPDFConverter.Base, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
    <Reference Include="Syncfusion.EJ, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
    <Reference Include="Syncfusion.EJ.Mvc, Version=12.4300.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
    <Reference Include="Syncfusion.EJ.Olap, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
    <Reference Include="Syncfusion.EJ.ReportViewer, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
    <Reference Include="Syncfusion.Gauge.Wpf, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
    <Reference Include="Syncfusion.Linq.Base, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
    <Reference Include="Syncfusion.Olap.Base, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
    <Reference Include="Syncfusion.Pdf.Base, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
    <Reference Include="Syncfusion.PivotAnalysis.Base, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
    <Reference Include="Syncfusion.ReportControls.Wpf, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
    <Reference Include="Syncfusion.ReportWriter.Base, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
    <Reference Include="Syncfusion.SFMaps.WPF, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
    <Reference Include="Syncfusion.Shared.Base, Version=12.4451.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89, processorArchitecture=MSIL" />
    <Reference Include="Syncfusion.Shared.Wpf, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
    <Reference Include="Syncfusion.Tools.Web, Version=12.4451.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89, processorArchitecture=MSIL" />
    <Reference Include="Syncfusion.XlsIO.Base, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />

<Content Include="Scripts\angular.min.js" />
<Content Include="Scripts\bootstrap.js" />
<Content Include="Scripts\bootstrap.min.js" />
<Content Include="Scripts\css_browser_selector.js" />
<Content Include="Scripts\cultures\globalize.culture.de-DE.min.js" />
<Content Include="Scripts\cultures\globalize.culture.en-US.min.js" />
<Content Include="Scripts\cultures\globalize.culture.es-ES.min.js" />
<Content Include="Scripts\cultures\globalize.culture.fr-FR.min.js" />
<Content Include="Scripts\cultures\globalize.culture.vi-VN.min.js" />
<Content Include="Scripts\cultures\globalize.culture.zh-CN.min.js" />
<Content Include="Scripts\diagram\SfDiagram.Functionality.js" />
<Content Include="Scripts\ej\diagram\ej.widget.all.min.js" />
<Content Include="Scripts\ej\diagram\ej.widget.all.js" />
<Content Include="Scripts\ej\ej.unobtrusive.min.js" />
<Content Include="Scripts\ej\ej.web.all.min.js" />
<Content Include="Scripts\ej\ej.widget.angular.min.js" />
<Content Include="Scripts\ej\ej.widget.ko.min.js" />
<Content Include="Scripts\ej\[inactive]\ej.web.all.min.js" />
<Content Include="Scripts\excanvas.min.js" />
<Content Include="Scripts\form-builder\fbuilder.entries.js" />
<Content Include="Scripts\form-builder\fbuilder.forms.js" />
<Content Include="Scripts\form-builder\fbuilder.global.js" />
<Content Include="Scripts\form-builder\fbuilder.layout.js" />
<Content Include="Scripts\form-builder\fbuilder.utils.js" />
<Content Include="Scripts\form-builder\jquery-1.7.1.js" />
<Content Include="Scripts\form-builder\jquery-1.7.1.min.js" />
<Content Include="Scripts\jquery-2.1.3.min.js" />
<Content Include="Scripts\jquery-2.1.3.min.map" />
<Content Include="Scripts\jquery-ui-1.8.20.js" />
<Content Include="Scripts\jquery-ui-1.8.20.min.js" />
<Content Include="Scripts\jquery.easing-1.3.min.js" />
<Content Include="Scripts\jquery.globalize.min.js" />
<Content Include="Scripts\jquery.jeditable.min.js" />
<Content Include="Scripts\jquery.maxlength-min.js" />
<Content Include="Scripts\jquery.numeric.js" />
<Content Include="Scripts\form-builder\jquery.simplemodal.1.4.min.js" />
<Content Include="Scripts\jquery.tipsy.js" />
<Content Include="Scripts\jquery.tmpl.min.js" />
<Content Include="Scripts\jquery.unobtrusive-ajax.js" />
<Content Include="Scripts\jquery.unobtrusive-ajax.min.js" />
<Content Include="Scripts\jquery.validate.js" />
<Content Include="Scripts\jquery.validate.min.js" />
<Content Include="Scripts\jquery.validate.unobtrusive.js" />
<Content Include="Scripts\jquery.validate.unobtrusive.min.js" />
<Content Include="Scripts\jquery.watermark.js" />
<Content Include="Scripts\jsondata.min.js" />
<Content Include="Scripts\jsrender.js" />
<Content Include="Scripts\jsrender.min.js" />
<Content Include="Scripts\jsviews.min.js" />
<Content Include="Scripts\knockout-2.1.0.debug.js" />
<Content Include="Scripts\knockout-2.1.0.js" />
<Content Include="Scripts\knockout-3.3.0.debug.js" />
<Content Include="Scripts\knockout-3.3.0.js" />
<Content Include="Scripts\form-builder\modernizr-2.5.3.js" />
<Content Include="Scripts\modernizr-2.8.3.js" />
<Content Include="Scripts\npm.js" />
<Content Include="Scripts\properties.js" />
<Content Include="Scripts\respond.js" />
<Content Include="Scripts\respond.matchmedia.addListener.js" />
<Content Include="Scripts\respond.matchmedia.addListener.min.js" />
<Content Include="Scripts\respond.min.js" />
<Content Include="Scripts\sampleBrowserSite.js" />
<Content Include="Scripts\sampleslist.js" />
<Content Include="Scripts\ZeroClipboard.js" />
<Content Include="Scripts\ZeroClipboard.swf" />
<Content Include="Scripts\_references.js" />

-----------------------------------------------------------------------------------------------------------------------------------


File: Web.Config
<system.web>
    <authentication mode="None" />
    <compilation debug="true" targetFramework="4.5">
      <assemblies>
        <add assembly="Syncfusion.Core, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=632609B4D040F6B4" />
        <add assembly="Syncfusion.Compression.Base, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.EJ, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.EJ.Mvc,Version=12.4300.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.Linq.Base, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.XlsIO.Base, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.EJ.Olap,Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.Olap.Base, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.Pdf.Base, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.DocIO.Base, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.DocToPDFConverter.Base, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.Chart.Wpf, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.EJ.ReportViewer, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.Gauge.Wpf, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.ReportControls.Wpf, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.ReportWriter.Base, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.SFMaps.WPF, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.Shared.Wpf, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.EJ.Olap, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
      </assemblies>
    </compilation>
    <httpRuntime targetFramework="4.5" />
    <pages>
      <namespaces>
        <add namespace="System.Web.Helpers" />
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Optimization" />
        <add namespace="System.Web.Routing" />
        <add namespace="System.Web.WebPages" />
        <add namespace="Syncfusion.JavaScript" />
        <add namespace="Syncfusion.JavaScript.DataVisualization" />
        <add namespace="Syncfusion.MVC.EJ" />
        <add namespace="Syncfusion.EJ.ReportViewer" />
        <add namespace="Syncfusion.JavaScript.Olap" />
      </namespaces>
    </pages>

-----------------------------------------------------------------------------------------------------------------------------------
File: Packages.config

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="Antlr" version="3.5.0.2" targetFramework="net451" />
  <package id="bootstrap" version="3.3.4" targetFramework="net451" />
  <package id="EntityFramework" version="6.1.3" targetFramework="net451" />
  <package id="Glimpse" version="1.8.6" targetFramework="net451" />
  <package id="Glimpse.Ado" version="1.7.3" targetFramework="net451" />
  <package id="Glimpse.AspNet" version="1.9.2" targetFramework="net451" />
  <package id="Glimpse.EF6" version="1.6.5" targetFramework="net451" />
  <package id="Glimpse.Mvc5" version="1.5.3" targetFramework="net451" />
  <package id="jQuery" version="2.1.3" targetFramework="net451" />
  <package id="jQuery.Validation" version="1.13.1" targetFramework="net451" />
  <package id="knockoutjs" version="3.3.0" targetFramework="net451" />
  <package id="Microsoft.AspNet.Identity.Core" version="2.2.0" targetFramework="net451" />
  <package id="Microsoft.AspNet.Identity.EntityFramework" version="2.2.0" targetFramework="net451" />
  <package id="Microsoft.AspNet.Identity.Owin" version="2.2.0" targetFramework="net451" />
  <package id="Microsoft.AspNet.Mvc" version="5.2.3" targetFramework="net451" />
  <package id="Microsoft.AspNet.Razor" version="3.2.3" targetFramework="net451" />
  <package id="Microsoft.AspNet.Web.Optimization" version="1.1.3" targetFramework="net45" />
  <package id="Microsoft.AspNet.WebPages" version="3.2.3" targetFramework="net451" />
  <package id="Microsoft.jQuery.Unobtrusive.Validation" version="3.2.3" targetFramework="net451" />
  <package id="Microsoft.Owin" version="3.0.1" targetFramework="net451" />
  <package id="Microsoft.Owin.Host.SystemWeb" version="3.0.1" targetFramework="net451" />
  <package id="Microsoft.Owin.Security" version="3.0.1" targetFramework="net451" />
  <package id="Microsoft.Owin.Security.Cookies" version="3.0.1" targetFramework="net451" />
  <package id="Microsoft.Owin.Security.Facebook" version="3.0.1" targetFramework="net451" />
  <package id="Microsoft.Owin.Security.Google" version="3.0.1" targetFramework="net451" />
  <package id="Microsoft.Owin.Security.MicrosoftAccount" version="3.0.1" targetFramework="net451" />
  <package id="Microsoft.Owin.Security.OAuth" version="3.0.1" targetFramework="net451" />
  <package id="Microsoft.Owin.Security.Twitter" version="3.0.1" targetFramework="net451" />
  <package id="Microsoft.Web.Infrastructure" version="1.0.0.0" targetFramework="net45" />
  <package id="Modernizr" version="2.8.3" targetFramework="net451" />
  <package id="Newtonsoft.Json" version="6.0.8" targetFramework="net451" />
  <package id="Owin" version="1.0" targetFramework="net45" />
  <package id="Respond" version="1.4.2" targetFramework="net451" />
  <package id="WebGrease" version="1.6.0" targetFramework="net451" />
</packages>


-----------------------------------------------------------------------------------------------------------------------------------
File: App_Start/bundleconfig.cs

        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));
        }


-----------------------------------------------------------------------------------------------------------------------------------
File: razorfile.cshtml
@{
    ViewBag.Title = "App";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section headerScripts{
    <script src="@Url.Content("~/Scripts/diagram/SfDiagram.Functionality.js")"></script>

    <script src="@Url.Content("~/Scripts/ej/ej.unobtrusive.min.js")"></script>
    <script src="@Url.Content("~/Scripts/ej/ej.web.all.min.js")"></script>
}
@section headerCss{
    <link rel='nofollow' href="@Url.Content("~/Content/ej/web/bootstrap-theme/ej.web.all.min.css")" rel="stylesheet" />
}

@using (Html.BeginForm("Save", "Diagram", new { id = Model.Id }, FormMethod.Post, htmlAttributes: new { id = "mainWorkflow" }))
{
    @Html.AntiForgeryToken()
    <div id="workflowMain" class="container body-content">
                <div id="saveworkflow" class="e-button">
                        <button id="btnSave" type="submit" class="btn btn-primary btn-lg btn-block">Save</button>
                        <p></p>
                </div>
                <div id="diagram_control" class="diagram_section">
                    @Html.EJ().Diagram("Diagram", ViewData["DiagramModel"] as Syncfusion.JavaScript.DataVisualization.Models.DiagramProperties)

                </div>
                <div id="symbolpalette_control" class="e-datavisualization-symbolpalette">@Html.EJ().SymbolPalette("SymbolPalette", ViewData["SymbolPaletteModel"] as Syncfusion.JavaScript.DataVisualization.Models.SymbolPaletteProperties)</div>

    @Html.EJ().ScriptManager()
}

-----------------------------------------------------------------------------------------------------------------------------------
File: ~/Views/Shared/_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - App</title>

    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    <script src="@Url.Content("~/Scripts/jquery-2.1.3.min.js")"></script>
    <script src="@Url.Content("~/Scripts/jsrender.min.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.easing-1.3.min.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.globalize.min.js")"></script>
    @RenderSection("headerScripts", false)
    @RenderSection("scripts", required: false)
    @RenderSection("ScriptSection", required: false)
    @Scripts.Render("~/bundles/bootstrap")

    <script type="text/javascript">
        $(function () {
            $('#page').css("min-height", $(document).height());
        });
    </script>

var diagram = null;
var controlId = "CRUD";
$(document).ready(function (evt) {
    //Save Button
    $("#btnSave").bind("click", function (e) {
        alert("Hit Button Save");

        //e.preventDefault(); // <------------------ stop default behaviour of button

        alert("Hit Button Save");

        var diagram = $("#diagram").ejDiagram("instance");
        var jSonResult= diagram.save();

        $.ajax({
            url: "Diagram/Save",
            dataType: 'json',
            contentType: "application/json",
            data: { id: "1", "stringify": JSON.stringify("hereItIs") },
            success: function (Jsonstring) {
                alert("Success");
                return true;
            },
            error: function (xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                alert(err.Message);
            }
        });
    });
});

    @Styles.Render("~/Content/css")
    @RenderSection("headerCss", false)
</head>
<body>

    @Html.Partial("_HeaderPartial")
    <div class="container body-content">
        @RenderSection("SampleHeading", required: false)
        @RenderBody()
        @Html.Partial("_FooterPartial")
    </div>
</body>
</html>

Shyam G [Syncfusion]
Replied On April 2, 2015 08:34 AM

Hi Ryan

Thanks for your update.

Please note that you have set an Diagram’s control id in uppercase in the server side and it is in the lowercase, while accessing in the client side. So we suggest you to set the same id both in server side and the client side in order to resolve your reported issue. Please refer the code snippet below.

Code snippet:

Your Code Snippet:

@Html.EJ().Diagram("Diagram", ViewData["DiagramModel"] as Syncfusion.JavaScript.DataVisualization.Models.DiagramProperties)

<script type="text/javascript">

$("#btnSave").bind("click", function (e) {

var diagram = $("#diagram").ejDiagram("instance");

var jSonResult = diagram.save();

});
</script>

Modified Code Snippet:

<script type="text/javascript">

$("#btnSave").bind("click", function (e) {

var diagram = $("#Diagram").ejDiagram("instance");

var jSonResult = diagram.save();

});
</script>

Please let me know if any concerns.

Regards,
Shyam G


Ryan Obbink
Replied On April 2, 2015 09:00 AM

Hey Shyam,

Thanks for getting back so prompt.  I wish it was that easy, but no dice.  See screen shot for what I'm getting in my application.


Thanks.

-Ryan

Attachment: screenshot.nosave.nointellisense_64cb8c91.zip

Shyam G [Syncfusion]
Replied On April 3, 2015 07:50 AM

Hi Ryan

Thanks for your update.

Before looking into your requirement, Could you please confirm whether “save” API is not working at your end or “intellisense” is not working for diagram API save method ?

Please let me know if any concerns.

Regards,
Shyam G

Ryan Obbink
Replied On April 3, 2015 11:30 AM

Hey Shyam,

I am going to end this thread for now.  I believe the answers needed can be found in my newest thread:




Thanks for all your help.


-Ryan

Shyam G [Syncfusion]
Replied On April 6, 2015 12:39 PM

Hi Ryan

Thanks for your update.

We have forwarded your requirement to our development team for further analysis and will update you with development team response in one business day(7th March,2015).

Please let me know if any concerns.

Regards,

Shyam G


Shyam G [Syncfusion]
Replied On April 6, 2015 12:46 PM

Hi Ryan

Please ignore our previous update.

We have forwarded your requirement to our development team for further analysis and will update you with development team response in one business day(7th April,2015).

Please let me know if any concerns.

Regards,

Shyam G


Shyam G [Syncfusion]
Replied On April 7, 2015 01:25 PM

Hi Ryan

Sorry for the delay

We are currently working on your requirement with high priority. We will update you with more information in one business day.(8th April,2015).

Please let me know if any concerns.

Regards,
Shyam G

Shyam G [Syncfusion]
Replied On April 8, 2015 12:39 PM

Hi Ryan

Thanks for your patience.

We have provided a solution for your query in the forum 118717.please refer the forum 118717 for more details.

Please let me know if any concerns.

Regards,
Shyam G

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;