Using a tabstrip with datasource help

2 posts, 0 answers
  1. Dan
    Dan avatar
    10 posts
    Member since:
    Jun 2015

    Posted 16 Jan Link to this post

    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>
  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    395 posts

    Posted 18 Jan Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top