1

Person のさまざまな側面を編集するためのネストされた TabStrip を持つ次の Grid があります。フィールドはタブ間で相互に関連しているため、タブを切り替えるときに自動的にリロードする必要があります。これはデフォルトの動作ではありません。

@(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 をスクリプト テンプレートにネストしようとしましたが、うまくいきませんでした。

どんな助けでも大歓迎です！

4

2 に答える 2

2

あなたはかなりトリッキーな問題に遭遇しました。あなたはおそらくかなり近かったでしょう。テンプレートをやり直して、イベントに必要なJavaScriptを動的に生成します。

>>>で2行のトリックだと思うものをマークしています。

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

2つのバックスラッシュ文字がトリックです。1つ目は、Kendoが動的jQuery参照を解析しようとしてびっくりしないようにするためのもので、2つ目は、完了する前にテンプレートを閉じないようにするためのものです。

ハッピーコーディング！

于 2013-03-20T00:16:16.857 に答える