Dynamically Loading DevExpress PageControl Tabs

Question

Below is a simplified example of my view code. I would like to have DevExpress tabs such that each tab shares the content of a single div. The idea here is that I have a lot of HTML that will be displaying in these tabs and I don't want to bog down the browser with all of it at once. I would like to make it so when you select a tab the HTML in the shared div is deleted and then a new partial view is loaded through AJAX to repopulate the div and display on the screen. This way only a single tab would load on page load and when switching between tabs the HTML of the previous tab would be dropped to increase browser performance. Does anyone know how I might accomplish this? Thanks!

<%
Html.DevExpress().PageControl(settings =>
{
    settings.Name = "pcGeneralTabs";
    settings.Styles.Tab.Paddings.Padding = Unit.Pixel(5);
    settings.Styles.ActiveTab.BackColor = Color.White;
    settings.Styles.Tab.Height = Unit.Pixel(35);
    settings.Width = Unit.Percentage(100);
    settings.Height = Unit.Percentage(100);

    settings.ClientSideEvents.ActiveTabChanged = @"
        function(s, e) {
            var tab = s.GetActiveTab().name;

            //Implement loading of Tab content through AJAX
        }";

    settings.TabPages.Add(tab =>
    {
        tab.Name = "tbFirst";
        tab.Text = "Summary Information";
    });

    settings.TabPages.Add(tab =>
    {
        tab.Name = "tbSecond";
        tab.Text = "Financial Analysis";

    });
}).Render();
%>

Tapendra Singh Ranawat Tapendra Singh Ranawat · Accepted Answer · 2017-06-01T10:25:52

You can do it by changing following settings and methods:

Change Name and text properties for other tabs.

settings.TabPages.Add(tabpage =>
{
    tabpage.Name = "TabPage1";
    tabpage.Text = "Page 1";
    tabpage.SetContent(() =>
    {
        ViewContext.Writer.Write(String.Format("<div id='{0}' >", tabpage.Name));
        Html.RenderAction(tabpage.Name);
        ViewContext.Writer.Write("</div>");
    });
});

and ClientSideEvent:

 function OnActiveTabChanging(s, e) {
    var action = e.tab.name;
    var actionUrl = window.location + "/Home/" + action;
    $.ajax({
        type: "POST",
        url: actionUrl,
        success: function (response) {
            $("#" + action).html(response);
        }
    });
}

Add Method in your controller:

public ActionResult TabPage1()
{               
   return PartialView("PartialView1");
}

Dynamically Loading DevExpress PageControl Tabs

2 Answers