Using a tabstrip with datasource

Question

I am pulling in a tabstrip to show details within a template on the kendo grid. I do my initial pull for the grid, but would like to use a separate datasource for the tabstrip. I only have one tab that holds all these detail. Is there a better way of achieving this? I do want to show everything in the table like the HTML shows, but want to pull it from its own datasource when the detail table is displayed.

I do it elsewhere successfully but that's with using a grid within the template.

Below is the grid code and the template code :

@(Html.Kendo().Grid<InvoiceVM>()
              .Name("grid")
              .Columns(columns =>
              {
                  columns.Bound(i => i.DarwinInvoiceNumber).Title("Invoice").ClientTemplate("<a href='" + Url.Action("Current", "PayrollInvoices", new { i = "#: InvoiceNumber#" }) + "' >#: DarwinInvoiceNumber#</a>").Width(100);
                  columns.Bound(i => i.DivisionID);
                  //columns.Bound(i => i.Date).Format("{0:MM/dd/yyyy}");
                  //columns.Bound(i => i.CheckDate).Format("{0:MM/dd/yyyy}");
                  columns.Bound(i => i.DateDisplay).Title("Date"); //09/26/2017 DS TFS # 2798
                  columns.Bound(i => i.CheckDateDisplay).Title("Check Date"); //09/26/2017 DS TFS # 2798
                  columns.Bound(i => i.Total).Format("{0:C}");
                  columns.Bound(i => i.Employees);
                  columns.Bound(i => i.Employees).Title("Checks").Width(100);
                  columns.Bound(i => i.TotalGross).Title("Gross Wages").Format("{0:C}");
              })
              .Sortable()
            //.Selectable()
              .Scrollable()
              .ToolBar(tools => tools.Excel())
              .Excel(excel => excel
                  .FileName("PayInvoices.xlsx")
                  .Filterable(true)
              )
              .Groupable()
              .ColumnMenu()
              .Pageable()
              .Filterable()
              .ClientDetailTemplateId("template")
              .HtmlAttributes(new { style = "height:600px;" })
              .Reorderable(reorder => reorder.Columns(true))
              .Resizable(resize => resize.Columns(true))
              .DataSource(dataSource => dataSource
                  .Ajax()
                  .PageSize(15)
                  .Read(read => read.Action("Get_InvoicesRead", "PayrollInvoices"))

              )
              .Excel(excel => excel
                  .FileName("InvoiceList.xlsx")
                  .Filterable(true)
                  .AllPages(true)
    //.ProxyURL(Url.Action("Excel_Export_Summaries_Save", "Reports"))
              )
              .Events(events => events.DataBound("dataBound"))
        )

<script id="template" type="text/kendo-tmpl">
            @(Html.Kendo().TabStrip()
                            .Name("tabStrip_#=DarwinInvoiceNumber#")
           .SelectedIndex(0)
            .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
            .Items(items =>
            {
                items.Add().Text("Details").Content(
                    "<div class='invoice_details sub-table-background'>" +
                   "<table class='table table-bordered'><tr><td><label>Pay Period Begin:</label></td><td>#=kendo.toString(StartDate,'MM/dd/yyyy')#</td><td><label>FICA Med</label></td><td>#= kendo.toString(TotalFicaM,'c') #</td><td><label>Total Benefits</label></td><td>#= kendo.toString(TotalBenefits,'c') #</td></tr>" +
                   "<tr><td><label>Pay Period End:</label></td><td>#= kendo.toString(EndDate,'MM/dd/yyyy') #</td><td><label>FICA SS</label></td><td>#= kendo.toString(TotalFicaSS,'c') #</td><td><label>Credits</label></td><td>#= kendo.toString(TotalCredits,'c') #</td></tr>" +
                   "<tr><td><label>Net Wages:</label></td><td>#= kendo.toString(NetWagesPayRun,'c')#</td><td><label>FUTA</label></td><td>#= kendo.toString(TotalFUTA,'c') #</td><td><label>Fees </label></td><td>#= kendo.toString(TotalFees,'c') #</td></tr>" +
                   "<tr><td><label>Sales Tax:</label></td><td>#= kendo.toString(Tax,'c')#</td><td><label>SUTA</label></td><td>#= kendo.toString(TotalSUTA,'c') #</td><td><label>Amount Due</label></td><td>#= kendo.toString(AmountRemaining,'c') #</td></tr>" +
                   "<tr><td><label>Non Gross:</label></td><td>#= kendo.toString(TotalNonGross,'c') #</td><td><label>Worker's Comp</label></td><td>#= kendo.toString(TotalWC,'c') #</td><td></td><td></td></tr>" +
                        "</table></div>"
                     );
            })
             .ToClientTemplate()
            )
        </script>

Answer 1

Regarding the progress indicator, we use the Kendo Progress Indicator which we start on the select event and stop on the load event:

@(Html.Kendo().TabStrip().Name("myTabStrip")
    .Items(tabs =>
    {
        tabs.Add().Text("T1").LoadContentFrom("Tab1", "Controller", new { Id = Model.Id });
        tabs.Add().Text("T2").LoadContentFrom("Tab2", "Controller", new { Id = Model.Id });
        tabs.Add().Text("T3").LoadContentFrom("Tab3", "Controller", new { Id = Model.Id });
    })
    .Events(e => e
        .ContentLoad("onContentLoad")
        .Select("onTabSelect")
    )
)

Then this script:

<script type="text/javascript">

    function onTabSelect() {
        window.setTimeout(function() {
            // Find the tabstrip and attach a progressbar
            kendo.ui.progress($('div.k-tabstrip-wrapper'), true);
        });
    }

    function onContentLoad() {
        // Hide progress bar
        window.setTimeout(function() {
            kendo.ui.progress($('div.k-tabstrip-wrapper'), false);
        });
    }

</script>

You could probably roll your own indicator with same concept.