How to add a Menu to a TreeList?

1 Answer 16 Views
Menu TreeList
René
Top achievements
Rank 1
René asked on 17 Jun 2025, 07:58 AM

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é

1 Answer, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 17 Jun 2025, 08:55 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

René
Top achievements
Rank 1
commented on 18 Jun 2025, 07:51 AM

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
Telerik team
commented on 23 Jun 2025, 07:49 AM

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.

Tags
Menu TreeList
Asked by
René
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Share this question
or