Question

我正在使用标签页来显示kendo网格上模板中的详细信息。我为网格做了初步的拉动，但是想为tabstrip使用单独的数据源。我只有一个标签，其中包含所有这些细节。有没有更好的方法来实现这一目标？我想在HTML表格中显示表格中的所有内容，但是在显示详细信息表格时想要从自己的数据源中提取它。

我在其他地方成功完成，但是在模板中使用网格。

以下是网格代码和模板代码：

@(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

关于进度指示器，我们使用我们在select事件上启动的Kendo Progress Indicator并停止加载事件：

@(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")
    )
)

然后这个脚本：

<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>

您可能会使用相同的概念推出自己的指标。

使用带数据源的tabstrip

1 个答案: