If you have technical questions, please create a support ticket in the DevExpress Support Center.
IEnumerable<DevExtreme.MVC.Demos.Models.DataGrid.Employee>
<div id="container">
<div class="header">Employees</div>
Html.DevExtreme().Popup() (
.ID("employee-popup")
.Width(300)
.Height(280)
.Container(".dx-viewport")
.ShowTitle(true)
.Title("Information")
.DragEnabled(false)
.HideOnOutsideClick(true)
.ShowCloseButton(false)
.Position(positionConfig => positionConfig
.At(HorizontalAlignment.Center, VerticalAlignment.Bottom)
.My(HorizontalAlignment.Center, VerticalAlignment.Center)
.Collision(PositionResolveCollision.Fit, PositionResolveCollision.Fit)
)
.ToolbarItems(barItems => {
barItems.Add()
.Toolbar(Toolbar.Top)
.LocateInMenu(ToolbarItemLocateInMenuMode.Always)
.Widget(widget => widget.Button()
.Text("More info")
.OnClick(<text>
function showInfo(data) {
const message = `More info about ${currentEmployee.FirstName} ${currentEmployee.LastName}`;
DevExpress.ui.notify({
message: message,
position: {
my: "center top",
at: "center top"
}
}, "success", 3000);
}
</text>)
);
barItems.Add()
.Toolbar(Toolbar.Bottom)
.Location(ToolbarItemLocation.Before)
.Widget(widget => widget.Button()
.Icon("email")
.StylingMode(ButtonStylingMode.Contained)
.Text("Send")
.OnClick(<text>
function showInfo(data) {
const message = `Email is sent to ${currentEmployee.FirstName} ${currentEmployee.LastName}`;
DevExpress.ui.notify({
message: message,
position: {
my: "center top",
at: "center top"
}
}, "success", 3000);
}
</text>)
);
barItems.Add()
.Toolbar(Toolbar.Bottom)
.Location(ToolbarItemLocation.After)
.Widget(widget => widget.Button()
.Text("Close")
.StylingMode(ButtonStylingMode.Outlined)
.Type(ButtonType.Normal)
.OnClick(<text>
function hideInfo(data) {
const popup = $("#employee-popup").dxPopup("instance");
popup.hide();
}
</text>)
);
})
)
<ul class="employees">
var employee in Model) { (
<li>
<img alt="@employee.FirstName @employee.LastName" src="@employee.Picture" id="@("image" + employee.ID)" /><br />
<i> .FirstName</i>
<i> .LastName</i><br />
Html.DevExtreme().Button() (
.ElementAttr("class", "button-info")
.Text("Details")
.OnClick(<text>
function showInfo(data) {
const popup = $("#employee-popup").dxPopup("instance");
currentEmployee = .Raw(System.Text.Json.JsonSerializer.Serialize(employee));
popup.option({
contentTemplate: $("#popup-template-" + .ID),
"position.of": `#image${ .ID}`,
});
popup.show();
}
</text>)
)
Html.DevExtreme().NamedTemplate("popup-template-" + employee.ID)) { (
<span>
<p>
Full Name:
<span> .FirstName</span>
<span> .LastName</span>
</p>
<p>
Birth Date:
<span> .BirthDate.Value.ToString("yyyy/MM/dd")</span>
</p>
<p>
Address:
<span> .Address</span>
</p>
<p>
Hire Date:
<span> .HireDate.Value.ToString("yyyy/MM/dd")</span>
</p>
<p>
Position:
<span> .Position</span>
</p>
</span>
}
</li>
}
</ul>
</div>
<script>
let currentEmployee = null;
</script>
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
Show and Hide the Popup
Call the show() method to display the Popup. To close a Popup, choose one of the following options:
-
Built-in close button
Enable the showCloseButton property to display the Close button in a Popup's top toolbar. -
Custom close button
This demo shows how to add custom buttons to the Popup. One of them uses an onClick handler to call the hide() method that closes the Popup. Refer to the next section (Configure the Popup) to learn how you can populate a popup with custom controls. -
On outside click
Enable the hideOnOutsideClick property to allow users to hide the Popup by clicking outside the component.
Configure the Popup
The Popup inner area is divided into three parts:
-
Top toolbar
-
Predefined
Set showTitle totrue
and use the title property to specify the caption. The Close button will appear if you do not disable the showCloseButton property. -
Custom
Add toolbarItems markup and set each item's toolbar property totop
. If you want to display an item in the overflow menu, as shown in this demo, set the item's locateInMenu property toalways
. You can also assignnever
to this property to keep the item outside the overflow menu, or you can assignauto
to hide the item in the menu if the Popup's width decreases.
-
-
Content area
To populate the Popup with content, use the contentTemplate property. -
Bottom toolbar
To enable the bottom toolbar, declare the toolbarItems array as shown in this demo. Set each item's toolbar property tobottom
. To learn more about toolbar configuration, refer to the following tutorial: Getting Started with Toolbar
Resize and Position
To specify Popup size, use the height and width properties.
In this demo, each Popup's location is relative to the image. The code specifies the my, at, and of properties of the position object. The configuration in the demo reads as follows: "place my center
side at the bottom
side of the #image${employee.ID}
element."
Use the container property to select the container in which you want to render the Popup. If you set the container property to an element on the page, the shading applies to this element.
Turn on the dragEnabled option to allow users to move the Popup around the page.