TypeError: r.model is null when adding new row in ASP.NET MVC Grid Control

[Jeffrey Stone]

I am receiving the following error message

TypeError: r.model is null
.show/<() ej.web.all.min.js:10
n.speed/d.complete() jquery.min.js:3
n.Callbacks/j() jquery.min.js:2
n.Callbacks/k.fireWith() jquery.min.js:2
Xa/i() jquery.min.js:3
n.fx.tick() jquery.min.js:31
ej.web.all.min.js:10:660180

The error is occurring when 1) trying to add a new row 2) and then selecting an item for the BrokerageSubAccountId column (in bold in grid definition) which is a foreign key dropdown. (When I leave the field using the mouse whatever item appears to be selected disappears). The column works for existing rows - the problem is only occurring for inserted rows.

@(Html.EJ().Grid<BrokerageAccountTransactionRow>("Grid")
    .Datasource(ds => ds.URL(@Url.Action("BatchDataSource", "BrokerageAccountTransaction")).BatchURL(@Url.Action("BatchUpdate", "BrokerageAccountTransaction")).Adaptor(AdaptorType.UrlAdaptor))
    .EditSettings(edit => { edit.AllowAdding().AllowEditing().AllowDeleting().EditMode(EditMode.Batch); })
    .AllowFiltering(true)
    .AllowPaging(true)
    .AllowResizeToFit(true)
    .AllowSelection(false)
    .AllowSorting(true)
    .AllowTextWrap(true)
    .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
    .PageSettings(p => { p.PageSize(20);  })
    .Columns(col =>
    {
       
        col.Field(r => r.TransactionDate).Add();
        col.Field(r => r.BrokerageSubAccountId).ForeignKeyField("BrokerageSubAccountId").ForeignKeyValue("FullAccountName").DataSource(((IEnumerable<object>)ViewBag.SubAccounts)).Add();
        col.Field(r => r.Amount).TextAlign(TextAlign.Right).EditType(EditingType.Numeric).NumericEditOptions(new EditorProperties { DecimalPlaces = 2 }).Add();
        col.Field(r => r.Description).ValidationRules(v => v.AddRule("required", true)).EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).Add();
        col.Field(r => r.DateAdded).AllowEditing(false).Add();
        col.Field(r => r.TransferToBrokerageSubAccountId).DefaultValue("").ForeignKeyField("BrokerageSubAccountId").ForeignKeyValue("FullAccountName").DataSource(((IEnumerable<object>)ViewBag.SubAccounts)).Add();
    }).ToolbarSettings(toolbar =>
    {
        toolbar.ShowToolbar().ToolbarItems(items =>
        {
            items.AddTool(ToolBarItems.Add);
            items.AddTool(ToolBarItems.Edit);
            items.AddTool(ToolBarItems.Update);
            items.AddTool(ToolBarItems.Cancel);
        });
    }).ClientSideEvents(eve => { eve.QueryCellInfo("formatCell"); }))


Regards, Jeff

[Prasanna Kumar Viswanathan]

Hi Jeffrey, 

Thank you for contacting Syncfusion support. 

We created a sample according to your code example and we did not face issue in ForeignKey column while adding new data. 

To reproduce the issue we need the following details, 

1.       Essential Studio Version details. 

2.       Reproduce the issue in the attached sample. 

 

3.       Did you face this issue in other editmodes? 

 

4.       What are the operations have you done in the QueryCellInfo event? 

Sample: http://www.syncfusion.com/downloads/support/forum/124235/ze/EJGrid-1459880460 

Regards, 

Prasanna Kumar N.S.V 

 

[Jeffrey Stone]

Thanks for the quick response. I appreciate the great support you all provide!

I am receiving an error message when trying to start the attached project:

Parser Error Message: Could not load file or assembly 'Syncfusion.EJ, Version=14.1400.0.46, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89' or one of its dependencies. The located assembly's manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040)Line 28: <compilation debug="true" targetFramework="4.5">

Line 29:       <assemblies>
Line 30:         <add assembly="Syncfusion.EJ, Version=14.1400.0.46, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"/>
Line 31:         <add assembly="Syncfusion.EJ.Mvc, Version=14.1400.0.46, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"/>
Line 32:       </assemblies>

In my project the similar line in the Web.config is:
                <add assembly="Syncfusion.EJ, Version=14.1450.0.46, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />

Regarding your questions:
#1 - I believe I am using version 14.1.1450.0.46
#2 - running into the above problem so I can't yet reproduce the same problem.
#3 - I don't experience this in other edit modes - I can modify existing values just fine.
#4 - Here is the javascript I have executing in the queryCellInfo:
   
      function formatCell(args) {
            var value = args.text.replace(",", "");
            var $element = $(args.cell);
            switch (args.column.field) {
            case "@nameof(BrokerageAccountTransactionRow.Amount)":
                if (parseFloat(value.replace("(", "-").replace(/[^0-9\.-]+/g, "")) < 0) {
                    $element.css("color", "red");
                } else {
                    $element.css("color", "green");
                }
                break;
            }
        }

Also, I did notice that I am using a newer version of jquery than in the attached sample. (I did try using the version in the sample but I still received the same error).
Here is my full set of script files is as follows:

    <script src="@Url.Content("~/Scripts/jquery-2.2.3.min.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.linq.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/globalize.js")"></script>
    <script src="@Url.Content("~/Scripts/web/ej.web.all.min.js")"></script>
    <script src="@Url.Content("~/Scripts/common/ej.unobtrusive.min.js")"></script>
    @Scripts.Render("~/bundles/bootstrap")
    <script src="@Url.Content("~/Scripts/moment.min.js")"></script>
    <script src="@Url.Content("~/Scripts/daterangepicker.js")"></script>

    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>

Regards, Jeff

[Prasanna Kumar Viswanathan]

Hi Jeffrey, 

We regret for the inconvenience. 

We tried with our sample by the given code example and we did not face any script error while selecting an item from the foreign key dropdown. We also tried with the newer version of jquery and we unable to reproduce the issue at our end. 

Find the script files that we are referred in our sample: 

   <link rel='nofollow' href="~/Themes/flat-saffron/ej.widgets.all.min.css" rel="stylesheet" /> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" /> 

    <script src="~/Scripts/jquery.linq.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> 

    <script src="~/Scripts/ej.web.all.min.js"></script> 

    <script src="~/Scripts/ej.unobtrusive.min.js"></script> 

    <script src="~/Scripts/jquery.validate.min.js"></script> 

    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script> 

    <script src="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2.1.20/daterangepicker.js"></script> 

Sample: http://www.syncfusion.com/downloads/support/forum/124235/ze/EJGrid_(2)-316308354 

Now we attached the sample with mentioned version and please try the attached sample. If you still face the same issue, reproduce the issue in the attached sample and get back to us. 

Regards, 

Prasanna Kumar N.S.V