Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > TabStrip > Problem opening a jQuery dialog using Html.ActionLink in Tab Content

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

Feed from this thread
  • Robert avatar

    Posted on Nov 29, 2011 (permalink)

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

    Reply

  • Atanas Korchev Atanas Korchev admin's avatar

    Posted on Dec 1, 2011 (permalink)

    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

    Reply

  • Robert avatar

    Posted on Dec 1, 2011 (permalink)

    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.

    Reply

  • Atanas Korchev Atanas Korchev admin's avatar

    Posted on Dec 5, 2011 (permalink)

    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

    Reply

  • Robert avatar

    Posted on Dec 5, 2011 (permalink)

    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!
    Attached files

    Reply

  • Daniel Daniel admin's avatar

    Posted on Dec 7, 2011 (permalink)

    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

    Reply

  • Robert avatar

    Posted on Dec 7, 2011 (permalink)

    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

    Reply

  • Daniel Daniel admin's avatar

    Posted on Dec 9, 2011 (permalink)

    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

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > TabStrip > Problem opening a jQuery dialog using Html.ActionLink in Tab Content
Related resources for "Problem opening a jQuery dialog using Html.ActionLink in Tab Content"

[  ASP.NET MVC TabStrip Features  |  Documentation  |  Demos  |  Telerik TV ]