I have the following Grid that has a nested TabStrip for editing different aspects of a Person. The fields are interrelated across the Tabs so I need them to automatically reload when switching tabs, this is not the default behavior.

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

If the TabStrip were not nested in the grid I would use the following script for the Activate event.

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

I have tried to nest JavaScript into the Script template to no avail.

Any help would be appreciated!

I have the following Grid that has a nested TabStrip for editing different aspects of a Person. The fields are interrelated across the Tabs so I need them to automatically reload when switching tabs, this is not the default behavior.

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

If the TabStrip were not nested in the grid I would use the following script for the Activate event.

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

I have tried to nest JavaScript into the Script template to no avail.

Any help would be appreciated!

• javascript
• asp-mvc
• razor
• kendo-ui
• kendo-grid

2 Answers 2

You have stumbled upon a pretty tricky issue. You were probably pretty close. Redo your template to dynamically generate the needed JavaScript for the Event.

I am marking what I think are the trick two lines with 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>

The two back-slash characters are the trick. The first one so Kendo does not freak out trying to parse the dynamic jQuery reference and the second keeps you from closing the template before you are done.

Happy coding!

Hi this could be easily through the reload method of the TabStrip.

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