MVC Splitter - How to show loading panel on main content pane

Thanks for your reply,can you please give me a sample example .Iam confused.

Please note that this is how i call my vertical-left menu.
@Html.DevExpress().CallbackPanel(settings => {
    settings.Name = "CallbackPanel1";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "CallbackPanel1Partial" };
    settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
    settings.Height = System.Web.UI.WebControls.Unit.Percentage(100);
    settings.ClientSideEvents.BeginCallback = "onBeginCallback";

string siteMapSource = ViewBag.Index!= null ? string.Format("~/App_Data/ds{0}.xml", ViewBag.Index) : string.Format("~/App_Data/ds{0}.xml", 0);
    settings.SetContent(() => {
        Html.DevExpress().Menu(settingsMenu => {
            settingsMenu.Name = "SubMenu1";

settingsMenu.AllowSelectItem = true;
            settingsMenu.Orientation = System.Web.UI.WebControls.Orientation.Vertical;
            settingsMenu.ClientSideEvents.ItemClick = "OnSubMenuClick";
            settingsMenu.ItemDataBound = (s, e) => {
               if( !String.IsNullOrWhiteSpace(e.Item.NavigateUrl)){
                     e.Item.Name = e.Item.NavigateUrl;
                     e.Item.NavigateUrl = null;
               }
            };
        }).BindToXML(HttpContext.Current.Server.MapPath(siteMapSource), "//mainmenu/*").Render();
    });
}).GetHtml()

Hi,
I apologize for the delayed response. Would you please clarify what control is used for showing/switching tabs: TabControl, PageControl, the Splitter with the horizontal menu? It will be helpful if you provide us with additional information - some screenshots demonstrating actual and expected results or a simplified project where the problem occurs.
I'm looking forward to your reply.

No poblem,I used a "Call backpanel". On thecallback panel the menu is binded froman xml file.

In this case, I'm not really sure that I understand what you mean by "tabs switching", since MVC Menu does not have tabs, where you can place other controls, like GridView. Would you please provide me with a screencast or some screenshots demonstrating your UI?

Please go through my image here http://s11.postimg.org/5xsqiph4j/Untitled.png or from the attachment(Both are same)

I guess this is the code that i am looking for :
@Html.DevExpress().LoadingPanel(
    settings => {
        settings.Name = "LoadingPanel";
        settings.Modal = true;
        settings.ContainerElementID = IsDisplayedOverPanel ? "Panel" : "";
    }).GetHtml()
but where should i add ?On the place where i bind the grid or wherei have the call backpanel.
When iplaced this code, I am getting an
Error:
cannot convert lambda expression to type 'devexpress.web.mvc.LoadingpanelSettings'because it is not a delegate type

Hello Grizell,
As I see, you've got the Splitter control on your page. In this case, I suggest you wrap the Splitter's main content pane with the CallbackPanel and set its content depending on the Menu's clicked item name or index.
Then, you can use the approach I described before: handle the client-side BeginCallback and EndCallback events of your CallbackPanel and show/hide the LoadingPanel in these handlers.
Moreover, showing the LoadingPanel over the CallbackPanel where your menu is wrapped does not make sense, since the content controls, like GridView, are loaded in another Splitter Pane.
I've attached a sample project to demonstrate this approach.

Thanks for your help,In your example you used switch to show pages:
            string name = ViewBag.PageName;
            switch (name) {
                default:
                    ViewContext.Writer.Write("Panel Content");
                    break;
                case "Page1":
                    Html.RenderPartial("GridViewPartial");
                    break;
                case "Page2":
                    Html.RenderPartial("GridView2Partial");
                    break;
            }
Please see my code:
This is the header layout(Horizontal menu)where i call my vertical menu(Call backpanel is called here):
<script>
    var index;
    function onClick(s, e) {
        index = e.item.index;
        CallbackPanel1.PerformCallback();
    } function onBeginCallback(s, e) {
        e.customArgs["index"] = index;
        index = null;
    }
    //function OnSubMenuClick(s, e) {
    // //DXCOMMENT - SEND A CALLBACK TO SERVER TO REFRESH THE MAIN PANE CONTENT
    // CallbackPanel1.PerformCallback({ key1: e.item.name });}
</script>
<div class="headerTop">
    <div class="templateTitle">
        <table><tr><td> @Html.ActionLink("AIDER", "Index", "Home")</td><td>
            <img src="~/Content/Images/Aiderlogo.png" /></td></tr>
        </table>
    </div>
    <div class="loginControl">

</div>
</div>
<div class="headerMenu">
     @Html.DevExpress().Menu(settings => {
    settings.Name = "Menu";

settings.AllowSelectItem = true;
    settings.SelectParentItem = true;
    settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
    settings.Orientation = System.Web.UI.WebControls.Orientation.Horizontal;
    settings.ClientSideEvents.ItemClick = "onClick";
}).BindToXML(HttpContext.Current.Server.MapPath("~/App_Data/dsMain.xml"),"//mainmenu/*").GetHtml()
</div>
@Html.DevExpress().LoadingPanel(settings => {
    settings.Name = "lp";
    settings.Modal = true;
    settings.ContainerElementID = "CallbackPanel1";
}).GetHtml()
This my vertical menu (callback panel):
@Html.DevExpress().CallbackPanel(settings => {
    settings.Name = "CallbackPanel1";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "CallbackPanel1Partial" };
    settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
    settings.Height = System.Web.UI.WebControls.Unit.Percentage(100);
    settings.ClientSideEvents.BeginCallback = "onBeginCallback";
    //settings.ClientSideEvents.BeginCallback = "function(s,e){lp.Show();}";
  // settings.ClientSideEvents.EndCallback = "function(s,e){lp.Hide();}";

string siteMapSource = ViewBag.Index!= null ? string.Format("~/App_Data/ds{0}.xml", ViewBag.Index) : string.Format("~/App_Data/ds{0}.xml", 0);
    settings.SetContent(() => {
        Html.DevExpress().Menu(settingsMenu => {
            settingsMenu.Name = "SubMenu1";

settingsMenu.AllowSelectItem = true;
            settingsMenu.Orientation = System.Web.UI.WebControls.Orientation.Vertical;
            settingsMenu.ClientSideEvents.ItemClick = "OnSubMenuClick";
            settingsMenu.ItemDataBound = (s, e) => {
               if( !String.IsNullOrWhiteSpace(e.Item.NavigateUrl)){
                     e.Item.Name = e.Item.NavigateUrl;
                     e.Item.NavigateUrl = null;
               }
            };
        }).BindToXML(HttpContext.Current.Server.MapPath(siteMapSource), "//mainmenu/*").Render();
    });
}).GetHtml()
Can you please tell me where to add your code to get a loading panel