Navigation to Detail Page

[Joel]

I need to allow the user to select an item from the TreeList then go to its detail.  I don't believe there is a double-click event.  So then, I assume I'll need to put a "Details" button on the Grid.  Do you have an example how I do this?  I assume we do something like this (doesn't work):

@(Html.Kendo().TreeList<GsiPortal.Models.Group>()
  .Name("treelist")
  .Columns(columns =>
  {
      columns.Add().Command(c => { c.Custom().Text("Detail");}).HtmlAttributes(new { style = "text-align: center;" });
      columns.Add().Field(e => e.Name).Width(220).TemplateId("icon-template");
      columns.Add().Field(e => e.Description);
      columns.Add().Field(e => e.CurrentStatus.Name).Title(nameof(Group.Status));
      columns.Add().Field(e => e.AddTimestamp).Width(220).Title("Timestamp").Format("{0:MMMM d, yyyy}");
      columns.Add().Command(c => { c.CreateChild().Text("Add"); }).HtmlAttributes(new { style = "text-align: center;" });
      columns.Add().Command(c => { c.Edit(); }).HtmlAttributes(new { style = "text-align: center;" });
      columns.Add().Command(c => { c.Destroy(); }).HtmlAttributes(new { style = "text-align: center;" });
  })
  .Editable(e => e.Mode(TreeListEditMode.PopUp).TemplateName("GroupEdit"))
  .Selectable(selectable => selectable.Mode(TreeListSelectionMode.Single))
  .DataSource(dataSource => dataSource
      .ServerOperation(false)
      .Create(create => create.Action("CreateJson", "Groups"))
      .Read(read => read.Action("AllJson", "Groups").Data("groupsRead"))
      .Update(update => update.Action("UpdateJson", "Groups"))
      .Destroy(delete => delete.Action("DestroyJson", "Groups"))
      .Model(m =>
      {
          m.Id(f => f.Id);
          m.ParentId(f => f.ParentId);
          m.Expanded(true);
          m.Field(f => f.Name);
          m.Field(f => f.Description);
          m.Field(f => f.AddTimestamp).Editable(false);
      })
      .Events(events =>
      {
          events.Error("onError");
      })
  ))

[Joel]

I figured this one out.

here is my command column definition:

columns.Add().Command(c => { c.Custom().Text("Details").Name("detailButton").Click("toDetails"); });

Then, "toDetails" is inside a <script>:

 

<script>
    function toDetails(e) {
        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

        if (dataItem != null) {
            alert(dataItem.Id);
            window.location.href = '@Url.Action("Details", "Groups")/' + dataItem.Id;
        }
    }

[Viktor Tachev]

Hi Joel,

For adding a custom command to the TreeList you can use an approach that is almost exactly the same as when adding custom command to the Grid:

• https://demos.telerik.com/aspnet-mvc/grid/custom-command

The only difference when using TreeList would be how the command is defined:

 

columns.Add().Command(command => command.Custom().Name("ViewDetails").Click("showDetails"));

 

The code showing detail information can be the same.


Regards,
Viktor Tachev
Progress Telerik