Tabstrip Load on Demand

[Atlas]

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?

[Alexander Popov]

Hello,

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

Regards,
Alexander Popov
Telerik

[Atlas]

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.

[Alexander Popov]

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

[Luis]

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

[Alexander Popov]

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

[Luis]

Hello, is this forum alive?

[Alexander Popov]

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

[Vladimir]

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.

[Luis]

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