This is a migrated thread and some comments may be shown as answers.

Action filled Tabs can't find scripts from partial views

5 Answers 264 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Eric
Top achievements
Rank 2
Eric asked on 29 May 2014, 08:55 PM
I have a TabStrip in the Index view for a controller:

@{
    ViewBag.Title = "My Index";
}
 
<div id="portal" class="k-content">
    <div class="wrapper">
        @(Html.Kendo().TabStrip()
            .Name("tabstrip")
            .Items(tabstrip =>
            {
                tabstrip.Add().Text("Information")
                    .Selected(true)
                    .LoadContentFrom("Information", "MyController");
 
                tabstrip.Add().Text("Schedule")
                    .LoadContentFrom("Calendar", "MyController");
 
                tabstrip.Add().Text("Plan")
                    .LoadContentFrom("Plan", "MyController");
 
                tabstrip.Add().Text("Pending")
                    .LoadContentFrom("Pending", "MyController");
 
            })
        )
    </div>
</div>
 
@section Scripts{
 
}



And the initial level of 'Action' result is a view from the controller:

For example, for the Plan action, the controller definition for that is:

public ActionResult Information()
 {
   //get model data....
   model = blaw blaw
  return View("Information", model);
}

I return a View because then I can define a Layout file to load required javascript files. Somehow the tab has NO knowledge of the scripts loaded via the containing razor view of the TabStrip!

My 'Information' view looks like a normal view with a specific minimal layout file to load scripts

However, even with this manner of getting scripts to load, only the data-load scripts run. For example, the event scripts to handle the selected Kendo ComboBox item do not fire.

The combo box is in a partial view loaded by the view (loaded in the tab): In the example below, the language combo box loads languages, but the Select event does not fire.

@(Html.Kendo().ComboBox()
           .Name("languagesDdf")
           .Placeholder("Select Language...")
           .DataTextField("LanguageValue")
           .DataValueField("LanguageId")
           .Suggest(true)
           .AutoBind(false)
           .HtmlAttributes(new { style = "width: 100%" })
           .DataSource(source =>
           {
               source.Read(read =>
               {
                   read.Action("GetLanguages", "Language");
               }).ServerFiltering(true);
           })
           .Events(e =>
           {
               e.Select("onSelectLanguage");
           })
 
 
           )


So why can't the tabs see scripts loaded by the parent razor view/layout files?

Do I need to do something different with the tabstrip definition?


5 Answers, 1 is accepted

Sort by
0
Accepted
Vladimir Iliev
Telerik team
answered on 02 Jun 2014, 02:26 PM
Hi Robert,

In current case you should return PartialView as the content is appended directly to the current DOM and loading more than once jQuery and KendoUI scripts will lead to unexpected behavior. 

e.g.:
public ActionResult Information()
 {
   //get model data....
   model = blaw blaw
  return PartialView("Information", model);
}


Regards,
Vladimir Iliev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Eric
Top achievements
Rank 2
answered on 12 Jun 2014, 11:32 PM
At the time, The Partial View had no access to any scripts loaded by the layout file that the partial view was loaded into.

I reworked the scripts and it seems fine now.

Oddly enough, If I load the exact same CSS and Script in the view via a bundles load instead, defined in App_Start\BundleConfig.cs, the kendo gadgetry fails to work... 
0
Rob
Top achievements
Rank 1
Veteran
Iron
answered on 10 Apr 2015, 01:09 AM

I have the exact same issue.

 Inside my Tabs (which are loaded from Views) I have a Telerik Grid , with a custom Command I am trying to link to a Javascript function. 'OnManage'

columns.Command(Function(c) c.Custom("ManageMedia").Click("OnManage"))

This fails as the Grid does not see the javascript function and it stops the grid from even loading.

 @Robert.. How did you 'rework the scripts' to allow the Telerik components inside the Tabs to see the functions?

 

Many Thanks 

 

Rob

0
Rob
Top achievements
Rank 1
Veteran
Iron
answered on 13 Apr 2015, 03:32 AM

Came back to this after leaving for a few days.

 Very easy answer.. with a Partial View, you need to define the Javascript functions at the top of the view, so they are loaded first.

 All working now.. :)

 

Rob

 

0
Kiran
Top achievements
Rank 1
Veteran
Iron
answered on 09 Dec 2017, 01:21 AM
We Have any working sample example, I am trying to load same view in multiple tabs with different business logic and I have separate JavaScript for the each tab, but while loading same view in another Tab it's not loading and its not detecting the SCRIPT functions .
Tags
TabStrip
Asked by
Eric
Top achievements
Rank 2
Answers by
Vladimir Iliev
Telerik team
Eric
Top achievements
Rank 2
Rob
Top achievements
Rank 1
Veteran
Iron
Kiran
Top achievements
Rank 1
Veteran
Iron
Share this question
or