[Solved] Calling Window from Controller (return PartialView) not working as expected.

[Thomas]

Currently, I am trying to display a modal Window via JQuery from a grid.  This works only if the Grid is called from the controller via return View.  This however is not going to work as the grid view is displayed within a tabstrip and configured as a partial view.  I quess first I have a question, why when calling the popup via View all is well, but from PartialView or for that matter any View that is called via PartialView will the Window not be displayed.

Here is the View:

 

@using EPToolsV3.ORM
@modelList<UserData>
@*Popup Hierarchy selection window for user assignment*@

<div class="small-grid">
@{Html.Telerik().Window()
    .Name("PopupWindow")
    .Title("Product/Org Lookup")
    .Content(
        @<text>
        @using (Ajax.BeginForm("GetLookupData", "Hierarchy", new { SearchType = Enumerations.ProductOrgSearchType.Assign },
            new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "Grid", LoadingElementId = "Loading" }))
        {
            <table id="AssignDisplayTable">
                <tr>
                    <td class="td-align-middle">
                        @Html.Label("Level")<br />
                        @( Html.Telerik().ComboBox()
                            .Name("HierarchySelectionLevel")
                            .DataBinding(binding => binding
                                .Ajax()
                                    .Select("_GetHierarchyLevels", "Hierarchy",
                                        new { HiearchyLevelSearchType = Enumerations.HierarchyLevelTypes.Product })
                            )
                        )
                    </td>
                    <td class="td-align-middle">
                        @Html.Label("Number")<br />@Html.TextBox("SearchByID")
                    </td>
                    <td class="td-align-middle">
                        @Html.Label("Description")<br />@Html.TextBox("SearchByDescription")
                    </td>
                    <td class="td-align-middle">
                        <button class="t-button t-button-icontext" type="submit">
                            <span class="t-icon t-search"></span>Search</button>
                    </td>
                    <td class="td-align-middle">



@Html.Label(



"User")<br />



@(Html.Telerik().ComboBox()

.Name(



"EPUsers")



.DataBinding(binding => binding

.Ajax()

.Select(



"_GetUsers", "SystemMaintenance")



)

)





</td>







<td class="button">







<button class="t-button t-button-text" type="submit">Show Access</button>







</td>







</tr>







</table> }







<hr />







<div id="Loading" style="display: none">







<img id="loadingimg" src="../Resources/EPToolsLoading1.gif" alt="" />







</div>







<div id="Grid">@*Hierarchy will be displayed here.*@</div>



</text>)

.Width(650)

.Draggable(



true)



.Modal(



true)



.Visible(



false)



.Render();

}

</





div>



<





div class="small-grid">



@{Html.Telerik().Grid<



UserData>()



.Name(



"SystemUsers")



.ToolBar(c =>

{

c.Insert().Text(



"Add new User").HtmlAttributes(new { id = "User_Insert" });



c.Custom().HtmlAttributes(



new { @class = "t-button", @type = "button", @onclick = "OpenPopupWindow()" }).Text("Assign Access");



}

)

.Editable(e => e.Mode(



GridEditMode.InLine))



.DataKeys(dk => dk.Add(o => o.USERDATAID).RouteKey(



"UserID"))



.Columns(cols =>

{

cols.Command(c => c.Edit().ButtonType(



GridButtonType.BareImage)).HtmlAttributes(new { @title = "Edit User" }).Width(30);



cols.Bound(o => o.USERDATAID).Hidden(



true);



cols.Bound(o => o.USER_NAME).Title(



"User Name").Width(100).Filterable(false);



cols.Bound(o => o.FIRST_NAME).Title(



"First Name").Width(100).Filterable(true);



cols.Bound(o => o.LAST_NAME).Title(



"Last Name").Width(100).Filterable(true);



cols.Bound(o => o.EMAIL).Title(



"EMail").Width(150).Filterable(false);



cols.Command(c => c.Delete().ButtonType(



GridButtonType.BareImage)).HtmlAttributes(new { @title = "Delete User" }).Width(30);



})

.CellAction(cells =>

{





if (cells.Column.Member == "USER_NAME")



{





UserData user = cells.DataItem;







if (user.Updated)



{

cells.HtmlAttributes[



"style"] = "font-weight: bold; color: red";



}

}

})

.DetailView(dv => dv.ClientTemplate(

Html.Telerik().Grid<



UserBrand>()



.Name(



"User_<#= USERDATAID #>")



.Editable(be => be.Mode(



GridEditMode.InLine))



.DataKeys(bdk => bdk.Add(o => o.USERBRANDID))

.Columns(bcols =>

{

bcols.Command(c => c.Edit().ButtonType(



GridButtonType.BareImage)).HtmlAttributes(new { @title = "Edit Brand" }).Width(30);



bcols.Bound(o => o.USERBRANDID).Hidden(



true);



bcols.Bound(o => o.BRAND_NAME).Title(



"Brand").Width(150);



bcols.Bound(o => o.USER_TYPE).Title(



"User Type").Width(150);



bcols.Bound(o => o.USER_ID).Hidden(



true);



bcols.Bound(o => o.BRAND_ID).Hidden(



true);



bcols.Bound(o => o.USER_TYPE_ID).Hidden(



true);



}

)

.DetailView(mdv => mdv.ClientTemplate(

Html.Telerik().Grid<



Module>()



.Name(



"UserModule_<#= USERBRANDID #>")



.Columns(mcols =>

{

mcols.Bound(o => o.PLAN_TYPE_ID).Template(o => o.PLANTYPEDESC).ClientTemplate(



"<#= PLANTYPEDESC #>").Title("Plan Type").Width(100);



mcols.Bound(o => o.PRODUCT_TOP_ID).Template(o => o.PRODUCTLVLDESC).ClientTemplate(



"<#= PRODUCTLVLDESC #>").Title("Top Product Level").Width(150);



mcols.Bound(o => o.MODULEID).Hidden(



true);



mcols.Bound(o => o.BRAND_ID).Hidden(



true);



mcols.Bound(o => o.USER_ID).Hidden(



true);



})

.DetailView(ubdv => ubdv.ClientTemplate(

Html.Telerik().Grid<



UserModuleAccess>()



.Name(



"UserModule_<#= USER_ID #>_<#= BRAND_ID #>_<#= MODULEID #>")



.DataKeys(dk => dk.Add(o => o.ID).RouteKey(



"UserModuleAccessID"))



.ToolBar(t =>

{

t.Custom().HtmlAttributes(



new { @class = "t-button", @type = "button", @onclick = "OpenPopupWindow" }).Text("Assign Access");//.Action("ProductOrgLookup", "Hierarchy", new { }).Ajax(false).Text("Assign Access");



t.Custom().Action(



"_DeleteAllUserAccess", "Admin", new { UserID = "<#= USER_ID #>", ModuleID = "<#= MODULEID #>" }).Ajax(true).Text("Delete All");



})

.Columns(cols =>

{

cols.Bound(o => o.NAME).Title(



"Name").Width(75);



cols.Bound(o => o.DESC).Title(



"Description").Width(150);



cols.Command(c => c.Delete().ButtonType(



GridButtonType.BareImage)).HtmlAttributes(new { @title = "Delete module access" }).Width(45);



cols.Bound(o => o.ID).Hidden(



true);



cols.Bound(o => o.HIERARCHYLEVELKEY).Hidden(



true);



cols.Bound(o => o.MEMBKEY).Hidden(



true);



cols.Bound(o => o.MODULE_ID).Hidden(



true);



cols.Bound(o => o.USER_ID).Hidden(



true);



})

.DataBinding(db => db.Ajax()

.Select(



"_GetUserModuleAccess", "Admin", new { UserID = "<#= USER_ID #>", ModuleID = "<#= MODULEID #>" })



.Delete(



"_DeleteModuleAccess", "Admin", new { UserID = "<#= USER_ID #>", ModuleID = "<#= MODULEID #>" })



)

.Sortable()

.ToHtmlString()

)

)

.DataBinding(mdb => mdb.Ajax()

.Select(



"_GetUserModules", "Admin", new { UserID = "<#= USER_ID #>", BrandID = "<#= BRAND_ID #>" })



)

.Sortable()

.ToHtmlString()

)

)

.DataBinding(bdb => bdb.Ajax()

.Select(



"_GetUserBrands", "Admin", new { UserID = "<#= USERDATAID #>" })



.Update(



"_UpdateUserBrand", "Admin")



.Insert(



"_InsertUserBrands", "Admin")



)

.Sortable()

.Pageable(p => p.PageSize(10))

.ToHtmlString()

))

.DataBinding(db => db.Ajax()

.Select(



"_GetUsers", "Admin")



.Update(



"_UpdateUser", "Admin")



.Insert(



"_InsertUser", "Admin")



.Delete(



"_DeleteUser", "Admin")



)

.Pageable(p => p.PageSize(20))

.Sortable()

.Filterable()

.Scrollable(s => s.Height(360))

.Render();

}

</





div>

 

Here is the controller for the grid:

public ActionResult Users()
{
         List<UserData> userViewData = new ORM_Methods.UserMethods().GetUsers(Enumerations.UserType.Security);

         return View("Users", userViewData);
}

Here is the JQuery:

function OpenPopupWindow() {
        var window = $("#PopupWindow").data("tWindow");
        window.center().open();
}

Would like some clarification before opening a support ticket.

[Thomas]

Solved this by moving the Window to its own partial view and adding

@(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.transparent.css").Combined(true).Compress(true)))

to the top of the partial view.

So for partial views to make use of the Window, even though the partial view is within a view containing the layout, the css needs to be registered.