Context Menu on Node

[Joel]

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");
    }))

 

 

[Viktor Tachev]

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