Dynamic Kendo Menu which uses Ajax to call actions

Question

Here is code I have and the menu displays.

                @(Html.Kendo().Menu()
                    .Name("MainMenu")
                    .BindTo(_userMenu.UserMenuItems, mappings =>
                    {
                        mappings.For<UserMenuItemModel>(binding => binding.ItemDataBound((item, UserMenuItemModel) =>
                        {
                            item.Text = UserMenuItemModel.Description;
                            item.ActionName = UserMenuItemModel.ActionName;
                            item.ControllerName = UserMenuItemModel.ControllerName;
                            item.HtmlAttributes = (new { data-ajax = "true",  });
                        })
                   .Children(UserMenuItemModel => UserMenuItemModel.SubMenuItems));
            mappings.For<UserMenuItemModel>(binding => binding.ItemDataBound((item, UserMenuItemModel) =>
            {
                item.Text = UserMenuItemModel.Description;
                item.ActionName = UserMenuItemModel.ActionName;
                item.ControllerName = UserMenuItemModel.ControllerName;

            }));
            })                
            )

However, clicking an item makes a non ajax call which won't work in our architecture.

Basically, with the kendo menu item I'm shooting to have links which function exactly like what this does.

                <li>
                @Ajax.ActionLink(item.Description, item.ActionName, item.ControllerName, ajaxMainMenuOptions)
            </li>

I thought I was going to be able to set the HTMLAttributes for each item but that's read only.

Our dynamic menu is hiearchical with no limits on levels. I'm working another angle with a recursive partial page, but having a lot of trouble with CSS.

The kendo menu was extremely simple to bind to a our self referencing model, I just have to figure out how to get it to make an Ajax.ActionLink call.

Any pointers are greatly appreciated.

Thanks.

Answer 1

Just realized the Attributes have an add.

This appears to be what we were shooting for.

  @(Html.Kendo().Menu()
                    .Name("MainMenu")
                    .BindTo(_userMenu.UserMenuItems, mappings =>
                    {
                        mappings.For<UserMenuItemModel>(binding => binding.ItemDataBound((item, UserMenuItemModel) =>
                        {
                            item.Text = UserMenuItemModel.Description;
                            item.ActionName = UserMenuItemModel.ActionName;
                            item.ControllerName = UserMenuItemModel.ControllerName;
                            item.LinkHtmlAttributes.Add("data-ajax", "true");
                            item.LinkHtmlAttributes.Add("data-ajax-method", "GET");
                            item.LinkHtmlAttributes.Add("data-ajax-mode", "replace");
                            item.LinkHtmlAttributes.Add("data-ajax-update", "#MainBody");



                        })
                   .Children(UserMenuItemModel => UserMenuItemModel.SubMenuItems));
                        mappings.For<UserMenuItemModel>(binding => binding.ItemDataBound((item, UserMenuItemModel) =>
                        {
                            item.Text = UserMenuItemModel.Description;
                            item.ActionName = UserMenuItemModel.ActionName;
                            item.ControllerName = UserMenuItemModel.ControllerName;
                            item.LinkHtmlAttributes.Add("data-ajax", "true");
                            item.LinkHtmlAttributes.Add("data-ajax-method", "GET");
                            item.LinkHtmlAttributes.Add("data-ajax-mode", "replace");
                            item.LinkHtmlAttributes.Add("data-ajax-update", "#MainBody");

                        }));
                    })
            )

For anybody else, this is a fully dynamic menu built using a hierarchical, self-referencing model. UserMenuItemModel contains a List

Adding keywords because I really never found anything like this, Kendo Menu Ajax ActionLink hierarchical self-referencing

Hope this helps others.