Load Panel
Documentation
The LoadPanel is an overlay widget notifying the viewer that loading is in progress.
jQuery
AngularJS
Angular
ASP.NET MVC
ASP.NET Core
<div id="container">
<h1>John Heart</h1>
@(Html.DevExtreme().Button()
.Text("Load Data")
.OnClick("button_click")
)
<div id="employee">
<p>
Birth date: <b class="birth-date"></b>
</p>
<p class="address">
Address:<br />
<b class="city"></b><br />
<span class="zipcode"></span>
<span class="address-info"></span>
</p>
<p>
Phone:
<b class="mobile-phone"></b><br />
Email: <b class="email"></b>
</p>
</div>
@(Html.DevExtreme().LoadPanel()
.ID("loadPanel")
.ShadingColor("rgba(0,0,0,0.4)")
.Position(p => p.Of("#employee"))
.Visible(false)
.ShowIndicator(true)
.ShowPane(true)
.Shading(true)
.CloseOnOutsideClick(false)
.OnShown("loadPanel_shown")
.OnHidden("loadPanel_hidden")
)
<div class="options">
<div class="caption">Options</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Value(true)
.Text("With indicator")
.OnValueChanged("withIndicator_checkBox_valueChanged")
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Value(true)
.Text("With overlay")
.OnValueChanged("withOverlay_checkBox_valueChanged")
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Value(true)
.Text("With pane")
.OnValueChanged("withPane_checkBox_valueChanged")
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Value(false)
.Text("Close on outside click")
.OnValueChanged("closeOnOutsideClick_checkBox_valueChanged")
)
</div>
</div>
</div>
<script src="~/Scripts/data/employee.js"></script>
<script>
function getLoadPanelInstance() {
return $("#loadPanel").dxLoadPanel("instance");
}
function showEmployeeInfo(employee) {
$(".birth-date").text(employee.Birth_Date || "");
$(".city").text(employee.City || "");
$(".zipcode").text(employee.Zipcode || "");
$(".address-info").text(employee.Address || "");
$(".mobile-phone").text(employee.Mobile_Phone || "");
$(".email").text(employee.Email || "");
}
function button_click() {
getLoadPanelInstance().show();
showEmployeeInfo({});
}
function loadPanel_shown(e) {
setTimeout(function() {
e.component.hide();
}, 3000);
}
function loadPanel_hidden() {
showEmployeeInfo(employee);
}
function withIndicator_checkBox_valueChanged(e) {
getLoadPanelInstance().option("showIndicator", e.value);
}
function withOverlay_checkBox_valueChanged(e) {
getLoadPanelInstance().option("shading", e.value);
}
function withPane_checkBox_valueChanged(e) {
getLoadPanelInstance().option("showPane", e.value);
}
function closeOnOutsideClick_checkBox_valueChanged(e) {
getLoadPanelInstance().option("closeOnOutsideClick", e.value);
}
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class LoadPanelController : Controller {
public ActionResult Overview() {
return View();
}
}
}
var employee = {
"Full_Name":"John Heart",
"Title":"CEO",
"Birth_Date":"03/16/1964",
"Prefix":"Mr.",
"Address":"351 S Hill St.",
"City":"Los Angeles",
"Zipcode":90013,
"Email":"jheart@dx-email.com",
"Skype":"jheart_DX_skype",
"Home_Phone":"(213) 555-9208",
"Mobile_Phone":"(213) 555-9392"
};
h1 {
display: inline-block;
vertical-align: middle;
padding: 10px;
margin: 0;
}
#employee {
margin: 20px 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-top: 1px solid lightgray;
border-bottom: 1px solid lightgray;
}
#employee > p {
padding: 10px 20px;
margin: 0;
}
.address {
height: 60px;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
}