This is a migrated thread and some comments may be shown as answers.

Tabstrip Load on Demand

9 Answers 2398 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Atlas
Top achievements
Rank 1
Atlas asked on 03 Jan 2014, 07:08 PM

I am building a TabStrip where the content of the tabs is rendered from partial views. Each tab has a grid with its own datasource. I assumed that the content for each tab would not be loaded until the tab is clicked for the first time, but what I am experiencing is that all the data for all the tabs is being hit when the TabStrip is initially loaded. Am I missing something?

TabStrip declaration:

@(Html.Kendo().TabStrip()
          .Name("AssetDetails")
          .Items(tabstrip =>
          {
              tabstrip.Add().Text("Asset Review")
                  .Selected(true)
                  .Content(@Html.Partial("_AssetReview", Model).ToHtmlString());
              tabstrip.Add().Text("Closing")
                  .Content(@Html.Partial("_Closing").ToHtmlString());
              tabstrip.Add().Text("Occupancy")
                  .Content(@Html.Partial("_Occupancy").ToHtmlString());
              tabstrip.Add().Text("Eviction")
                  .Content(@Html.Partial("_Eviction").ToHtmlString());
              tabstrip.Add().Text("Property Management")
                  .Content(@Html.Partial("_PropertyManagement").ToHtmlString());
              tabstrip.Add().Text("Purchase Order")
                  .Content(@Html.Partial("_PurchaseOrder").ToHtmlString());
              tabstrip.Add().Text("Marketing")
                  .Content(@Html.Partial("_Marketing").ToHtmlString());
              tabstrip.Add().Text("Field Inspection")
                  .Content(@Html.Partial("_FieldInspection").ToHtmlString());
              tabstrip.Add().Text("Property Inspection")
                  .Content(@Html.Partial("_PropertyInspection").ToHtmlString());
          })
)

Closing partial view:

@(Html.Kendo().Grid<Atlas.Core.Objects.PortalAssetClosing>()
                                .Name("gridClosing")
                                .Columns(columns =>
                                {
                                    columns.Bound(p => p.ClosingStatusName);
                                    columns.Bound(p => p.BuyerName);
                                    columns.Bound(p => p.ContactName);
                                    columns.Bound(p => p.LenderContactName);
                                    columns.Bound(p => p.AcceptanceDate).Title("Acceptance Date").Width(100).Format("{0:MM/dd/yyyy}");
                                    columns.Bound(p => p.ActualCloseDate).Title("Close Date").Width(100).Format("{0:MM/dd/yyyy}");
                                    columns.Bound(p => p.CancelledDate).Title("Canceled Date").Width(100).Format("{0:MM/dd/yyyy}");
                                    columns.Bound(p => p.EstimatedCloseDate).Title("Estimated Close Date").Width(100).Format("{0:MM/dd/yyyy}");
                                })
                                .Sortable()
                                .Pageable(x => x.PageSizes(new[] { 25, 50, 100 }))
                                .Scrollable()
                                .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .PageSize(5)
                                    .Read(read => read.Action("GetData_Read", "AssetClosing").Data("additionalData"))
                                )
)

When the tabstrip is rendered for the first time, the selected tab is the Asset Review tab, but the datasource for the Closing tab is also being hit.
I don't want the closing tab grid to hit the database until the tab is selected for the first time.
How do I set up the TabStrip to be LoadOnDemand?





9 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 06 Jan 2014, 03:42 PM
Hello,

You can achieve this behavior by using the LoadContentFrom method, as shown in the TabStrip Ajax demo.

Regards,
Alexander Popov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Atlas
Top achievements
Rank 1
answered on 06 Jan 2014, 10:05 PM
In the code sample I included in the initial post, I showed that I am currently using partial views, and in one case, I am using a partial view and passing in the model.
I don't see any way to do that with LoadContentFrom.
Am I missing something?

Does LoadContentFrom support partial views or dynamic content?
I have tried to do the following:
@(Html.Kendo().TabStrip()
          .Name("AssetDetails")
          .Items(tabstrip =>
          {
              tabstrip.Add().Text("Asset Review")
                  .Selected(true)
                  .Content(@Html.Partial("_AssetReview", Model).ToHtmlString());
              tabstrip.Add().Text("Closing")
                  .LoadContentFrom("_Grid","AssetClosing");
              tabstrip.Add().Text("Occupancy")
                  .LoadContentFrom("_Grid", "AssetUnit");
              tabstrip.Add().Text("Eviction")
                  .LoadContentFrom("_Grid", "AssetEviction");
              tabstrip.Add().Text("Property Management")
                  .LoadContentFrom("_Grid", "AssetPropertyManagement");
              tabstrip.Add().Text("Purchase Order")
                  .LoadContentFrom("_Grid", "AssetPurchaseOrder");
              tabstrip.Add().Text("Marketing")
                  .Content(@Html.Partial("_Marketing").ToHtmlString());
              tabstrip.Add().Text("Field Inspection")
                  .LoadContentFrom("_Grid", "AssetFieldInspection");
              tabstrip.Add().Text("Property Inspection")
                  .LoadContentFrom("_Grid", "AssetPropertyInspection");
          })
)
Now the tabs load when selected for the first time, but I am receiving the following error:

Unhandled exception at line 11223, column 20 in eval code0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'kendoGrid'

Each of the _Grid views contains a grid only. No layout. I was assuming it would inherit from the page it was being rendered in, but it's not working.





0
Alexander Popov
Telerik team
answered on 07 Jan 2014, 12:27 PM
Hello again,

I already answered to this query in a duplicated support ticket you opened. Please keep in mind that it is highly recommended that you keep related questions in one support thread or a forum post, so that we can easily keep track of your support history and provide better answers in shorter time.

Regards,
Alexander Popov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Luis
Top achievements
Rank 1
answered on 21 Jan 2014, 12:01 AM
Hello Alexander,

I am having a similar problem but I can't find the answer you gave to Atlas. Can you share it or share the link to the support ticket you mentioned?

Thank you

Luis
0
Alexander Popov
Telerik team
answered on 21 Jan 2014, 09:25 AM
Hi Luis,

The behavior described below could be caused by a controller returning a View instead of PartialView. Here is a small example:   
// The TabStrip view:
@(Html.Kendo().TabStrip()
  .Name("tabstrip")
  .Items(tabstrip =>
  {
      tabstrip.Add().Text("Tab 1")
          .LoadContentFrom("Index", "Tab1");
      tabstrip.Add().Text("Tab 2")
          .LoadContentFrom("Index", "Tab2");
  })
)
 
//Tab1 Controller
public class Tab1Controller : Controller
{
    public ActionResult Index()
    {
        //return View();
        return PartialView();
    }
}
 
//Tab1 Index partial view
@(Html.Kendo().Grid<SomeModel>()
    .Name("grid")
    .Columns(columns =>
        {
            columns.Bound(p => p.Id);
            columns.Bound(p => p.Name);
        }) 
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Read", "Tab1"))
    )
)



Regards,
Alexander Popov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Luis
Top achievements
Rank 1
answered on 21 Jan 2014, 05:42 PM
Hello, is this forum alive?
0
Alexander Popov
Telerik team
answered on 22 Jan 2014, 09:36 AM
Hi Luis,

The behavior described below could be caused by a controller returning a View instead of PartialView. Here is a small example:  
// The TabStrip view:
@(Html.Kendo().TabStrip()
  .Name("tabstrip")
  .Items(tabstrip =>
  {
      tabstrip.Add().Text("Tab 1")
          .LoadContentFrom("Index", "Tab1");
      tabstrip.Add().Text("Tab 2")
          .LoadContentFrom("Index", "Tab2");
  })
)
  
//Tab1 Controller
public class Tab1Controller : Controller
{
    public ActionResult Index()
    {
        //return View();
        return PartialView();
    }
}
  
//Tab1 Index partial view
@(Html.Kendo().Grid<SomeModel>()
    .Name("grid")
    .Columns(columns =>
        {
            columns.Bound(p => p.Id);
            columns.Bound(p => p.Name);
        })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Read", "Tab1"))
    )
)

In case the above example does not help I would suggest you to open a new support ticket where more information on your scenario is included.

Regards,
Alexander Popov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Vladimir
Top achievements
Rank 1
answered on 22 Jan 2014, 10:42 AM
Hi Luis,

I apologize for getting back to you so late. The behavior described below could be caused by a controller returning a View instead of PartialView. Here is a small example:  
// The TabStrip view:
@(Html.Kendo().TabStrip()
  .Name("tabstrip")
  .Items(tabstrip =>
  {
      tabstrip.Add().Text("Tab 1")
          .LoadContentFrom("Index", "Tab1");
      tabstrip.Add().Text("Tab 2")
          .LoadContentFrom("Index", "Tab2");
  })
)
   
//Tab1 Controller
public class Tab1Controller : Controller
{
    public ActionResult Index()
    {
        //return View();
        return PartialView();
    }
}
   
//Tab1 Index partial view
@(Html.Kendo().Grid<SomeModel>()
    .Name("grid")
    .Columns(columns =>
        {
            columns.Bound(p => p.Id);
            columns.Bound(p => p.Name);
        })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Read", "Tab1"))
    )
)
 

In case the above example does not help I would suggest you to open a new support ticket where more information on your scenario is included.
0
Luis
Top achievements
Rank 1
answered on 22 Jan 2014, 04:00 PM
Hello Vladimir, thanks for your reply

I am sure the controller is returning a partial view like in your example, the thing is, the two partial views that are loaded in the tabs seem to be losing the styles and scripts from the main layout because I am getting javascript errors, and some of the things in the grid does not work.

I was assuming they would inherit the scripts and layout from the main page but something is not working.

I am going to make a small example and open a ticket on this.

Thanks again for your answer

Tags
TabStrip
Asked by
Atlas
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Atlas
Top achievements
Rank 1
Luis
Top achievements
Rank 1
Vladimir
Top achievements
Rank 1
Share this question
or