Render Partial view in menu

[Muhammad Tassadaque Zia]

Hi

In my menu I have the following code

menu.Add()

        .Text("Reports")

         .Children(child => {

             child.Add().ContentTemplate(Html.RenderAction("documentcontent"));

         });

        }

As you see I want to renderaction in contentTemplate but it gives me following error

 cannot convert from 'void' to 'System.Action<Syncfusion.JavaScript.Models.MenuBaseItem>'

My objective is to render partial view inside top menu reports ==> partial view

Please let me know the syntax for rendering partial view in menu

[Prince Oliver]

Hi Muhammad, 

Thank you for contacting Syncfusion forums. 

To render Partial view in menu control, you can use Html.Partial instead of Html.RenderAction. Kindly refer to the following code snippet. 

<div class="imgframe"> 

    @Html.EJ().Menu("syncfusionProducts").Items(menu => 

        { 

            menu.Add().Text("Books").Children(child => 

                    { 

                        child.Add().ContentTemplate(@<div> 

                                 @(Html.Partial("Documentcontent")); 

                        </div>); 

                    }); 

        }).Width("612") 

</div> 

We have prepared a sample for your reference. Please find the sample from the following location: http://www.syncfusion.com/downloads/support/forum/132631/ze/MenuPartialView1384427629 

Regards, 

Prince 

[Muhammad Tassadaque Zia]

Thanks for your reply

Your solution is working for HTML.Partial but it is not working for

Html.Action or Html.RenderAction

If you could provide the working solution for the above helpers

[Prince Oliver]

Hi Muhammad, 

Thank you for your update. 

To render Partial view in menu control with Html.RenderAction, you need to use create event and append the rendered content into the menu’s <li> element. Kindly refer to the following code snippet. 

<h3>Html.RenderAction</h3> 

<div class="imgframe"> 

    @Html.EJ().Menu("syncfusionProducts").Items(menu => 

        { 

            menu.Add().Text("Books").Children(child => 

                    { 

                        child.Add().ContentTemplate(@<div> 

                                    @{Html.RenderAction("Documentcontent");} 

                        </div>); 

                    }); 

        }).Width("612").ClientSideEvents(e=>e.Create("oncreate")) 

</div> 

<script> 

    function oncreate(args) { 

        $(this.element.find("ul li div")[0]).append($("div.temp.temp1")); 

    } 

</script> 

To render Partial view in menu control with Html.Action, kindly refer to the following code snippet. 

<h3>Html.Action</h3> 

<div class="imgframe"> 

    @Html.EJ().Menu("syncfusionProducts2").Items(menu => 

    { 

        menu.Add().Text("Books").Children(child => 

                { 

                    child.Add().ContentTemplate(@<div> 

                            @(Html.Action("Documentcontent2")); 

                        </div>); 

                    }); 

        }).Width("612") 

</div> 

We have prepared a sample for your convenience, kindly refer to the following link for the sample: http://www.syncfusion.com/downloads/support/forum/132631/ze/MenuPartialView185856840 

Regards, 

Prince