Tabstrip Load on Demand

10 posts, 0 answers
  1. Atlas
    Atlas avatar
    97 posts
    Member since:
    Jun 2009

    Posted 03 Jan 2014 Link to this post

    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?





  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 06 Jan 2014 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Atlas
    Atlas avatar
    97 posts
    Member since:
    Jun 2009

    Posted 06 Jan 2014 Link to this post

    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.





  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 07 Jan 2014 Link to this post

    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!
  6. Luis
    Luis avatar
    3 posts
    Member since:
    Jul 2013

    Posted 20 Jan 2014 Link to this post

    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
  7. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 21 Jan 2014 Link to this post

    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!
  8. Luis
    Luis avatar
    3 posts
    Member since:
    Jul 2013

    Posted 21 Jan 2014 Link to this post

    Hello, is this forum alive?
  9. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 22 Jan 2014 Link to this post

    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!
  10. Vladimir
    Vladimir avatar
    2 posts
    Member since:
    Mar 2012

    Posted 22 Jan 2014 Link to this post

    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.
  11. Luis
    Luis avatar
    3 posts
    Member since:
    Jul 2013

    Posted 22 Jan 2014 Link to this post

    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

Back to Top
Kendo UI is VS 2017 Ready