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

Problem opening a jQuery dialog using Html.ActionLink in Tab Content

7 Answers 58 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Robert
Top achievements
Rank 1
Robert asked on 29 Nov 2011, 06:51 PM
I am trying to do something I would think is fairly simple, but I can't seem to get around it.

Here's the scenario:

I have a partial view that consists of a table and content within that table and I am loading that into a TabStrip using .LoadContentFrom...
Html.Telerik().TabStrip()
    .Name("QuoteDetailTabStrip")
    .Items(tabstrip =>
    {
        tabstrip.Add()
            .Text("Detail")
            .LoadContentFrom("DetailView", "Quote");

Within one of the table rows in an ActionLink to open a modal window.
<td>(@Html.ActionLink("edit", "OEM", "Quote", routeValues: new { id = "P722161" }, htmlAttributes: new { id = "oemEditLink", data_dialog_title = "OEM List" }))</td>

Now, if I include the EXACT same Html.ActionLink in the page outside the TabStrip, the modal dialog opens just fine. But the link simply will not work when rendered as part of the TabStrip content. I also tried taking the PartialView out of the equation and using .Content to render the link and that still doesn't work. The table is wrapped in a DIV and I also tried wrapping just the actionlink in a DIV in the attempt to render it alone within the TabStrip content to no avail.

Does anyone have any suggestions on what to try next, or is there something obvious I am clearly missing here?

CORRECTION:

Ok, THIS works. So the problem does appear to be limited to rendering a partial view using LoadContentFrom. That makes me suspect the ScriptRegistrar comes into play to register the .js file that contains my dialog code?
Html.Telerik().TabStrip()
    .Name("QuoteDetailTabStrip")
    .Items(tabstrip =>
    {
        tabstrip.Add()
            .Text("Detail")
            .Content(@<text><div>@Html.ActionLink("edit", "OEM", "Quote", routeValues: new { id = "P722161" }, htmlAttributes: new { id = "oemEditLink", data_dialog_title = "OEM List" })</div></text>);

UPDATE:

This also works:
Html.Telerik().TabStrip()
    .Name("QuoteDetailTabStrip")
    .Items(tabstrip =>
    {
        tabstrip.Add()
            .Text("Detail")
            .Content(@<text> @Html.Partial("_Detail") </text>);

7 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 01 Dec 2011, 10:22 AM
Hi Robert,

 Yes, the JavaScript files required by the components which are loaded via ajax need to be included beforehand. You can check the list of required JavaScript files here.

Regards,
Atanas Korchev
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
0
Robert
Top achievements
Rank 1
answered on 01 Dec 2011, 05:30 PM
Atanas,

Let me clarify: there are no Telerik components in the partial view I am attempting to load into the tabstrip content using the LoadContentFrom method.

The partial view only contains an HTML table with an HTML action link in it:
<td>(@Html.ActionLink("edit", "OEM", "Quote", routeValues: new { id = "P722161" }, htmlAttributes: new { id = "oemEditLink", data_dialog_title = "OEM List" }))</td>

When this action link is clicked, a jQuery modal dialog should open. However, it does not work. The code for the jQuery dialog is in a javascript file called AjaxModalDialog.js, and this script is in the <head> tag of my shared layout cshtml file.

I can load this partial view via the tabstrip .Content method easily and it works fine. The only time this does not work properly is when using .LoadContentFrom.
0
Atanas Korchev
Telerik team
answered on 05 Dec 2011, 09:40 AM
Hi Robert,

 Unfortunately we are out of ideas. Is there a chance to provide a sample project which shows the problem?

Best wishes,
Atanas Korchev
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
0
Robert
Top achievements
Rank 1
answered on 05 Dec 2011, 09:21 PM
Atanas,

I have attached a sample that demonstrates the issue. You may need to re-reference the Telerik extension assembly.Just build and run. It will load a page with 2 tabs with a link on each that should open a modal dialog. It works on tab 1, it does not work on tab 2. Tab 2 uses the LoadFromContent method to load the tab content.

Any insight you can offer would be helpful.

Thanks!
0
Daniel
Telerik team
answered on 07 Dec 2011, 04:28 PM
Hello Robert,


When you are attaching the click event, the link element isn't loaded yet. The LoadContentFrom method loads the tab content on demand with an Ajax request.


Regards,
Daniel
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
0
Robert
Top achievements
Rank 1
answered on 07 Dec 2011, 05:00 PM
Hi Daniel,

If I am understanding this, then one proper way to handle it would be to attach the click event to the link element on the tab's OnContentLoad event?

Thanks for helping out a noob.

Robert
0
Daniel
Telerik team
answered on 09 Dec 2011, 02:34 PM
Hello Robert,


You could use either the  OnContentLoad client-side event or jQuery's delegate(in newer versions on) method.


Kind regards,
Daniel
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
Tags
TabStrip
Asked by
Robert
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Robert
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or