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

TreeListSelectionMode.Single Item Selected Event

2 Answers 9 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 27 Mar 2020, 03:16 AM

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

 

Thanks, Joel

2 Answers, 1 is accepted

Sort by
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 27 Mar 2020, 03:30 AM

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);
    }
 
...
0
Accepted
Nikolay
Telerik team
answered on 31 Mar 2020, 01:40 PM

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.

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
TreeList
Asked by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Nikolay
Telerik team
Share this question
or