Pull down to refresh...
Release to refresh...
Refreshing...
-
Data Grid
- Overview
-
Data Binding
-
Paging and Scrolling
-
Editing
-
Grouping
-
Filtering and Sorting
- Focused Row
-
Row Drag & Drop
-
Selection
-
Columns
- State Persistence
-
Appearance
-
Templates
-
Data Summaries
-
Master-Detail
-
Export to PDF
-
Export to Excel
-
Adaptability
- Keyboard Navigation
-
Pivot Grid
- Overview
-
Data Binding
-
Field Chooser
-
Features
-
Export to Excel
-
Tree List
- Overview
-
Data Binding
- Sorting
- Paging
-
Editing
- Node Drag & Drop
- Focused Row
-
Selection
-
Filtering
-
Column Customization
- State Persistence
- Adaptability
- Keyboard Navigation
-
Scheduler
- Overview
-
Data Binding
-
Views
-
Features
- Virtual Scrolling
-
Grouping
-
Customization
- Adaptability
-
Html Editor
-
Chat
-
Diagram
- Overview
-
Data Binding
-
Featured Shapes
-
Custom Shapes
-
Document Capabilities
-
User Interaction
- UI Customization
- Adaptability
-
Charts
- Overview
-
Data Binding
-
Area Charts
-
Bar Charts
- Bullet Charts
-
Doughnut Charts
-
Financial Charts
-
Line Charts
-
Pie Charts
-
Point Charts
-
Polar and Radar Charts
-
Range Charts
-
Sparkline Charts
-
Tree Map
-
Funnel and Pyramid Charts
- Sankey Chart
-
Combinations
-
More Features
-
Export
-
Selection
-
Tooltips
-
Zooming
-
-
Gantt
- Overview
-
Data
-
UI Customization
- Strip Lines
- Export to PDF
- Sorting
-
Filtering
-
Reporting
- AI-powered Extensions
-
Interaction
-
Report Types
-
Data binding
-
Real-life Reports
-
Layout Features
-
Report Controls
-
Web-specific Features
-
Rich Text Editor
- Overview
- Load/Save
- Document Protection
-
Templates
- Autocorrect
-
Customization
- Simple View
-
Spreadsheet
- Overview
-
Open a Document
- Export And Printing
-
Features
-
UI Customization
-
Gauges
- Overview
-
Data Binding
-
Bar Gauge
-
Circular Gauge
-
Linear Gauge
-
Navigation
- Overview
- Accordion
-
Menu
- Multi View
-
Drawer
-
Tab Panel
-
Tabs
-
Toolbar
- Pagination
-
Tree View
- Right-to-Left Support
-
Layout
-
Tile View
- Splitter
-
Gallery
- Scroll View
- Resizable
-
-
Editors
- Overview
- Autocomplete
-
Calendar
- Check Box
- Color Box
- Date Box
-
Date Range Box
-
Drop Down Box
-
Number Box
-
Select Box
- Switch
-
Tag Box
- Text Area
- Text Box
- Validation
- Custom Text Editor Buttons
- Right-to-Left Support
- Editor Appearance Variants
-
Forms and Multi-Purpose
- Overview
- Button Group
- Field Set
-
Filter Builder
-
Form
- Radio Group
-
Range Selector
- Numeric Scale (Lightweight)
- Numeric Scale
- Date-Time Scale (Lightweight)
- Date-Time Scale
- Logarithmic Scale
- Discrete scale
- Custom Formatting
- Use Range Selection for Calculation
- Use Range Selection for Filtering
- Image on Background
- Chart on Background
- Customized Chart on Background
- Chart on Background with Series Template
- Range Slider
- Slider
-
Sortable
-
File Management
-
File Manager
- Overview
-
File System Types
-
Customization
-
File Uploader
-
-
Actions and Lists
-
Maps
- Overview
-
Map
-
Vector Map
-
Dialogs and Notifications
-
Localization
Related Demos:
Your search did not match any results.
Loading...
Dialogs and Notifications - Overview
DevExtreme ASP.NET Core Dialog and Notification UI components are jQuery-powered client-side components that add interactivity to an ASP.NET Core app. You can configure each component with Razor C# syntax to use them in MVC views and Razor Pages.
Was this demo helpful?
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
x
@using DevExtreme.NETCore.Demos.Models
@model IEnumerable<GalleryItem>
<script>
var favoritesList = [];
</script>
<div class="images">
@foreach(var property in Model) {
<div onclick="showPopup(@property.ID, '@property.Address')">
<div class="item-content">
<img alt="@property.Address" src="@property.Image" />
<div class="item-options">
<div>
<div class="address">@property.Address</div>
<div class="price large-text">$@string.Format("{0:n0}", property.Price)</div>
<div class="agent">
<div id="@("house" + property.ID)">
<img alt="Listing agent" src="~/images/icon-agent.svg">
Listing agent
</div>
</div>
</div>
</div>
</div>
@(Html.DevExtreme().Popover()
.Target("#house" + property.ID)
.ShowEvent("mouseenter")
.HideEvent("mouseleave")
.Width(260)
.ContentTemplate(
"<div class='agent-details'>" +
"<img alt='" + property.Agent.FirstName + " " + property.Agent.LastName + "' src='" + property.Agent.Picture + "' />" +
"<div>" +
"<div class='name large-text'>" + property.Agent.FirstName + " " + property.Agent.LastName + "</div>" +
"<div class='phone'>Tel: " + property.Agent.Phone + "</div>" +
"</div>" +
"</div>")
.Position(a => a
.At(HorizontalAlignment.Center, VerticalAlignment.Bottom)
.My(HorizontalAlignment.Center, VerticalAlignment.Top)
.Collision(PositionResolveCollision.Fit, PositionResolveCollision.Flip)
.Offset(0, 2)
)
)
@using(Html.DevExtreme().NamedTemplate("popup-template-" + property.ID)) {
<div class='popup-property-details'>
<div class='large-text'>$@string.Format("{0:n0}", property.Price)</div>
<div class='opacity'>@property.Address, @property.City, @property.State</div>
@(Html.DevExtreme().Button()
.ElementAttr("class", "favorites")
.OnInitialized(@<text>
function buttonOnInitialized(e) {
setFavoriteText(e, @property.ID);
}
</text>)
.Icon("favorites")
.Width(260)
.Height(44)
.OnClick(@<text>
function buttonOnInitialized(e) {
changeFavorite(e, @property.ID);
}
</text>)
)
<div class='images'>
<img alt="@property.Address" src="@property.Image" />
<img alt="@property.Address" src="@property.Image.Replace(".jpg", "b.jpg")" />
</div>
<div>@property.Features</div>
</div>
}
</div>
}
@(Html.DevExtreme().Popup()
.ID("property-popup")
.Width(660)
.Height(540)
.ShowTitle(true)
.Title("")
.Visible(false)
.DragEnabled(false)
.HideOnOutsideClick(true)
.ShowCloseButton(true)
)
</div>
<script>
function removeItemFromFavorites(id) {
var itemIndex = favoritesList.indexOf(id);
if (itemIndex >= 0) {
favoritesList.splice(itemIndex, 1);
}
}
function showPopup(id, address) {
var popup = $("#property-popup").dxPopup("instance");
popup.option("contentTemplate", $("#popup-template-" + id));
popup.option("title", address);
popup.show();
}
function setButtonText(button, isFav) {
button.option("text", isFav
? "Remove from Favorites"
: "Add to Favorites");
}
function setFavoriteText(e, id) {
setButtonText(e.component, favoritesList.indexOf(id) >= 0);
}
function changeFavorite(e, id) {
var favoriteState = favoritesList.indexOf(id) == -1;
favoriteState ? favoritesList.push(id) : removeItemFromFavorites(id);
setButtonText(e.component, favoriteState);
var message = "This item has been "
+ (favoriteState ? "added to" : "removed from")
+ " the Favorites list!";
DevExpress.ui.notify({
message: message,
width: 450
},
favoriteState ? "success" : "error",
2000
);
}
</script>
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx