TreeList Add child node doesnt appear without refreshing page

[Eric]

Greetings,

 

I'm working on an issue with our Kendo UI...essentially i have a parent node and i want to add a child node and have the change show up immediately like it does in the Kendo UI example.  Upon clicking Add for a new child node, i can enter my details and update the row. 

In the example shown here: https://demos.telerik.com/aspnet-mvc/treelist/editing you'll see once the update button is clicked the row automatically updates and you can see the child node you've created.

My issue is that once i click the update button the row disappears and only a page refresh will show the new child node row.

The error i get when trying to update the row is a generic: POST http://localhost:16922/Rackhouses/RackhouseTreeList_Add 500 (Internal Server Error)

Here's my cshtml for the treelist:

@(Html.Kendo().TreeList<WhiskeySystems.ViewModels.RackhouseTreeListItemVM>
    ()
    .Name("treelist")
    .Toolbar(toolbar => toolbar.Create().Text("Add Rackhouse"))
    .Columns(columns =>
    {
        columns.Add().Field(e => e.Name).Title("Name").Width(220);
        columns.Add().Field(e => e.InMyBond).Title("In My Bond").Width(100).Template("<input type='checkbox' data-bind='checked: InMyBond' onclick='return false;'/>" );
        columns.Add().Field(e=> e.Tiers).Title("Tiers");
        columns.Add().Field(e => e.Rows).Title("Rows");
        columns.Add().Field(e => e.Capacity).Title("Capacity");
        columns.Add().Width(300).Command(c =>
        {
            c.Edit();
            c.Destroy();
            c.CreateChild().Text("Add Zone");
            c.Custom().Name("defaultZone").ClassName("zoneDefault").Click("setDefaultZone").Text("Set Default");
        });
    })
    .Editable(e=>e.Mode("inline"))
    .DataSource(dataSource => dataSource
    .Create(create => create.Action("RackhouseTreeList_Add", "Rackhouses"))
    .Read(read => read.Action("RackhouseTreeList_Read", "Rackhouses"))
    .Update(update => update.Action("RackhouseTreeList_Update", "Rackhouses"))
    .Destroy(delete => delete.Action("RackhouseTreeList_Delete", "Rackhouses"))
    .Events(e=> { e.Error("onError"); e.RequestEnd("requestEnd"); })
    .Model(m => {
        m.Id(f => f.Id);
        m.ParentId(f => f.ParentId);
        m.Expanded(true);
        m.Field(f => f.Capacity);
        m.Field(f => f.DistilleryId);
        m.Field(f => f.InMyBond);
        m.Field(f => f.InvTypeId);
        m.Field(f => f.Name);
        m.Field(f => f.Rows);
        m.Field(f => f.Tiers);
    })

    )
    .Events(e => { e.DataBound("OnDataBound"); e.Edit("OnEdit"); })

    )

Heres my TreeList Add code for the controller:

 

public JsonResult RTreeList_Add([DataSourceRequest] DataSourceRequest request, RTreeListItemVM VM)
        {
            using (var contextScope = _scope.Create())
            {
                try
                {

                    _RBS.AddRTreeListItemVM(VM);
                    contextScope.SaveChanges();
                    //Assign the new Id back to the VM after saving.
                    if (VM.ParentId.HasValue)
                    {
                        VM.Id = VM._zone.Id + 0.2m;
                    }
                    else
                    {
                        VM.Id = VM._r.Id + 0.1m;
                    }
                }
                catch (Exception ex)
                {
                    ModelState.AddModelError("Error", ex.Message);
                }

                return Json(new[] { VM }.ToTreeDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);
            }
        }









                   

 

 

I've done quite a bit of troubleshooting and cant seem to find anything that stands out.  Made sure my scripts are running in the right order.  Im new to kendo so still trying to ramp up my knowledge here.  Thanks in advance!

 

                   

[Eyup]

Hi Eric,

 

Thank you for contacting us.

There are couple of steps you can take in order to troubleshoot this issue:

1. Take the return Json(...) line outside the using statement scope.

2. Remove the try and catch statements temporarily.

3. Run the page in Chrome browser.

4. Open the F12 inspector, open the Network tab and refresh the page (Ctrl+R).

5. You will see the failing link - click on it.

6. On the right of the inspector in the Response semi-tab view it should now show you the exact server error which is failing. It would look like this:

Alternatively, you can use C# debugging in the Controller Action because error 500 indicates that the problem is in the server even before reaching the client-side (browser).

Once you can see the exact error, you can then fix it or take a screenshot (error or stacktrace) and send it to us for additional insight.

Feel free to give these steps a try and let me know about the result.

 

Regards,
Eyup
Progress Telerik