How to add a Menu to a TreeList?

[René]

Hi there,

In my grids, I have a column with a menu :

columns.Template(@<text></text>).Width(106).HtmlAttributes(new { @class = "templateCell" }).ClientTemplate(
                    Html.Kendo().Menu().Direction(MenuDirection.Left)
                        .Name("menu_#=AccountId#")
                        .Items(its =>
                        {
                            its.Add().Text("Functions:").Items(nested =>
                            {
                                nested.Add().Text(importFilesText).Action(importFilesAction, "Accounts", new { id = "#=AccountId#", cid = Model.CompanyId, returnUrl = returnUrl});
                            });

                        })
                        .ToClientTemplate().ToHtmlString()
                    );
                })

 

But in the TreeList there is no ClientTemplate

 

I tried using the TemplateId

<script id="menuFolder" type="text/x-kendo-template">
            @(Html.Kendo().Menu()
                  .Name("menu")
                  .Direction(MenuDirection.Left)
                  .Items(its =>
                  {
                      its.Add().Text("Functions:").Items(nested =>
                      {
                          nested.Add().Text("Create Rule").Url("javascript:createRule(#=Id#, #=AccountId#, #=CompanyId#);");
                          nested.Add().Separator(true);
                          nested.Add().Text("Select Account QBEAccountId").Url("javascript:SelectId(#=Id#);");
                      });
                  })
                  .ToClientTemplate())
</script>

And I can get the menu to display, but it is cut of inside the treelist.

In the old days with the grid we used to change the css of the parent with overflow-y:display !important; but that does not seem to work.

Any ways this can be accomplished in the treelist - next step is the items in the list are depending on the content of the row ...

 

Best regards,

 - René

[Eyup]

Hi René,

 

Thank you for reaching out.

You can achieve this requirement by using the ContextMenu outside the TreeList, similar to this javascript implementation:
https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/show-context-menu

Can you please check the sample and let me know if you find it helpful?

 

Regards,
Eyup
Progress Telerik

[René]

I can work with a context menu that works on the whole row.

Is it easy to add a button at the end that will open the context menu? If people are not aware of the context menu, I would like to add a burger menu button that will simply activate the context menu and I get my button-click-menu and a context menu

 - René

[Eyup]

Hi René,

This is possible using a Custom Command button integrated within the Grid as demonstrated here:
https://demos.telerik.com/aspnet-core/grid/custom-command

When the user clicks on this button, you can show the menu or another popup window depending on your preferences.