[Solved] Tabstrip within Window

[Rion]

I have recently been working with using a grid for a user management portion of an application that I am working on. I have implemented to such that when a user click's on a user from the grid a modal window will open. All of this is functioning as intended - however inside of the new modal window I am trying to add a TabStrip - which is where I am encountering problems.

The TabStrip is contained in a partial view that populates a div contained within the modal window. The code below might help to clarify (this was simply to demonstrate the issue - so don't mind any lack of best practices :) )

The Window code - the WindowContent div is the div that will be populated with the Tabstrip.

<% Html.Telerik().Window()
            .Name("Window")
            .Title("Edit User")
            .Visible(false)
            .Modal(true)
                .Content(() =>
                {%>
                    <div id="WindowContent" style="width: 450px; height: 300px;">

                    </div>
                <%})
            .Buttons(buttons => buttons.Close())
            .Width(450)
            .Height(300)
            .Render();
        %>

The JavaScript function that populates the div with the content of the partial view "Test/Edit"

function Edit(username) {
                var window = $("#Window").data("tWindow");
                window.center();
                $("#windowContent").load("Test/Edit", { userName: username });
                window.open();
            }

Finally the Tabstrip code :

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<TestingModal.Models.User>" %>

<div id="TabbedContent" style="width: 400px; height: 250px;">
<% Html.Telerik().TabStrip()
           .Name("TabStrip")
           .Items(tabstrip =>
            {
                tabstrip.Add()
                    .Text("Account")
                    .Content(() =>
                        {                            %>
                            <p>Account Information</p>
                       <%});
                tabstrip.Add()
                    .Text("Security")
                    .Content(() =>
                        {%>
                            <p>Security Information</p>
                       <%});
                tabstrip.Add()
                    .Text("Roles")
                    .Content(() =>
                        {%>
                            <p>Roles Information</p>
                       <%});
            })
            .SelectedIndex(0)
            .Render();
           %>
</div>

The Modal Window will open as intended - however no content is displayed inside of it. I tested the partial view by simply using Test - and it populated without issue. I am just curious as to where I may have issues - and how I might go about resolving them.

Thanks everyone,

Rion

[Rion]

Bleh -

A mere few minutes after I post - I find the reason it was not populating was because of a silly variable name.

$("#WindowContent").load("Test/Edit", { userName: username });

instead of

$("#windowContent").load("Test/Edit", { userName: username });

However - I did notice a new issue of being unable to change tabs while within the window. I am not sure if this should still be asked in the TabStrip or the Window forum - please feel free to move it seen fit.

Thanks again,

Rion

[Rion]

It must be a curse - apparently the moment after post on here I quickly find a solution or find something that I had previously said was quite silly.

The tabs are actually being selected - however the selection is not seen, nor does the "content area" of the tabs change. I think this will merely require some JavaScript tinkering - to implement a method for each of the selections and content population.

I'll be working on a solution for it - if anyone has any suggestions - feel free to post away and thanks for reading :)

-Rion

[Rion]

Eventually found a solution - simply had to add the telerik.tabstrip.js to the ScriptRegistrar of the actual Partial View itself. (The partial view inside of the window - and it worked perfectly)

Thanks documentation,

Rion

[cheburek]

Could you please a bit more explain about using ScriptRegistrar in ajax loaded popup windows. I have a similar issue with loading up popup windows which contain telerik date control. 

You wrote that you registered required javascript on ajax popup windows.

I had similar error to your. When I registered telerik.datepicker.min.js error message changed and now seems it is requires also to register jquery.js. Did you registered also jquery?

Am I correct understand situation, please correct me if I do mistake - registering some js in ajax popup means that content of that js file will also be passed from server to the client? If yes then is it possible to not load such heavy pieces of code to the client but register them already on client before they will be shown if client side already has them loaded?

Thank you in advance