Wie kann ich ein Reload der Kendo Register-Tabs, wenn Sie Geschachtelt in einer Kendo-Raster

Habe ich das folgende Raster hat eine verschachtelte Registerkarte zur Bearbeitung verschiedener Aspekte einer Person. Die Felder sind miteinander verknüpft über die Tabs, so muss ich Sie zum automatischen laden beim Wechsel der tabs, das ist nicht das Standardverhalten.

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

Falls die Registerkarte nicht genestet in das raster würde ich das folgende Skript verwenden, für das Activate-Ereignis.

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

Habe ich versucht zu verschachteln, JavaScript-Code in den Skript-Vorlage ohne Erfolg.

Jede mögliche Hilfe würde geschätzt!

InformationsquelleAutor rburnias | 2013-03-20
  1. 2

    Haben Sie stolperte über ein ziemlich heikles Thema. Sie waren wahrscheinlich ziemlich nahe. Wiederholen Sie Ihre Vorlage, um dynamisch zu generieren, die benötigt JavaScript für die Veranstaltung.

    Bin ich markieren, was ich denke, der trick mit zwei Linien mit a >>>.

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

    Den zwei back-slash-Zeichen sind der trick. Die erste so, Kendo nicht ausflippen versuchen, um eine Analyse der dynamischen jQuery-Referenz und die zweite hält Sie davon ab, schließen Sie die Vorlage, bevor Sie fertig sind.

    Happy coding!

    InformationsquelleAutor Trey Gramann
  2. 2

    Hallo dies könnte leicht durch die reload-Methode des TabStrip.

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