This is a migrated thread and some comments may be shown as answers.
Dynamically load tabstrip content
7 Answers 341 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Jack Ma
Top achievements
Rank 1
Jack Ma asked on 11 May 2010, 03:48 AM
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);  
        }  
 


7 Answers, 1 is accepted

Sort by
0
Jack Ma
Top achievements
Rank 1
answered on 11 May 2010, 04:47 AM
Ok, i've solved this issue. Thanks guys!
0
sidius
Top achievements
Rank 1
answered on 21 Jun 2010, 12:13 PM
Hi..
How did you resolve the problem?

Thanks,
0
Uma
Top achievements
Rank 1
answered on 02 Sep 2010, 05:45 PM
Hi Jack,
Even i'm not able to show partial view inside the tab. How did you resolved it? Thanks in advance.
0
MarkV
Top achievements
Rank 1
answered on 08 Sep 2010, 02:38 PM
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.

0
Uma
Top achievements
Rank 1
answered on 09 Sep 2010, 04:24 PM
Hi Mark,
Thanks for your reply. It would be great if you provide some related code..
0
MarkV
Top achievements
Rank 1
answered on 09 Sep 2010, 05:12 PM
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>
0
Ken
Top achievements
Rank 1
answered on 18 Feb 2011, 02:18 PM
Hi Jack Ma,

How did you solve it?

Thanks in an advance.
Ken
Tags
TabStrip
Asked by
Jack Ma
Top achievements
Rank 1
Answers by
Jack Ma
Top achievements
Rank 1
sidius
Top achievements
Rank 1
Uma
Top achievements
Rank 1
MarkV
Top achievements
Rank 1
Ken
Top achievements
Rank 1
Share this question
or