Loading Dynamic Content in Tabs

[IDispose]

I have a Grid with a command button that open a Dialog. This dialog has a Tabstrip with each tab loading content from a controller that returns a view. The tabstrip is built using the ASP.Net MVC Html wrapper. 

<p>@(Html.Kendo().Dialog()<br>        .Name("viewDetailsDialog")<br>        .Title("Details")<br>        .Content(<br>            Html.Kendo().TabStrip()<br>                .Name("viewDetailsTabstrip")<br>                .Items(tabstrip => {<br>                    tabstrip.Add().Text("Tab 1")<br>                            .HtmlAttributes(new { @class= "tab_bar" })<br>                            .Selected(true)<br>                            .LoadContentFrom("Tab1Content", "MyController");<br><br>                    tabstrip.Add().Text("Tab 2")<br>                            .HtmlAttributes(new { @class = "tab_bar" })<br>                            .Selected(false)<br>                            .LoadContentFrom("Tab2Content", "");<br><br>                   )<br>                .ToHtmlString()<br>            )<br>        .Closable(true)<br>        .Width(900)<br>        .Height(600)<br>        .Modal(true)<br>        .Visible(false)</p><p></p><p></p>

 

The dialog is opened via a JS function that's called by the Grid's Custom Command button. The details that need to be displayed in each tab in the dialog is unique to the row.

 

How do I modify the LoadContentFrom URL and pass query string parameters that are picked by the Tab1Content method on MyController?

[Dimitar]

Hello Ramesh,

I have managed to setup a working sample project for you by following your guidelines. You can find it in the attached file (TelerikMvcAppGridTabstrip.zip).

You can find all of the HTML markup and the JavaScript functions in Views/Home/Index.cshtml  and the endpoints in GridController and MyController.

You will notice that I have moved the TabStrip intitialization from the Dialog control to the kendo template, which is used to populate the Dialog. In order to pass the needed data to MyController, I have added a third parameter to the LoadContentFrom() method, in which you can specify the needed data that will be passed to the controller action. 

By making the above modifications you will be able to pass the respective row dataItem to the controller and filter it as needed.

I hope this solves your issue.

Regards,
Dimitar
Telerik by Progress

[IDispose]

Hi Dimitar,

Thank you for putting together a sample project. Appreciate the code refactor. The sample seems to work for the most part except that Tab1 or Tab2 do not display any data. I put breakpoints in the controller and confirmed that the methods are called. However, a network trace reveals that the call to retrieve Tab1 content results ina 500 error. 

I refactored my original code to use a Window widget instead of a dialog widget and am building the contents for the window on the server via a partial view. The Partial view constructs the Tabstrip on the server and this seems to work. 

What could be causing the 500 error? I am running the code on IIS Express. 

[Dimitar]

Hello Ramesh,

The 500 error is occurring because by default ASP.NET MVC does not allow you to respond to a Get request with JSON payload. You need to explicitly allow this by using JsonRequestBehavior.AlloGet as follows:

return Json(result, JsonRequestBehavior.AllowGet);

I have modified the previously sent example and you can find it in the attached file (TelerikMvcAppGridTabstrip.zip). You can find the modification in HomeController.

 

Regards,
Dimitar
Telerik by Progress

[Kiran]

Hi Dimitar,

I have a question related to tabStrip, I am trying to load same partial view with same controls (IDs and Names) in multiple tabs. Then I am getting error, Which razor controls having same name they are not loading and getting the JavaScript error. Can you guide me that 1. is that possible to Load same partial view in multiple tabs

2. Different Partial views with Same controls name and JavaScript code

 

[Dimitar]

Hello Kiran,

The Name options of the widgets always have to be unique in the context of the whole page. If a partial view is loaded multiple times, each instance of this partial view has to render all widgets with unique Name options (IDs). If you fail to meet this requirement, duplicate element IDs render on the page and only the widget instance which occurs first in the HTML markup initializes and works properly.

1) To answer your first question - same partial view can be loaded in multiple tabs successfully, but the widgets inside the partial have to possess unique name and id.

2) Different partial views with widgets that contain the same name and id cannot be loaded correctly, as only the first widget instance will be initialized.

Regards,
Dimitar
Progress Telerik