Using a tabstrip with datasource help

[Dan]

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 everythign in teh 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 thats 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 = "#: DarwinInvoiceNumber#" }) + "' >#: 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>

[Alex Hajigeorgieva]

Hello, Dan,

To bind the Kendo UI Tabstrip in an ASP.NET MVC application as part of the detail template, use the model binding approach as shown in the documentation at:

https://docs.telerik.com/aspnet-mvc/helpers/tabstrip/overview#model-binding

Should you face any difficulties, let me know what they are and I will get back to you with a suggestion for your specific scenario.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik