Your search did not match any results.
Documentation

The LoadPanel is an overlay widget notifying the viewer that loading is in progress.

<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; } #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; } .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; }