嵌套在剑道网格中时如何重新加载剑道 TabStrip 选项卡答案

【问题标题】：How do I Reload the Kendo TabStrip Tabs when Nested in a Kendo Grid嵌套在剑道网格中时如何重新加载剑道 TabStrip 选项卡
【发布时间】：2013-03-20 00:07:18
【问题描述】：

我有以下 Grid，它有一个嵌套的 TabStrip，用于编辑 Person 的不同方面。这些字段在选项卡中是相互关联的，因此我需要它们在切换选项卡时自动重新加载，这不是默认行为。

@(Html.Kendo().Grid<PersonModel>()
         .Name("PersonGrid")
         .ClientDetailTemplateId("PersonTemplate")
Blah…
Blah…
Blah…
)
<script id="PersonTemplate" type="text/x-kendo-template">
         @(Html.Kendo().TabStrip()
            .Name("TabStrip_#=Id#")
            .Items(items => {
                     items.Add().Text("Contact Information").LoadContentFrom("PersonInfo", "People", new {personId = "#=Id#"}).Selected(true);
                     items.Add().Text("Incident History").LoadContentFrom("PersonIncidents", "People", new {personId = "#=Id#"});
                     items.Add().Text("Edit Qualifications").LoadContentFrom("PersonQualifications", "People", new {personId = "#=Id#"});
            })
            .Events(e => e.Activate("reloadTab"))
            .ToClientTemplate()
         )
</script>

如果 TabStrip 没有嵌套在网格中，我将使用以下脚本进行激活事件。

<script type="text/javascript">
    function reloadTab(e) {
        $('#TabStrip').data('kendoTabStrip').reload(e.item);
    }
</script>

我曾尝试将 JavaScript 嵌套到 Script 模板中，但无济于事。

任何帮助将不胜感激！

【问题讨论】：

标签： javascript asp.net-mvc razor kendo-ui kendo-grid

【解决方案1】：

您偶然发现了一个非常棘手的问题。你可能非常接近。重做模板以动态生成事件所需的 JavaScript。

我正在用 >>> 标记我认为是技巧的两行。

<script id="PersonTemplate" type="text/x-kendo-template">
    <script type="text/javascript">
        function reloadTab_#=Id#(e) {
>>>         $('\#TabStrip_#=Id#').data('kendoTabStrip').reload(e.item);
        }
>>> <\/script>
    @(Html.Kendo().TabStrip()
       .Name("TabStrip_#=Id#")
       .Items(items => {
           items.Add().Text("Contact Information").LoadContentFrom("PersonInfo", "People", new {personId = "#=Id#"}).Selected(true);
           items.Add().Text("Incident History").LoadContentFrom("PersonIncidents", "People", new {personId = "#=Id#"});
           items.Add().Text("Edit Qualifications").LoadContentFrom("PersonQualifications", "People", new {personId = "#=Id#"});
       })
       .Events(e => e.Activate("reloadTab_#=Id#"))
       .ToClientTemplate()
    )
</script>

两个反斜杠字符是诀窍。第一个是为了让 Kendo 不会因为尝试解析动态 jQuery 引用而发疯，第二个是让您在完成之前无法关闭模板。

编码愉快！

【讨论】：

【解决方案2】：

您好，这可以通过 TabStrip 的 reload 方法轻松实现。

       var ps = $(tabstrip).data().kendoTabStrip;
       ps.tabGroup.on('click','li',function(e){        
       ps.reload($(this));
      });

【讨论】：