TreeListSelectionMode.Single Item Selected Event

[Joel]

When I make a TreeList selectable, how do I capture a click and double-click event with information about the selected Item?  

 

Thanks, Joel

[Joel]

My definition.  Right now, my first column says select.  I would like it to fire the same goDetail function but without the button:

@(Html.Kendo().TreeList<NameValueParent>()
      .Name("treelist")
      .Columns(columns =>
      {
          columns.Add().Command(c => { c.Custom().Text("Select")
              .Name("selectButton").ClassName("selectButton")
              .Click("goDetail"); })
              .Width(Glossary.Portal.ButtonWidth);
          columns.Add().Field(e => e.Name);
          columns.Add().Field(e => e.Description);
          columns.Add().Width(330).Command(c =>
          {
              c.CreateChild().Text("Add");
              c.Edit();
              c.Destroy();
          })
              .HtmlAttributes(new
              {
                  style = "text-align: center;"
              });
      })
      .Events(ev => ev.DataBound("onDataBound"))
      .Editable()
      .Selectable(s => s.Mode(TreeListSelectionMode.Single))
      .DataSource(dataSource => dataSource
          .Create(create => create.Action("Create", "Site"))
          .Read(read => read.Action("IndexJson", "Site").Data("getData"))
          .Update(update => update.Action("Update", "Site"))
          .Destroy(delete => delete.Action("Destroy", "Site"))
          .Model(m =>
          {
              m.Id(f => f.Id);
              m.ParentId(f => f.ParentId);
              m.Expanded(true);
              m.Field(f => f.Name);
          }).Events(events =>
          {
              events.Error("onError");
          })
      ).Height(540))

<script>
    function goDetail(e) {
        e.preventDefault();
        //alert("goDetail: " + e.toString());
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        //alert("goDetail: " + dataItem.id);
        $('#itemId').val(dataItem.id);
    }

...

[Nikolay]

Hi Joel,

The click and double click events can be captured with the jQuery .click() and .dblclick() events respectively and instance of the row can be obtained via the dataItem method of the TreeList:

$("#treeview").on("dblclick", function(e){
   var tree = $("#treeview").data("kendoTreeView");
   var item = tree.dataItem($(e.target).closest("li"));
});

This could be examined live in the following Dojo demo. Please note that it uses jQuery TreeList implementation, however, the above is valid for ASP.NET Core TreeLists.

• http://dojo.telerik.com/uLEWafaR

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik