Datapicker now working in Tabstrip Control

[Uma]

Hi,
I'm using a tabstrip to display employee profiles as tabs. On selecting the tab, controller action is going to display a partial view where profile information(in view mode) and 'Edit' button displays. On clicking the 'Edit' button, again controller action is redisplaying the same partial view in edit mode. Here the issue comes, in edit mode, the view has some date fields, on clicking the calender icon, calender popup is not opening. It may be because of loading partial view within a partial view, but i'm not sure about this.

Below is the Tabstrip Code:

<% Html.Telerik().TabStrip()
   .Name("TabStrip")
   .BindTo(this.ViewData.Model.NavigationData, (item, ProfileNavigationData) =>
       {
           item.Text = ProfileNavigationData.Text;
           item.ContentUrl = ProfileNavigationData.NavigateUrl + "?ProfileId=" + ProfileNavigationData.ProfileId + "&EmpId=" + ProfileNavigationData.EmployeeRootId;
           item.ContentHtmlAttributes.Add("style", "height:400px;overflow:auto");
       })
   .Render();
%>

On selecting the tab, the controller action is going to return a Partial View(ViewProfile.ascx) like this:

Controller Action for ViewProfile:

public ActionResult ViewProfile(int ProfileId, long EmpId)
{
    EmployeeProfile model = EmployeeProfileRepository.GetEmployeeProfile(ProfileId);
    ViewData["IsInEditMode"] = false;
    return PartialView(model);
}

Partial View(ViewProfile.ascx):

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Doosan.CommonData.EmployeeProfile>" %>
<div id="profileArea">
   <% using (Ajax.BeginForm("ViewProfile", "EmployeeProfile", null, new AjaxOptions { UpdateTargetId = "profileArea" }, new { @model = Model }))
       {%>
        <%: Html.ValidationSummary(true)%>
            <table width ="100%">
                    <tr>
                        <td style="width:85%"> </td>
                        <td align ="center" id="tdEdit" >
                            <% if (!Convert.ToBoolean(ViewData["IsInEditMode"]))
                               { %>
                                     <input type="submit" value="Edit Profile" name="button"  />
                             <% }
                               else
                               { %>
                                    <input type="submit" value="Save Changes" name="button"/>
                                    <input type="submit" value="Cancel" name="button"  />
                            <%} %>
                        </td>
                    </tr>
           </table>
         <fieldset>
            <legend>Profile Information</legend>
            <%: Html.Hidden("ProfileId", Model.Id)%>
            <% if (Convert.ToBoolean(ViewData["IsInEditMode"]))
               { %>
                     <% Html.RenderPartial("EditProfileControl", Model); %>
            <% }
               else
               { %>
                    <% Html.RenderPartial("ViewProfileControl", Model); %>             <% } %>
    </fieldset>
    <% } %>
</div>

On Edit button click, the below controller action will return the partial view in edit mode:

[HttpPost]
public ActionResult ViewProfile(EmployeeProfile employeeProfile, int ProfileId, string button)
{
    EmployeeProfile model = EmployeeProfileRepository.GetEmployeeProfile(ProfileId);
    if (button == "Edit Profile")
    {
        ViewData["IsInEditMode"] = true;
        ViewData["ShowWarning"] = true;
        return PartialView(model);
    }
    else if (button == "Cancel")
    {
        ViewData["IsInEditMode"] = false;
        ViewData["ShowWarning"] = false;
        return PartialView(model);
    }
    else if (button == "Save Changes")
    {
       //Update the database
        ViewData["IsInEditMode"] = false;
        ViewData["ShowWarning"] = false;
        return PartialView(model);
    }
    //If we got this far, something failed and redisplay the form.
    ViewData["IsInEditMode"] = false;
    return PartialView(employeeProfile);
}

Any suggestions? Thanks in advance...

Regards,
Uma