[Solved] Dynamically load tabstrip content

[Jack Ma]

Hi
   I have this scenario, I'm creating a page with MVC tabstrip control binding with model, which the model just provide the tab navigationdata, and also I create a partial view with telerik MVC grid control to show the content for each tab, the content is depend on which tab is selected, and inside the navigationdata model, I provide controllername, actionname, routevalues which used for tab item generating, inside routevalues, there's an Id value which used to retrieve data as the parameter, everthing works well, but onething I'm not sure is the partial view suppose to show inside tabitem but instead it showed in a grand new page, anybody can help to figure out where is wrong? Very appreciated!
Here is the aspx file

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<OrganizationUsersViewModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

    <h2><%=iNuggets.Resources.Globalization.MyOrganizationUsers%></h2>
<%
     Html.Telerik().TabStrip()
           .Name("TabStrip")
           .BindTo(Model.OrganizationNavigationData,
                   (item, OrganizationNavigationData) =>
                   {
                       item.Text = OrganizationNavigationData.Text;
                       //item.ImageUrl = OrganizationNavigationData.ImageUrl;
                       //item.Url = OrganizationNavigationData.NavigateUrl;
                       item.ActionName = OrganizationNavigationData.ActionName;
                       item.ControllerName = OrganizationNavigationData.ControllerName;
                       item.RouteValues = OrganizationNavigationData.routeValues;
                   })
           .Render();

%>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>

Here is the partial view ascx file

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<OrganizationUsersPartialViewModel>" %>
<%
    if (Model.OrganizationUsers != null)
    {

        Html.Telerik().Grid(Model.OrganizationUsers)
        .Name("OrganizationUsers")

        .DataKeys(keys => keys.Add(c => c.ID))
        .Columns(columns =>
        {
            columns.Bound(c => c.UserName).Width(130);
            columns.Bound(c => c.Email).Width(130);

        })
        .Pageable()
        .Sortable()
        .Render();
    }

 %>

And here is the controller actions, one is to pass the navigationdata to tabstrip, one is to pass the tabcontent data

        public ActionResult MyOrganizationUsers()
        {
            Guid userId = (Guid)System.Web.HttpContext.Current.Session["session_UserId"];
            OrganizationUsersViewModel model = new OrganizationUsersViewModel
            {
                OrganizationNavigationData = OrganizationNavigationDataBuilder.BuildOrganizationNavigationData(OrganizationUsersRepository.GetOrganizationsAdmined(userId, 1, 10))
            };
            return View(model);
        }

        public ActionResult MyOrganizationUsersPartial(string OrganizationId)
        {
            Guid myOrganizationId = new Guid(OrganizationId);
            OrganizationUsersPartialViewModel model = new OrganizationUsersPartialViewModel
            {
                OrganizationUsers = OrganizationUsersRepository.All(myOrganizationId,1,10)
            };
            return PartialView(model);
        }

[Jack Ma]

Ok, i've solved this issue. Thanks guys!

[sidius]

Hi..
How did you resolve the problem?

Thanks,

[Uma]

Hi Jack,
Even i'm not able to show partial view inside the tab. How did you resolved it? Thanks in advance.

[MarkV]

I, too, am experiencing this issue. What I'm trying to do is to populate a series of tabs from a grid OnRowSelected() call. The first tab always populates correctly. The subsequent tabs do so only if they are initialized by clicking on them before OnRowSelected() fires. If OnRowSelected() fires before the tabs are clicked on, clicking on any tab except the first one causes the tab to render on the entire screen, without styles. This is completely repeatable, and I've been able to duplicate it in a project with a two row grid and two tabs. I can provide the project if desired.

[Uma]

Hi Mark,
Thanks for your reply. It would be great if you provide some related code..

[MarkV]

I was able to solve this problem yesterday. What worked is the following:

1. if the user clicks on the grid, the OnRowSelected() handler deposits the field values in question into a pair of hidden fields.
2. OnRowSelected() then identifies the active tab, and refreshes it via an Ajax POST call.
3. If the user clicks on a tab, the OnSelect() handler retrieves the current grid values that were set in step 1, and then refreshes the current tab with an Ajax POST call.

Here's my complete Index.aspx. This (along with the rest of the code) produces a two row grid, where each row consists of a GridItem that contains a Component1 and Component2. The tabs merely display the name of the two components for the selected row, with the first tab handling Component1's name and the 2nd handling Component2. Hope this helps someone.

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<GridTabProblem.Models.GridItem>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Grid Tab Problem
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
    <script type="text/javascript">

        function onRowSelected(e) {
            //
            // Get the component names from the selected row on the grid, and
            // refresh the active tab.
            //
            var component1Name = e.row.cells[2].innerHTML;
            $("#component1Value").val(component1Name);

            var component2Name = e.row.cells[4].innerHTML;
            $("#component2Value").val(component2Name);

            var tabName = $('li.t-state-active').find('> .t-link').text();
            alert("Refreshing active tab " + tabName + " from grid." );
            refreshActiveTab(tabName);

        }

        function onSelect(e) {
            var item = $(e.item);
            var component = "";
            var tabName = item.find('> .t-link').text();
            refreshActiveTab(tabName);
        }

        function refreshActiveTab(tabName) {
            //
            // Identify the tab, and then update it.
            //
            if (tabName == 'Tab1') {
                component = $("#component1Value").val();
                alert("Tab1 detected. Calling DisplayTab1Details with component " + component);
                DisplayTab1Details(component);
            }
            else if (tabName == 'Tab2') {
                component = $("#component2Value").val();
                alert("Tab2 detected. Calling DisplayTab2Details with component " + component);
                DisplayTab2Details(component);
            }
        }
        function DisplayTab1Details(component1Name) {
            // get the component1 details tab strip
            var tabStrip = $("#TabStrip").data("tTabStrip");

            // get the content url for the first tab strip item
            var firstTabContentUrl = $(tabStrip.element).find(".t-link").data("ContentUrl");
            if (firstTabContentUrl) {
                //do nothing

            } else {
                firstTabContentUrl = "/Home/Component1Details";
            }
            //alert("DisplayTab1Details(): Url for ajax post is: " + firstTabContentUrl);

            // send an ajax request to get the data and post it to the first tab strip item
            $.ajax(
            {
                type: "POST",
                url: firstTabContentUrl,
                data: { Name: component1Name },
                success: function (data) {
                    //reload the details content tab
                    $("#TabStrip-1").html(data);
                }
            });
        }

        function DisplayTab2Details(component2Name) {
            var secondTabContentUrl = "";
            // get the component1 details tab strip
            var tabStrip = $("#TabStrip").data("tTabStrip");

            // get the content url for the 2nd tab strip item
            secondTabContentUrl = $(tabStrip.element).parent().find(".t-link:eq(1)").data("ContentUrl");
            if (secondTabContentUrl) {
                //do nothing
            } else {
                secondTabContentUrl = "/Home/Component2Details";
            }
            //alert("DisplayTab2Details(): Component2Name is: " + component2Name + ". Url for ajax post is: " + secondTabContentUrl);
            // send an ajax request to get the data and post it to the 2nd tab strip item
            $.ajax(
            {
                type: "POST",
                url: secondTabContentUrl,
                data: { Name: component2Name },
                success: function (data) {
                    //reload the details content tab
                    $("#TabStrip-2").html(data);
                }
            });
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <br />
    <div ="GridTabProblem">
        <%: Html.Telerik().Grid<GridTabProblem.Models.GridItem>("gridItems")
        .Name("Grid")
        .DataKeys(dataKeys => dataKeys.Add(o => o.id))
        .Columns(columns =>
        {
            columns.Bound(c => c.id);
            columns.Bound(c => c.Name).Title("Item Name");
            columns.Bound(c => c.Component1Item.Name).Title("Component1 Name");
            columns.Bound(c => c.Component1Item.id).Title("Component1 ID");
            columns.Bound(c => c.Component2Item.Name).Title("Component2 Name");
            columns.Bound(c => c.Component2Item.id).Title("Component2 ID");
        })
        .Pageable()
        .Selectable()
        .ClientEvents(events => events.OnRowSelected("onRowSelected"))
        %>
        <input type="hidden" id="component1Value" value="" />
        <input type="hidden" id="component2Value" value="" />
    </div>
    <br/>
    <div id="componentDetail">
        <% Html.Telerik().TabStrip()
                    .Name("TabStrip")
                    .Items(tabstrip =>
                    {
                        tabstrip.Add().Text("Tab1")
                            .LoadContentFrom("Component1Details", "Home");
                        tabstrip.Add().Text("Tab2")
                            .LoadContentFrom("Component2Details", "Home");
                    })
                    .SelectedIndex(0)
                    .ClientEvents( events =>
                    {
                        events.OnSelect("onSelect");
                    })
                    .Render();
        %>
    </div>
</asp:Content>

[Ken]

Hi Jack Ma,

How did you solve it?

Thanks in an advance.
Ken