LoadPanel

You can create the widget using one of the following approaches.

• jQuery

  HTML

  JavaScript

  <div id="loadPanel"></div>

  $(function () {
      $("#loadPanel").dxLoadPanel({
          closeOnOutsideClick: true,
          visible: true
      });
  });

• Angular

  HTML

  JavaScript

  <dx-load-panel
      [closeOnOutsideClick]="true"
      [(visible)]="isLoadPanelVisible">
  </dx-load-panel>

  export class AppComponent {
      isLoadPanelVisible = true;
  }

• AngularJS

  HTML

  JavaScript

  <div ng-controller="DemoController">
      <div dx-load-panel="{
          closeOnOutsideClick: true,
          bindingOptions: {
              visible: 'isLoadPanelVisible'
          }
      }"></div>
  </div>

  angular.module('DemoApp', ['dx'])
      .controller('DemoController', function DemoController($scope) {
          $scope.isLoadPanelVisible = true;
      });

• Knockout

  HTML

  JavaScript

  <div data-bind="dxLoadPanel: {
      closeOnOutsideClick: true,
      visible: isLoadPanelVisible
  }"></div>

  var viewModel = {
      isLoadPanelVisible: ko.observable(true)
  };
  ko.applyBindings(viewModel);

• ASP.NET MVC Wrappers

  Razor C#

  Razor VB

  @(Html.DevExtreme().LoadPanel()
      .ID("loadPanel")
      .CloseOnOutsideClick(true)
      .Visible(true)
  )

  @(Html.DevExtreme().LoadPanel() _
      .ID("loadPanel") _
      .CloseOnOutsideClick(True) _
      .Visible(True)
  )

Note that DevExtreme widgets require you to link the jQuery library to your application. If you use the Knockout or AngularJS approach, the Knockout or AngularJS library is also required. For detailed information on linking these libraries to your project, refer to the topics in the Installation section.

View Demo

See Also

• LoadPanel - Overview
• LoadPanel - Show and Hide Using the API

See Also

• Handle Events - jQuery
• Handle Events - AngularJS
• Handle Events - Knockout