如何在嵌套Kendo Grid时重新加载Kendo TabStrip标签

Question

我有以下带有嵌套TabStrip的Grid，用于编辑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。

我正在标志着我所认为的与>>>有关的两条线。

<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)); 
     });