1. Home
  2. Forum
  3. ASP.NET MVC
  4. MVC5 JS1 Grid Unable to get property '2' of undefined or null reference/methods/properties can be accessed only after plugin creation

MVC5 JS1 Grid Unable to get property '2' of undefined or null reference/methods/properties can be accessed only after plugin creation

VS 2017 Ent
Syncfusion version: 16.14.0.24
JQuery Version: 3.3.1

Edge/Explorer 11/Chrome


Errors:

Unable to get property '2' of undefined or null reference.

ejDateTimePicker: methods/properties can be accessed only after plugin creation
Error: ejDateTimePicker: methods/properties can be accessed only after plugin creation
   at t.throwError (http://localhost:9193/Scripts/ej/web/ej.web.all.min.js:10:29700)
   at n.fn[f] (http://localhost:9193/Scripts/ej/web/ej.web.all.min.js:10:23458)
   at t.gridFeatures.common._processBindings (http://localhost:9193/Scripts/ej/web/ej.web.all.min.js:10:3011260)
   at t.gridFeatures.edit.startEdit (http://localhost:9193/Scripts/ej/web/ej.web.all.min.js:10:3180816)
   at t.gridFeatures.edit._toolbarOperation (http://localhost:9193/Scripts/ej/web/ej.web.all.min.js:10:3230455)
   at t.gridFeatures.edit._toolBarClick (http://localhost:9193/Scripts/ej/web/ej.web.all.min.js:10:3227567)
   at t.widgetBase._trigger (http://localhost:9193/Scripts/ej/web/ej.web.all.min.js:10:13531)
   at _onItemClick (http://localhost:9193/Scripts/ej/web/ej.web.all.min.js:10:1809493)
   at Anonymous function (http://localhost:9193/Scripts/ej/web/ej.web.all.min.js:10:27567)
   at jQuery.event.dispatch (http://localhost:9193/Scripts/jquery-3.3.1.js:5182:6)


Steps to reproduce:

1. Enter View
2. Select Edit Icon

Error: Unable to get property '2' of undefined or null reference

3. Select Close or Save button:

Error: ejDateTimePicker: methods/properties can be accessed only after plugin creation


Grid Render Code:


        @(Html.EJ().Grid<MCSI.NMCFISReports.Models.SpecialEvent>
                                        ("FlatGrid")
                                        .Datasource(ds => ds.Json((IEnumerable<MCSI.NMCFISReports.Models.SpecialEvent>
                                            )Model.SpecialEvents)
                                            .CrudURL("SpecialEvents/CrudUrl").Adaptor(AdaptorType.RemoteSaveAdaptor))
                                            .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Dialog); })
                                            .AllowSorting()
                                            .AllowPaging()
                                            .IsResponsive()
                                            .ToolbarSettings(toolBar => toolBar.ShowToolbar().ToolbarItems(items =>
                                            {
                                                items.AddTool(ToolBarItems.ExcelExport);
                                    //items.AddTool(ToolBarItems.WordExport);
                                    //items.AddTool(ToolBarItems.PdfExport);
                                    items.AddTool(ToolBarItems.Add);
                                                items.AddTool(ToolBarItems.Edit);
                                                items.AddTool(ToolBarItems.Delete);
                                            }))
                                            .Mappers(map => map.ExportToExcelAction("SpecialEvents/ExportToExcelAsync")
                                            .ExportToPdfAction("SpecialEvents/ExportToPdfAsync")
                                            .ExportToWordAction("SpecialEvents/ExportToWordAsync"))
                                            .Columns(col =>
                                            {
                                                col.Field(p => p.Id).HeaderText("ID").TextAlign(TextAlign.Left).IsPrimaryKey(true).Add();
                                                col.Field(p => p.EventName).HeaderText("EventName").TextAlign(TextAlign.Left).Add();
                                                col.Field(p => p.EventDate).Format("{0:d}").HeaderText("EventDate").EditType(EditingType.DateTimePicker).Add();
                                                col.Field(p => p.AdmissionPrice).Format("{0:c").HeaderText("Admission Price").TextAlign(TextAlign.Left).Add();
                                                col.Field(p => p.Attendance).Format("{0:n}").HeaderText("Attendance").TextAlign(TextAlign.Right).Add();
                                                col.Field(p => p.EventLocation).HeaderText("Event Location").TextAlign(TextAlign.Left).Add();
                                                col.Field(p => p.Description).HeaderText("Description").TextAlign(TextAlign.Left).Add();
                                                col.Field(p => p.Street).HeaderText("Street").TextAlign(TextAlign.Left).Add();
                                                col.Field(p => p.City).HeaderText("City").TextAlign(TextAlign.Left).Add();
                                                col.Field(p => p.State).HeaderText("State").TextAlign(TextAlign.Left).Add();
                                                col.Field(p => p.Zip).HeaderText("Zip").TextAlign(TextAlign.Left).Add();
                                                col.Field(p => p.Sponsors).HeaderText("Sponsors").TextAlign(TextAlign.Left).Add();
                                                col.Field(p => p.AdmissionFeesReceived).Format("{0:c").HeaderText("Admission Fees Received").TextAlign(TextAlign.Left).Add();
                                                col.Field(p => p.UnidentifiableAnonymousContributions).Format("{0:c").HeaderText("Unidentifiable Anonymous Contributions").TextAlign(TextAlign.Left).Add();
                                                col.Field(p => p.Expenditures).Format("{0:c").HeaderText("Expenditures").TextAlign(TextAlign.Left).Add();
                                            })
                                            .ClientSideEvents(eve => { eve.ActionComplete("complete"); })
        )



6 Replies
IM Ibrahim Malluf March 3, 2018 09:54 PM UTC

VS 2017 Ent
Syncfusion version: 16.1.0.24
JQuery Version: 3.3.1

Edge/Explorer 11/Chrome

In an attempt t remedy this situation myself, I created an application using Syncfusion Sample Creator.

the sample app works as expected. I modified my _Layout view to match the sample app. I also modified the View to closely match the sample App.

My results:

1. Adding a new row works as expected without incident.
2.Deleting a row works without incident.
3.Attempting to edit an existing row does not work as expected.

When the Dialog opens, he EventDate value displays the following:  'Thu Mar 15 2018 00:00:00 GMT-0600 (Mountain Daylight Time)' instead of 3/15/2018. The datepicker also does not work.
Attempting to save or cancel the edit dialog does not work either.
Selecting the X on the dialog wimdow will close the dialog.  But the Add,Edit nd Delete buttons no longer function until I refresh the page.

No Java Script errors are being thrown by the browsers.

The Render code for the Grid:

   @(Html.EJ().Grid<MCSI.NMCFISReports.Models.SpecialEvent>
                                                    ("FlatGrid")
                                                    .Datasource(ds => ds.Json((IEnumerable<MCSI.NMCFISReports.Models.SpecialEvent>
                                                        )Model.SpecialEvents)
                                                        .CrudURL("SpecialEvents/CrudUrl").Adaptor(AdaptorType.RemoteSaveAdaptor))
                                                        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Dialog); })
                                                        .AllowSorting()
                                                        .AllowPaging()
                                                        .IsResponsive()
                                                        .ToolbarSettings(toolBar => toolBar.ShowToolbar().ToolbarItems(items =>
                                                        {
                                                            items.AddTool(ToolBarItems.ExcelExport);
                                                //items.AddTool(ToolBarItems.WordExport);
                                                //items.AddTool(ToolBarItems.PdfExport);
                                                items.AddTool(ToolBarItems.Add);
                                                            items.AddTool(ToolBarItems.Edit);
                                                            items.AddTool(ToolBarItems.Delete);
                                                        }))
                                                        .Mappers(map => map.ExportToExcelAction("SpecialEvents/ExportToExcelAsync")
                                                        .ExportToPdfAction("SpecialEvents/ExportToPdfAsync")
                                                        .ExportToWordAction("SpecialEvents/ExportToWordAsync"))
                                                         .Locale("en-US")
                                                        .Columns(col =>
                                                        {
                                                            col.Field(p => p.Id).HeaderText("ID").TextAlign(TextAlign.Left).IsPrimaryKey(true).Visible(false).Add();
                                                            col.Field(p => p.EventName).HeaderText("EventName").TextAlign(TextAlign.Left).Add();
                                                            col.Field(p => p.EventDate).HeaderText("EventDate").TextAlign(TextAlign.Right).Width(80).Format("{0:MM/dd/yyyy}")
                                                            .EditType(EditingType.Datepicker).ValidationRules(v => v.AddRule("date", true)).Add();
                                                            col.Field(p => p.AdmissionPrice).Format("{0:c").HeaderText("Admission Price").TextAlign(TextAlign.Left).Add();
                                                            col.Field(p => p.Attendance).Format("{0:n}").HeaderText("Attendance").TextAlign(TextAlign.Right).Add();
                                                            col.Field(p => p.EventLocation).HeaderText("Event Location").TextAlign(TextAlign.Left).Add();
                                                            col.Field(p => p.Description).HeaderText("Description").TextAlign(TextAlign.Left).Add();
                                                            col.Field(p => p.Street).HeaderText("Street").TextAlign(TextAlign.Left).Add();
                                                            col.Field(p => p.City).HeaderText("City").TextAlign(TextAlign.Left).Add();
                                                            col.Field(p => p.State).HeaderText("State").TextAlign(TextAlign.Left).Add();
                                                            col.Field(p => p.Zip).HeaderText("Zip").TextAlign(TextAlign.Left).Add();
                                                            col.Field(p => p.Sponsors).HeaderText("Sponsors").TextAlign(TextAlign.Left).Add();
                                                            col.Field(p => p.AdmissionFeesReceived).Format("{0:c").HeaderText("Admission Fees Received").TextAlign(TextAlign.Left).Add();
                                                            col.Field(p => p.UnidentifiableAnonymousContributions).Format("{0:c").HeaderText("Unidentifiable Anonymous Contributions").TextAlign(TextAlign.Left).Add();
                                                            col.Field(p => p.Expenditures).Format("{0:c").HeaderText("Expenditures").TextAlign(TextAlign.Left).Add();
                                                        })
                                                        .ClientSideEvents(eve => { eve.ActionComplete("complete"); })
    )






VN Vignesh Natarajan Syncfusion Team March 5, 2018 12:43 PM UTC

Hi Ibrahim, 
 
Thanks for using Syncfusion products. 
 
 
We have analyzed your code snippet and we have prepared a sample using your code snippets. We are able to reproduce the reported issue. 
 
The reported issue occur since the format for the AdmissionPrice is not properly close. Kindly refer the below code. 
 
    col.Field(p => p.AdmissionPrice).Format("{0:c").HeaderText("Admission Price").TextAlign(TextAlign.Left).Add(); 
   
Kindly ensure to specify the format value properly and issue has been resolved for us. We are able to perform adding, editing and deleting action in the Grid.  
 
Kindly download the sample form the blow link 
 
 
Please get back to us if you have any queries. 
 
Regards, 
Vignesh Natarajan 


IM Ibrahim Malluf March 5, 2018 10:29 PM UTC

Hello


Fixed the Typo you pointed out, plus two more similar typos.

This did not have any affect

Attempted to run the sample demo you provided:
http://www.syncfusion.com/downloads/support/forum/136219/ze/SyncfusionMvcApplication40-406789126

This Demo application fails to compile at all.  It does generate an Ambiguous Reference error in the _layout.cshtml view
where this line is called:
 @Html.EJ().ScriptManager()

So  it would seem that even the solution example being provided by Syncfusion is buggy.

Here is the current Render Code for the Grid:

 @(Html.EJ().Grid<MCSI.NMCFISReports.Models.SpecialEvent>
                ("FlatGrid")
                .Datasource(ds => ds.Json((IEnumerable<MCSI.NMCFISReports.Models.SpecialEvent>)Model.SpecialEvents)
                    .CrudURL("SpecialEvents/CrudUrl").Adaptor(AdaptorType.RemoteSaveAdaptor))
                    .EditSettings(edit => { edit.AllowAdding().AllowEditing().AllowDeleting().EditMode(EditMode.Dialog).ShowDeleteConfirmDialog(); })
                    .AllowSorting()
                    .AllowPaging()
                    .IsResponsive()
                    .SelectionType(SelectionType.Single)
                    .ToolbarSettings(toolBar => toolBar.ShowToolbar().ToolbarItems(items =>
                    {
                        items.AddTool(ToolBarItems.ExcelExport);
                        //items.AddTool(ToolBarItems.WordExport);
                        //items.AddTool(ToolBarItems.PdfExport);
                        items.AddTool(ToolBarItems.Add);
                        items.AddTool(ToolBarItems.Edit);
                        items.AddTool(ToolBarItems.Delete);
                    }))
                    .Mappers(map => map.ExportToExcelAction("SpecialEvents/ExportToExcelAsync")
                    .ExportToPdfAction("SpecialEvents/ExportToPdfAsync")
                    .ExportToWordAction("ExportToWordAsync"))
                        .Locale("en-US")
                    .Columns(col =>
                    {
                        col.Field(p => p.Id).HeaderText("ID").TextAlign(TextAlign.Left).IsPrimaryKey(true).Add();
                        col.Field(p => p.EventName).HeaderText("EventName").TextAlign(TextAlign.Left).Add();
                        col.Field(p => p.EventDate).HeaderText("EventDate").TextAlign(TextAlign.Right).Width(80).Format("{0:MM/dd/yyyy}")
                        .EditType(EditingType.Datepicker).ValidationRules(v => v.AddRule("date", true)).Add();
                        col.Field(p => p.AdmissionPrice).Format("{0:c}").HeaderText("Admission Price").TextAlign(TextAlign.Left).Add();
                        col.Field(p => p.Attendance).Format("{0:n}").HeaderText("Attendance").TextAlign(TextAlign.Right).EditType(EditingType.NumericEdit).Add();
                        col.Field(p => p.EventLocation).HeaderText("Event Location").TextAlign(TextAlign.Left).Add();
                        col.Field(p => p.Description).HeaderText("Description").TextAlign(TextAlign.Left).Add();
                        col.Field(p => p.Street).HeaderText("Street").TextAlign(TextAlign.Left).Add();
                        col.Field(p => p.City).HeaderText("City").TextAlign(TextAlign.Left).Add();
                        col.Field(p => p.State).HeaderText("State").TextAlign(TextAlign.Left).Add();
                        col.Field(p => p.Zip).HeaderText("Zip").TextAlign(TextAlign.Left).Add();
                        col.Field(p => p.Sponsors).HeaderText("Sponsors").TextAlign(TextAlign.Left).Add();
                        col.Field(p => p.AdmissionFeesReceived).Format("{0:c}").HeaderText("Admission Fees Received").TextAlign(TextAlign.Left).Add();
                        col.Field(p => p.UnidentifiableAnonymousContributions).Format("{0:c").HeaderText("Unidentifiable Anonymous Contributions").TextAlign(TextAlign.Left).Add();
                        col.Field(p => p.Expenditures).Format("{0:c}").HeaderText("Expenditures").TextAlign(TextAlign.Left).Add();
                    })





GM Gangabharathy Murugasen Syncfusion Team March 6, 2018 04:13 AM UTC

From: Ibrahim Malluf [mailto:[email protected]]
Sent: Monday, March 5, 2018 1:40 PM
To: Syncfusion Support <[email protected]>
Subject: RE: Syncfusion support community forum 136219, MVC5 JS1 Grid Unable to get property '2' of undefined or null reference/methods/properties can be accessed only after plugin creation, has been updated. 


Absolutely Hilarious!! 

Your example generated this error: 

Server Error in '/' Application. 
Compilation Error  
Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS0121: The call is ambiguous between the following methods or properties: 'Syncfusion.MVC.EJ.JavaScriptExtension.EJ<dynamic>(System.Web.Mvc.HtmlHelper<dynamic>)' and 'Syncfusion.MVC.EJ.JavaScriptExtension.EJ<dynamic>(System.Web.Mvc.HtmlHelper<dynamic>)'

Source Error: 
 
Line 46:      
Line 47:  
Line 48:     @Html.EJ().ScriptManager() 
Line 49:     @RenderSection("scripts", required: false) 
Line 50: </body> 


I am having enough trouble debugging your very buggy tools and  do not need to add debugging your very buggy  “Working Samples” that do not work. 

I did fix the typo you pointed out, the missing ‘}’.  It did NOT FIX THE ISSUE!!! 

I am still having the same Edit problems outlined below. 

Make another stab at it 😊. 



VN Vignesh Natarajan Syncfusion Team March 6, 2018 02:36 PM UTC

Hi Ibrahim, 
 
Sorry for the inconvenience caused.  
 
Query: “This Demo application fails to compile at all.  It does generate an Ambiguous Reference error in the _layout.cshtml view” 
 
We suspect that the Dll are not properly loaded in the Application. We have already prepared a knowledge base document for you requirement. 
 
Kindly refer the below link for Knowledge base document.  
 
 
 
For your convenience we have attached sample without removing the dll’s and bin and obj folder. Which can be downloaded from below link 
 

If the issue still occur, kindly share the video replication of the issue.  

Regards, 
Vignesh Natarajan  



GM Gangabharathy Murugasen Syncfusion Team March 7, 2018 04:49 AM UTC

From: Ibrahim Malluf [mailto:[email protected]]
Sent: Tuesday, March 6, 2018 5:08 PM
Subject: RE: Syncfusion support community forum 136219, MVC5 JS1 Grid Unable to get property '2' of undefined or null reference/methods/properties can be accessed only after plugin creation, has been updated. 

Hello: 

You say: 

We suspect that the Dll are not properly loaded in the Application…. 
 
I read the article about keeping version names the same.  In my web config all of the Syncfusion dlls being used are of version 16.1450.0.24 with one exception: 
<add assembly="Syncfusion.EJ.MVC, Version=16.1500.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" /> 
 
I do not have a Syncfusion.EJ.MVC version 16.1450.0.24.  But guess what…it appears tat you do not have one either. The sample application you provide a link to also uses the following: 
 
<add assembly="Syncfusion.EJ.MVC, Version=16.1500.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" /> 

So you also do not have all DLLS of the same version. 

So the information provided in this response is confusing. Do you have a Syncfusion.EJ.MVC version 16.1450.0.24.  If so do you use it anywhere?  Or is this whole conversation about matching DLLs not exactly accurate since there appears to be some exceptions. 


Loader.
Up arrow icon