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

0x800a1391 - JavaScript runtime error: 'ej' is undefined

Thread ID:

Created:

Updated:

Platform:

Replies:

118239 Feb 15,2015 03:46 AM UTC Feb 17,2015 12:37 PM UTC ASP.NET MVC 4
loading
Tags: Grid
Srinath
Asked On February 15, 2015 03:46 AM UTC

Hello,

I'm trying use Grid component available in Essential Studio (latest version) with MVC 5 (.NET 4.5.2) and I'm unsuccessful so far. I've created an MVC application with Grid component using Sample generator. I took the same code from sample generator and use it newly created sample Web API application, but I'm getting weird errors while loading the page.

Any further help would be greatly appreciated. Thanks.

Error: 0x800a1391 - JavaScript runtime error: 'ej' is undefined

Web.Config

		<compilation debug="true" targetFramework="4.5.2" enablePrefetchOptimization="true">
			<assemblies>
				<add assembly="Syncfusion.Core, Version=12.4450.0.24, Culture=neutral, PublicKeyToken=632609B4D040F6B4"/>
				<add assembly="Syncfusion.Compression.Base, Version=12.4450.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"/>
				<add assembly="Syncfusion.EJ, Version=12.4450.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"/>
				<add assembly="Syncfusion.EJ.Mvc, Version=12.4500.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"/>
				<add assembly="Syncfusion.Linq.Base, Version=12.4450.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"/>
				<add assembly="Syncfusion.XlsIO.Base, Version=12.4450.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"/>
				<add assembly="Syncfusion.EJ.Olap,Version=12.4450.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"/>
				<add assembly="Syncfusion.Olap.Base, Version=12.4450.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"/>
			</assemblies>
		</compilation>
			<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"/>
			</namespaces>
		<httpHandlers>
			<add verb="GET,HEAD" path="MvcResourceHandler.axd" type="Syncfusion.Mvc.Shared.MvcResourceHandler, Syncfusion.Shared.Mvc, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" validate="false"/>
			<add verb="*" path="syncfusion_generate.axd" validate="false" type="Syncfusion.Mvc.Chart.MvcChartHandler, Syncfusion.Chart.Mvc, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"/>
			<add verb="*" path="captimage.axd" type="Syncfusion.JavaScript.ImageHandler, Syncfusion.EJ, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"/>
		</httpHandlers>

<handlers> <remove name="WebServiceHandlerFactory-Integrated"/> <remove name="ScriptHandlerFactory"/> <remove name="ScriptHandlerFactoryAppServices"/> <remove name="ScriptResource"/> <add name="ScriptHandlerFactory" verb="*" path="*.asmx" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" preCondition="integratedMode"/> <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" preCondition="integratedMode"/> <add name="ScriptResource" path="ScriptResource.axd" verb="GET,HEAD" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" preCondition="integratedMode"/> <remove name="ExtensionlessUrlHandler-Integrated-4.0"/> <remove name="OPTIONSVerbHandler"/> <remove name="TRACEVerbHandler"/> <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0"/> <add verb="*" path="captimage.axd" name="syncfusion_generatetools" type="Syncfusion.JavaScript.ImageHandler, Syncfusion.EJ, Version=12.4400.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"/> </handlers>
Views (Web.Config)

      <namespaces>
        <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="Syncfusion.JavaScript" />
        <add namespace="Syncfusion.JavaScript.DataVisualization" />
        <add namespace="Syncfusion.MVC.EJ" />
      </namespaces>
    </pages>

BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/ej-js").Include(
    "~/Scripts/jsrender.min.js",
    "~/Scripts/jquery.easing.{version}.min..js",
    "~/Scripts/ej.web.all.min.js"));

bundles.Add(new ScriptBundle("~/bundles/ej-css").Include(     "~/Scripts/ej/web/ej.icons.css",     "~/Scripts/ej/web/ej.widgets.core.min.css"));

_Layout.cshtml
@Scripts.Render("~/bundles/ej-js")
@Styles.Render("~/bundles/ej-css")
@RenderSection("scripts"false) @Html.EJ().ScriptManager()
Controller
/// <summary>
/// 
/// </summary>
/// <returns></returns>
public ActionResult Applications()
{
    return View();
}
Applications.cshtml
@(Html.EJ().Grid<Application>("RemoteBinding")
        .Datasource("http://localhost:22222/odata/applications")
        .AllowPaging()
        .PageSettings(page => { page.PageSize(9); })
        .Columns(col =>
        {
            col.Field("Id").HeaderText("Id").IsPrimaryKey(true).IsIdentity(true).TextAlign(TextAlign.Right).Width(75).Add();
            col.Field("ServerName").HeaderText("Server").TextAlign(TextAlign.Right).Width(90).Add();
            col.Field("SiteName").HeaderText("Site").TextAlign(TextAlign.Right).Width(75).Add();
            col.Field("VirtualSite").HeaderText("Virtual Site").TextAlign(TextAlign.Right).Width(75).Add();
            col.Field("AppPoolName").HeaderText("Application Pool").TextAlign(TextAlign.Right).Width(100).Add();
            col.Field("IPAddress").HeaderText("IP Address").Width(100).TextAlign(TextAlign.Right).Add();
            col.Field("HostHeader").HeaderText("Host Header").TextAlign(TextAlign.Right).Width(100).Add();
        })
)
Rendered HTML:

<div id="RemoteBinding" data-ej-pagesettings-template="" data-ej-pagesettings-pagesize="9" data-ej-columns='[{"field":"Id","headerText":"Id","textAlign":"right","isIdentity":true,"isPrimaryKey":true,"width":75},{"field":"ServerName","headerText":"Server","textAlign":"right","width":90},{"field":"SiteName","headerText":"Site","textAlign":"right","width":75},{"field":"VirtualSite","headerText":"Virtual Site","textAlign":"right","width":75},{"field":"AppPoolName","headerText":"Application Pool","textAlign":"right","width":100},{"field":"IPAddress","headerText":"IP Address","textAlign":"right","width":100},{"field":"HostHeader","headerText":"Host Header","textAlign":"right","width":100}]' data-ej-exporttopdfaction="ExportToPdf" data-ej-exporttowordaction="ExportToWord" data-ej-exporttoexcelaction="ExportToExcel" data-ej-datasource="ej.dataSources.RemoteBinding.data" data-ej-allowpaging="true" data-role="ejgrid"></div>

<script>ej.createObject("ej.dataSources.RemoteBinding",{ data: ej.DataManager("http://localhost:22222/odata/applications")});</script>

Srinath
Replied On February 15, 2015 03:55 AM UTC

Never mind. After correcting path to ej.web.all.min.js file in BundleConfig.cs file, I'm no longer receiving that error message. However I'm not seeing any output after page loads. I verified my OData link and is actually returning content in JSON normally.

Since the data binding Url is also local Url, do I need to make any adjustments to Grid component HTML code to make it work? Any suggestions? Thanks.

Gowthami V [Syncfusion]
Replied On February 16, 2015 01:01 PM UTC

Hi Srinath,

Thanks for using Syncfusion products.

We have analyzed your code snippet and we suspect that you may set the unobtrusive mode as true in Web.config file as follows.

Web.config

<appSettings>

<add key="UnobtrusiveJavaScriptEnabled" value="true" />

</appSettings>

For your kind information while using unobtrusive mode to render the grid control, it is necessary to refer the “ej.unobtrusive.min.js” script file. If you are not set the unobtrusive mode as true then there is no need to refer that script file(ej.unobtrusive.min.js).

Please refer the below code snippet.

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

   "~/Scripts/ej/ej.unobtrusive.min.js"

                        ));

For your convenience , we have created a sample and the same can be downloaded from the following link.

Sample Link: SampleDemonew.zip

And also please refer the below link for more clarification about unobtrusive support.

Online Documentation Link: http://help.syncfusion.com/ug/js/default.htm#!documents/unobtrusivesupport.htm

Please let us know if you have any queries.

Regards,

Gowthami V.



Srinath
Replied On February 16, 2015 03:53 PM UTC

Hi Gowthami,

Thank you so much for your prompt reply. After setting "UnobtrusiveJavaScriptEnabled" value to false, I'm able to load the grid successfully. Right now I'm loading the entire "ej.web.all.min.js" file which is around 4MB in file size. Are there any alternatives to load only required JavaScript for Gird component?

Thank you!

Gowthami V [Syncfusion]
Replied On February 17, 2015 12:37 PM UTC

Hi Srinath,

Thanks for your update.

We have analyzed your requirement and we suggest you to refer the individual script files of the sub controls, which are required to render the JS Grid control.

Please refer the below code snippet.

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

                         . . . .

                        //Script files required to render grid control

                        "~/Scripts/ej/ej.core.min.js",

                        "~/Scripts/ej/ej.data.min.js",

                        "~/Scripts/ej/ej.grid.min.js",

                        "~/Scripts/ej/ej.pager.min.js",

                        "~/Scripts/ej/ej.scrollbar.min.js",

                        "~/Scripts/ej/ej.scroller.min.js",

                        "~/Scripts/ej/ej.waitingpopup.min.js"

                        ));

For more information, please refer the following table for details regarding the dependent files:

Dependent Script files for rendering JS Grid:

File                         

Description/Usage

ej.core.min.js

Must be referred always before using all the JS controls.

ej.data.min.js

Used to handle datamanger operation and should be used while binding data to JS controls.

ej.grid.min.js

Should be referred when using grid control.

ej.pager.min.js

Should be referred when using paging in grid.  

ej.scrollbar.min.js and ej.scroller.min.js

Should be referred when using scrolling in grid.  

ej.waitingpopup.min.js

Should be referred when using the remote databinding in grid. The waiting popup will show while requesting the server for data.

ej.radiobutton.min.js

These files are used while enable Editing and Filtering feature in grid.

ej.dropdownlist.min.js

ej.dialog.min.js

ej.button.min.js

ej.autocomplete.min.js

ej.checkbox.min.js

ej.datepicker.min.js

ej.datetimepicker.min.js

ej.editor.min.js

For your convenience we have created the sample and the same can be downloaded from the following link.

Sample Link: SampleDemonew.zip

Please let us know if you have any queries.

Regards,

Gowthami V.



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

;