PDA

View Full Version : [CLOSED] popup window control from shared layout page



sharmav1
Mar 02, 2017, 12:43 PM
can anybody guide me on how to open window popup partial view on a menu item click from layout page?

Window Control like this:


X.Window().ID("TestPopUp").Width(500).Height(500).Modal(true).Items(....)

I was able to do it by calling


@HTML.Partial("TestPopUp")

and then



X.Menu().Items(
X.MenuItem().Text("Test View").Listeners(l => l.Click.Handler = "App.TestPopUp.show()")
)

from my layout page, but I have many partial pop up window controls in my app, and I don't want to Render all of them across entire website. So, I was just wondering if there is any other approach of achieving this from my layout page?

Thanks

fabricio.murta
Mar 02, 2017, 1:47 PM
Hello @sharmav1!

The process should be analog to this example: Dynamic Partial Rendering - Window (http://mvc2.ext.net/#/Dynamic_Partial_Rendering/Window/).

If this does not help at all, please provide us a simplified test case reproducing your scenario. I would expect from such a test case at least a layout page, a view and then the partial view, with controller code to trigger the partial view. But that would really depend on the scenario you require.

sharmav1
Mar 03, 2017, 7:22 AM
Hello @fabricio.murta

Thanks for your reply. I tried your suggestion but it is not working for me. Below is a test case:

layout page:



@model System.Collections.IEnumerable
<!DOCTYPE html>

<script type="text/javascript">

var UserAccessPerson = @Html.Raw(Json.Encode(UserAcces.GetPerson));

</script>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title</title>
<script src="~/Scripts/jquery-1.10.2.js"></script>

</head>
<body>

@*@Html.Partial("Report")*@ // ******* This way Works for me, but I don't want to do it this way

@(
X.Viewport().Layout(LayoutType.Border)
.Items
(
X.Panel().Region(Region.North).Height(50).Layout(L ayoutType.HBox).LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.Stretch })
.Items
(
X.Label().ID("lblAppName").Text("Home")
X.Component().Flex(1),
.MenuArrow(true)
.Menu
(
X.Menu()
.Items
(
X.MenuItem().Text("Home").IconCls("home-screen").Listeners(l => l.Click.Handler = "window.location=" + JSON.Serialize(Url.Action("Index", "Home"))),

X.MenuItem().Text("Report").Listeners(l => l.Click.Handler = App.winReport.show()),
// *******This way Works for me, but I don't want to do it this way

X.MenuItem().Text("Report").DirectEvents(de =>
{
de.Click.Url = Url.Action("Report", "Admin");
})

)
)
),
X.Panel().Border(false).BodyBorder(0).ID("pnlContent").Flex(1).Region(Region.Center).Layout(LayoutType. Fit)
.ItemsFromSection(this, "sectionCenter")
.BottomBar
(
X.Toolbar()
.Items
(
X.Component().Flex(1), X.Label().Text(Title), X.Button().Icon(Icon.Help)
)
)
)
)

@RenderSection("scripts", required: false)
@RenderSection("OptionalContent", required: false)
@RenderBody()
</body>
</html>

Controller Code:


public ActionResult Report()
{

return new Ext.Net.MVC.PartialViewResult { ViewName = "Report" };

}

partialview: Report.cshtml



@using Ext.Net
@using Ext.Net.MVC

@{
var X = Html.X();
}


@(
X.Window().ID("winReport")

.Title("Test Report").Layout(LayoutType.Border)
.Height(500).Width(700).Hidden(true).Modal(true).C onstrain(true)
.Items
(
X.Panel().Layout(LayoutType.VBox).LayoutConfig(new VBoxLayoutConfig { Align = VBoxAlign.Stretch }).Region(Region.Center).Flex(1)
.Items
(
X.FormPanel().ID("pnlReport").Border(false).BodyStyle("padding:0 0 0 5px;")
.Items
(
X.FieldSet().Flex(1).Layout(LayoutType.HBox).Borde r(false)
.Items
(
X.FieldContainer().Flex(1).Layout(LayoutType.Ancho r).Border(false)
.Items
(
X.TextField().ID("txtReportLName").EmptyText("search by last name")
.Flex(1).LabelSeparator("").FieldLabel("Last Name").LabelAlign(LabelAlign.Top).AnchorHorizontal("-15")
)
,
X.FieldContainer().Flex(1).Layout(LayoutType.Ancho r).Border(false)
.Items
(
X.TextField().ID("txtReportFName").EmptyText("search by first name")
.Flex(1).LabelSeparator("").FieldLabel("First Name").LabelAlign(LabelAlign.Top).AnchorHorizontal("-15")
)
),
X.FieldSet().Flex(1).Layout(LayoutType.HBox).Borde r(false)
.Items
(
X.Checkbox().ID("chkUser").BoxLabel("User?").Flex(1).Checked(false)
)
)
.Buttons
(
X.Button().ID("btnSearch").Text("Search")


X.Button().ID("btnReportClear").Text("Clear").Margins("0 0 10 0")

)
.ButtonAlign(Alignment.Center)

)
)

)

sharmav1
Mar 03, 2017, 10:33 AM
Hi @fabricio.murta

Your example worked for me, it was my mistake that I forgot to make my partial view as visible

Thanks very much

fabricio.murta
Mar 03, 2017, 6:37 PM
Hello @sharmav1!

Thanks both for the test case and for the feedback confirming the example worked for you in the end! We're glad it was not too far from working!