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

[Srinath]

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]

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]

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]

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]

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.