Grid - Javascript error - 'Syncfusion' is undefined

[David Byrd]

I have added a Syncfusion grid to my ASP.NET web forms project. However, I am not able to do anything with it because I get the following JavaScript error when I start the application. I looked on Bing and Google for a possible solution, and the only one that cam close I found on the Syncfusion Community threads and that was this one (Syncfusion is undefined (v11.---)), however, I already have a later version (as you can see in the code, v13.1450) so it does not apply to my problem. I would like to transition from a DevExpress grid to this Syncfusion grid, but this is a major blocking issue. Please provide the all of the JavaScript files that are needed to make the Grid work or point out the error in my implementation.

Here is the web control (ascx) with the grid.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ProjectListView.ascx.cs" Inherits="WRMS.V2.Site.VIEWS.ProjectListView" %>

<%@ Register Assembly="Syncfusion.EJ.Web, Version=13.1450.0.21, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" Namespace="Syncfusion.JavaScript.Web" TagPrefix="ej" %>

<%@ Register assembly="Syncfusion.EJ, Version=13.1450.0.21, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" namespace="Syncfusion.JavaScript.Models" tagprefix="ej" %>

<%@ Register TagPrefix="views" TagName="ProjectView" Src="~/VIEWS/ProjectView.ascx" %>

<%@ Register TagPrefix="views" TagName="SampleListView" Src="~/VIEWS/SampleListView.ascx" %>

<link rel="Stylesheet" type="text/css" rel='nofollow' href="../Styles/Site.css" />

<table width="100%" cellpadding="0" cellspacing="0">

<tr>

<td>

<h2>Project List</h2>

</td>

<td align="right">

<dx:ASPxButton ID="CreateProjectBTN" runat="server" Text="New Project" AccessKey="P" ToolTip="Create New Project" AutoPostBack="false">

<ClientSideEvents Click="function (s, e) { ProjectGV_OnNewClick(s, e); }" />

</dx:ASPxButton>

</td>

</tr>

</table>

<hr />

<ej:Grid ID="ProjectGridNew" runat="server" AllowSorting="True" AllowPaging="True">

<Columns>

<ej:Column Field="ProjectID" HeaderText="Project ID" IsPrimaryKey="True" TextAlign="Right" Width="75" Visible="false" />

<ej:Column Field="Code" HeaderText="Project Code" Width="80" />

<ej:Column Field="Name" HeaderText="Project Name" TextAlign="Right" Width="75" />

<ej:Column Field="DateSubmitted" HeaderText="Date Submitted" TextAlign="Right" Width="80" Format="{0:MM/dd/yyyy}" />

<ej:Column Field="ClientName" HeaderText="Company" TextAlign="Right" Width="75" />

<ej:Column Field="SampleCount" HeaderText="Samples" Width="110" />

</Columns>

<PageSettings Template=""></PageSettings>

<ScrollSettings EnableTouchScroll="False"></ScrollSettings>

</ej:Grid>

 I have the following JavaScript files loading as a part of my master page for the page that the control is on. 

<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>

<script src="../Scripts/Login.js" type="text/javascript"></script>

<script src="../Scripts/MessageControl.js" type="text/javascript"></script>

<script src="../Scripts/GridControl.js" type="text/javascript"></script>

<script src="../Scripts/View.js" type="text/javascript"></script>

<script src="../Scripts/HotKeys.js" type="text/javascript"></script>

<script src="../Scripts/ej.grid.min.js" type="text/javascript"></script>

<script src="../Scripts/ej.web.all.min.js" type="text/javascript"></script>

<script src="../Scripts/jquery.easing.1.3.min.js" type="text/javascript"></script>

<script src="../Scripts/jsrender.min.js" type="text/javascript"></script>

<script src="../Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>

<script src="../Scripts/jsrender.min.js" type="text/javascript"></script>

<script src="../Scripts/jquery.easing-1.3.min.js" type="text/javascript"></script>

<script src="../Scripts/jquery.globalize.min.js" type="text/javascript"></script>

<script src="../Scripts/ej.web.all.min.js" type="text/javascript"></script>

<%--<script src='<%= Page.ResolveClientUrl("~/Scripts/ej.webform.min.js")%>' type="text/javascript"></script>--%>

<script src="../Scripts/properties.js" type="text/javascript"></script>

<script src="../Scripts/xregexp.js" type="text/javascript"></script>

<script src="../Scripts/shCore.js" type="text/javascript"></script>

<script src="../Scripts/shBrushPerl.js" type="text/javascript"></script>

<script src="../Scripts/shBrushCSharp.js" type="text/javascript"></script> 

<script src="../Scripts/sampleslist.js" type="text/javascript"></script>

Finally - I am loading the data as such.

this.ProjectGridNew.DataSource = ((IEnumerable<vProject>)records).ToList();

this.ProjectGridNew.DataBind();

[Madhu Sudhanan P]

Hi David,

Thanks for using Syncfusion products.

We have analyzed the provided code snippet and suspect that the cause of the script error is due to the incorrect reference order of script files in the master/layout page.

<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>

. . . . .

<script src="../Scripts/ej.grid.min.js" type="text/javascript"></script>
<script src="../Scripts/ej.web.all.min.js" type="text/javascript"></script>

The ej.web.all.min.js requires Jquery 1.7+ and also the ej.web.all.min.js file will include all the widgets and no need to refer the ej.grid.min.js separately.

Please refer the below helps link to getting started with Syncfusion ASP.Net controls.

Manual creation: http://help.syncfusion.com/ug/js/index.html#!Documents/createyourfirstgridinaspnet.htm

Create first Grid: http://help.syncfusion.com/ug/js/index.html#!Documents/createyourfirstgridinaspnet.htm

Concept &feature - Grid: http://help.syncfusion.com/ug/js/index.html#!Documents/conceptsandfeatures22.htm

Online Demo: http://asp.syncfusion.com/demos/web/

Knowledge Base – Grid: http://www.syncfusion.com/kb/aspnet/grid

For your convenience we have created a simple grid sample and the same can be downloaded from the following location.

Sample Location: http://www.syncfusion.com/downloads/support/directtrac/ASPX-13.1.0.212082467269.zip

Please let us know if you have any queries.

Regards,
Madhu Sudhanan. P

[Lavanya Sreepada]

Hi,

IN the syncfusion grid the filters are showing the correct and expected filters. But after a modal is being opened and closed it is giving an error and the data shown in the filter is hanged and only the last clicked filter data is showing.

The error is shown as :

Uncaught TypeError: Cannot read property '_expands' of undefined
    at t.excelFilter._processListData (ej.web.all.min.js:10)
    at t.excelFilter.openXFDialog (ej.web.all.min.js:10)
    at Object._mouseClickHandler (ej.web.all.min.js:10)
    at HTMLDivElement.<anonymous> (ej.web.all.min.js:10)
    at HTMLDivElement.dispatch (jquery-3.2.1.min.js:3)
    at a (ej.web.all.min.js:10)
    at HTMLDivElement.s (ej.web.all.min.js:10)
    at HTMLDivElement.dispatch (jquery-3.2.1.min.js:3)
    at HTMLDivElement.q.handle (jquery-3.2.1.min.js:3)

I have tried many different things like setting the e-type as string and then showing the dataSources but nothing seems to help. Any help regarding can be really great.

If You Are Interested to Learn JavaScript Training? Yoy Can Shedule and Attend a Free Demo Here JavaScript Online Certification Training 

Thanks in Advance
Lavanya Sreepada.

[Pon Selva Jeganathan]

Hi Lavanya,    

   

Thanks for contacting syncfusion forum.  

  

Query: after a modal is being opened and closed it is giving an error and the data shown in the filter is hanged and only the last clicked filter data is showing.

 

Before we start proceeding with your query, we request you to share us the below details in order to provide you with the solution as early as possible.

1.  share the complete grid code example.
2. share the product version details.
3. share the platform details.
4. share the data binding details(local data/ remote data binding)
5. Please explain the exact scenario you have faced the issue in detail.

Kindly get back to us for further assistance.

  

Regards,  

Pon selva