This is a migrated thread and some comments may be shown as answers.

Update/Destroy Parameter [new]

5 Answers 19 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Joel asked on 14 Dec 2018, 10:34 PM

I am using the TreeList as defined below.  I can successfully get and display my hierarchy.  However, when I go to update,  the [Group group] is empty like it newed up an instance of the object instead of took it from the tree.  What am I missing?

TreeList Definition:

<script id="photo-template" type="text/x-kendo-template">
    <div class='group-photo'
         style='background-image: url(@Url.Content("~/images/32/building.png"));'></div>
    <div class='group-name'>#: Name #</div>
</script>
 
<div class="demo-section k-content">
    <h4>Customer Groups</h4>
    @(Html.Kendo().TreeList<GsiPortal.Models.Group>()
          .Name("treelist")
          .Columns(columns =>
          {
              columns.Add().Field(e => e.Name).Width(220).TemplateId("photo-template");
              columns.Add().Field(e => e.DisplayName);
              columns.Add().Field(e => e.Description);
              columns.Add().Field(e => e.AddTimestamp).Width(220).Title("Timestamp").Format("{0:MMMM d, yyyy}");
              columns.Add().Command(c =>
              {
                  c.CreateChild().Text("Add child");
                  c.Edit();
                  c.Destroy();
              })
                  .HtmlAttributes(new
                  {
                      style = "text-align: center;"
                  });
          })
          .Editable(e => e.Mode(TreeListEditMode.InLine))
          .Pageable()
          .Selectable(selectable => selectable.Mode(TreeListSelectionMode.Single))
          .Navigatable()
          .Sortable()
          .Scrollable(true)
          .Filterable()
          .HtmlAttributes(new { style = "height:550px;" })
          .DataSource(dataSource => dataSource
              .PageSize(20)
              .Model(m =>
              {
                  m.Id(f => f.Id);
                  m.ParentId(f => f.ParentId);
                  m.Expanded(true);
                  m.Field(f => f.Name);
                  m.Field(f => f.DisplayName);
                  m.Field(f => f.Description);
                  m.Field(f => f.AddTimestamp).Editable(false);
                  m.Field(f => f.LastActionTimestamp).Editable(false);
              })
              .Create(create => create.Action("CreateJson", "Groups"))
              .Read(read => read.Action("AllJson", "Groups"))
              .Update(update => update.Action("UpdateJson", "Groups"))
              .Destroy(delete => delete.Action("DestroyJson", "Groups"))
          ))
 
    <style>
        .group-photo {
            display: inline-block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-size: 40px 44px;
            background-position: center center;
            vertical-align: middle;
            line-height: 41px;
            box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
        }
 
        .group-name {
            display: inline-block;
            vertical-align: middle;
            line-height: 41px;
            padding-left: 10px;
        }
    </style>

 

Control Methods

public async Task<JsonResult> AllJson([DataSourceRequest] DataSourceRequest request)
{
    var all = await groupService.GetAllAsync();
    var result = await all.ToTreeDataSourceResultAsync(request,
        e => e.Id,
        e => e.ParentId,
        e => e);
 
    return Json(result);
}
 
public async Task<JsonResult> CreateJson([DataSourceRequest] DataSourceRequest request, Group group)
{
    if (ModelState.IsValid)
    {
        customerDbContext.Add(group);
        await customerDbContext.SaveChangesAsync();
    }
 
    return Json(new[] { group }.ToTreeDataSourceResult(request, ModelState));
}
 
public async Task<JsonResult> UpdateJson(
    [DataSourceRequest] DataSourceRequest request,
    Group group)
{
    if (ModelState.IsValid)
    {
        customerDbContext.Update(group);
        await customerDbContext.SaveChangesAsync();
    }
 
    return Json(new[] { group }.ToTreeDataSourceResult(request, ModelState));
}
 
public async Task<JsonResult> DestroyJson([DataSourceRequest] DataSourceRequest request, Group group)
{
    if (ModelState.IsValid)
    {
        customerDbContext.Group.Remove(group);
        await customerDbContext.SaveChangesAsync();
    }
 
    return Json(new[] { group }.ToTreeDataSourceResult(request, ModelState));
}

Also, I have attached a picture of the TreeLIst

5 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 19 Dec 2018, 01:30 PM
Hello Joel,

I have examined the code and noticed that the Pageable option is enabled for the TreeList. Note that paging in the widget works only client-side. Thus, in order for the paging to work as expected the ServerOperations setting for the DataSource should be set to false. Would you try removing the Pageable and PageSize settings from the configuration and see if that makes a difference.

Also, it seems that async Actions are used. In such scenarios you can use the ToTreeDataSourceResultAsync method instead of ToTreeDataSourceResult.

In case the issue persists please send us a runnable sample where the problematic behavior is replicated. This will enable us to examine the issue locally and look for its cause.


Regards,
Viktor Tachev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 19 Dec 2018, 05:49 PM
I have posted a support ticket with an example project.
0
Accepted
Viktor Tachev
Telerik team
answered on 20 Dec 2018, 12:07 PM
Hello Joel,

Thank you for the project. I have replied in the support ticket, however I will also post the reply here in case someone else is facing similar behavior. 

The argument in the CRUD actions was named group, however that is a reserved word used by the DataSource. In order to have the operations work as expected please rename the argument - for example to groupName. After modifying the code as illustrated in the following snippet that data was passed to the controller as expected.

public async Task<JsonResult> UpdateJson(
    [DataSourceRequest] DataSourceRequest request,
    Group groupName)
{
    if (ModelState.IsValid)
    {
        IEnumerable<Group> match = groups.Where(x => x.Id == groupName.Id);
    }
 
    return Json(await new[] { groupName }.ToTreeDataSourceResultAsync(request, ModelState));
}


Regards,
Viktor Tachev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 20 Dec 2018, 04:04 PM

You would not believe how much time I spent on this.  Its embarrassing.

Is there a way to throw a good error message if the parameter Type doesn't match what you're expecting?  Otherwise, please document this.  Thank you.

0
Viktor Tachev
Telerik team
answered on 21 Dec 2018, 11:29 AM
Hi Joel,

Thank you for the feedback. We will consider updating the documentation so this specific behavior is more clear. 

Regards,
Viktor Tachev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
TreeList
Asked by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Viktor Tachev
Telerik team
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Share this question
or