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

Context Menu on Node

1 Answer 10 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 May 2020, 09:09 PM

I use TreeList a lot in my Portal.  However, instead of having big buttons showing in the grid the users would like to have a context menu.  In the simplest form, I'd need to right click and get an option to go to the details or add a sub-node of the selected node.

The node Template:

<script id="icon-template" type="text/x-kendo-template">
    <div class='group-icon'
         style='background-image: url(@Url.Content("#: ImageUrl #"));'></div>
    <div class='group-name'>#: Name #</div>
</script>

My current TreeList:

@(Html.Kendo().TreeList<Group>()
      .Name("treelist")
      .Columns(columns =>
      {
          columns.Add().Field(e => e.Name).TemplateId("icon-template").Width(350);
      })
      .DataSource(dataSource => dataSource
        .Read(read => read.Action("IndexJson", "Groups").Data("getData"))
        .ServerOperation(false)
        .Model(m =>
        {
            m.Id(f => f.Id);
            m.ParentId(f => f.ParentId);
            m.Expanded(true);
            m.Field(f => f.Name);
        })
          .Sort(s => s.Add(f => f.Name))
          .Events(events => events.Error("onError"))
    )
    .HtmlAttributes(new { style = "height:550px;" })
    .Selectable(s => s.Mode(TreeListSelectionMode.Single))
    .Events(events =>
    {
        events.DataBound("onDataBound");
    }))

 

 

1 Answer, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 19 May 2020, 12:58 PM

Hi Joel,

 

Thank you for describing the scenario. In order to include a context menu to the TreeList widget I would suggest using an approach similar to the one illustrated in the following example:

https://docs.telerik.com/kendo-ui/controls/data-management/treelist/how-to/show-context-menu

 

The definition of the ContextMenu would look similar to this:

@(Html.Kendo().ContextMenu()
    .Name("contextMenu")
    .Target("#treelist")
    .Filter("tbody > tr")
    .Items(items => {
        items.Add().Text("Add");
    })
    .Events(e => e.Select("onSelect"))
)

 

And the select handler

function onSelect(e) {
	var button = $(e.item);
	var row = $(e.target);
	var dataItem = $("#treelist").data("kendoTreeList").dataItem(row);

	alert(kendo.format("'{0}' button clicked on '{1}'", button.text(), dataItem.FirstName));

}

 

Based on the selected option in the menu you can call the addRow method for the respective dataItem 

 

Regards,
Viktor Tachev
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
Viktor Tachev
Telerik team
Share this question
or