Question

我有以下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没有嵌套在网格中，我会使用以下脚本进行Activate事件。

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

我试图将JavaScript嵌入到脚本模板中无济于事。

任何帮助将不胜感激！

Answer 1

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

我正在使用＆gt;＆gt;＆gt;标记我认为是两行的技巧。

<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引用，第二个让你在完成之前不会关闭模板。

快乐的编码！

Answer 2

嗨，这可以很容易地通过TabStrip的重载方法。

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

嵌套在Kendo网格中时如何重新加载Kendo TabStrip选项卡

2 个答案: