KendoUI（Telerik 2018）-TreeList在手动刷新之前不会显示新创建的记录

Question

I am able to create new record in TreeList for MVC. But it shows newly created record only after refreshing the page. Edit and Delete works fine.

Razor Code

@(Html.Kendo().TreeList<KendoEx.Web.Models.Level>()
.Name("lvlTreeList")
.Toolbar(toolbar =>
{
    toolbar.Create();
})
.Columns(columns =>
{
    columns.Add().Field(e => e.LvlName).Title("Name").Width(120);
    columns.Add().Field(e => e.LvlType).Title("Type").Width(80);
    columns.Add().Field(e => e.Rating1).Title("Rating 1").Filterable(false).Width(100);
    columns.Add().Field(e => e.Rating2).Title("Rating 2").Filterable(false).Width(100);
    columns.Add().Command(c =>
    {
        c.CreateChild().Text("Add child");
        c.Edit();
        c.Destroy();
    }).Width(180);
})
.Editable(e => e.Mode("inline"))
.DataSource(dataSource => dataSource
    .Read(read => read.Action("GetLevel", "Level"))
    .Create(create => create.Action("Save", "Level"))
    .Update(update => update.Action("Save", "Level"))
    .Destroy(delete => delete.Action("Remove", "Level"))
    .Model(m =>
    {
        m.Id(f => f.Id);
        m.ParentId(f => f.ParentLvl).DefaultValue(0);
        m.Expanded(true);
        m.Field(f => f.LvlName);
        m.Field(f => f.LvlType);
        m.Field(f => f.Rating1);
        m.Field(f => f.Rating1);
    }))
.Height(550))

Controller Methods

public JsonResult GetLevel([DataSourceRequest] DataSourceRequest request)
{
    var lvlList = LoadLevels().ToTreeDataSourceResult(request);
    return Json(lvlList, JsonRequestBehavior.AllowGet);
}

private IEnumerable<Level> LoadLevels()
{
    IEnumerable<Level> lvlList = Enumerable.Empty<Level>(); ;
    using (var client = new HttpClient())
    {
        client.BaseAddress = new Uri(ConfigurationManager.AppSettings["WebApiExUrl"]);
        var responseTask = client.GetAsync("getlevel");
        responseTask.Wait();
        var result = responseTask.Result;
        if (result.IsSuccessStatusCode)
        {
            var readTask = result.Content.ReadAsAsync<FormattedResult<Level>>();
            readTask.Wait();
            if (string.IsNullOrEmpty(readTask.Result.Error))
            {
                IEnumerable<Level> tempList = readTask.Result.Data;
                lvlList = tempList.Select(m => new Level
                {
                    Id = m.Id,
                    LvlName = m.LvlName,
                    LvlType = m.LvlType,
                    ParentLvl = m.ParentLvl,
                    Rating1 = m.Rating1,
                    Rating2 = m.Rating2,
                    hasChildren = tempList.Where(s => s.ParentLvl == m.Id).Count() > 0
                });
            }
        }
    }
    return lvlList;
}

public JsonResult Save([DataSourceRequest] DataSourceRequest request, Level level)
{
    if (level != null && ModelState.IsValid)
    {
        try
        {
            using (var client = new HttpClient())
            {
                client.BaseAddress = new Uri(ConfigurationManager.AppSettings["KpiApiUrl"]);
                var postTask = client.PostAsJsonAsync("savelevel", level);
                postTask.Wait();
                var result = postTask.Result;
                if (result.IsSuccessStatusCode)
                {
                    var readTask = result.Content.ReadAsStringAsync();
                    readTask.Wait();
                }
            }
        }
        catch (Exception ex)
        {
            ModelState.AddModelError(string.Empty, "Unexpected error");
        }
    }
    return  Json(new[] { level }.ToTreeDataSourceResult(request, ModelState));
}

Model

public class Level
{
    public int Id { get; set; }        
    public string LvlName { get; set; }
    public string LvlType { get; set; }
    public int? ParentLvl { get; set; }
    [RegularExpression(@"^(\d{1,2}(\.\d{0,2})?)?(<|<=|>|>=)(\d{1,3}(\.\d{0,2})?)$", ErrorMessage = "Invalid")]
    public string Rating1 { get; set; }
    [RegularExpression(@"^(\d{1,2}(\.\d{0,2})?)?(<|<=|>|>=)(\d{1,3}(\.\d{0,2})?)$")]
    public string Rating2 { get; set; }
}

If the 'Save' method returns

return Json(LoadLevels().ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);

instead of

return  Json(new[] { level }.ToTreeDataSourceResult(request, ModelState));

the TreeList shows duplicate records

The 'Save' event of TreeList also behaves in the same way.

function onSave() {
    $("#lvlTreeList").data("kendoTreeList").dataSource.read();
}

Version Info: Telerik 2018.1.221.545, MVC 5.2, .NET 4.6

Please advise on this. Thanks.

Demo Link: https://demos.telerik.com/aspnet-mvc/treelist/editing

Answer 1

Calling read() in Sync event of DataSource, refreshes the TreeList and displays newly created level.

Razor Code

@(Html.Kendo().TreeList<..>()
.Name("lvlTreeList")
 /*..*/     
.DataSource(dataSource => dataSource
    .Events(e => e.Sync("lvlTreeList_Sync"))
    /*...*/
))

Javascript

<script>
    function lvlTreeList_Sync() {
        this.read();
    }
</script>

Refer: https://www.telerik.com/forums/refresh-after-upda