JavaScript/jQuery LoadPanel - Overview
The LoadPanel is an overlay UI component notifying the viewer that loading is in progress.
The following code adds to your page a simple LoadPanel and a Button that invokes it. The hideOnOutsideClick property set to true instructs the LoadPanel to hide once a user clicks outside it.
jQuery
HTML
JavaScript
<div id="loadPanelContainer"></div> <div id="buttonContainer"></div>
$(function() {
$("#loadPanelContainer").dxLoadPanel({
hideOnOutsideClick: true
});
$("#buttonContainer").dxButton({
text: "Show the Load Panel",
onClick: function () {
$("#loadPanelContainer").dxLoadPanel("show");
}
});
});Angular
HTML
TypeScript
<dx-load-panel
[hideOnOutsideClick]="true"
[(visible)]="isLoadPanelVisible">
</dx-load-panel>
<dx-button
text="Show the Load Panel"
(onClick)="isLoadPanelVisible = true">
</dx-button>
import { DxLoadPanelModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
isLoadPanelVisible: boolean = false;
}
@NgModule({
imports: [
// ...
DxLoadPanelModule,
DxButtonModule
],
// ...
})Vue
<template>
<div>
<DxLoadPanel
:hide-on-outside-click="true"
v-model:visible="isLoadPanelVisible"
/>
<DxButton
text="Show the Load Panel"
@click="handleClick"
/>
</div>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxLoadPanel } from 'devextreme-vue/load-panel';
import { DxButton } from 'devextreme-vue/button';
export default {
components: {
DxLoadPanel,
DxButton
},
data() {
return {
isLoadPanelVisible: false
}
},
methods: {
handleClick() {
this.isLoadPanelVisible = true;
}
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { LoadPanel } from 'devextreme-react/load-panel';
import { Button } from 'devextreme-react/button';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoadPanelVisible: false
};
this.handleClick = this.handleClick.bind(this);
this.handleHide = this.handleHide.bind(this);
}
handleClick() {
this.setState({
isLoadPanelVisible: true
});
}
handleHide() {
this.setState({
isLoadPanelVisible: false
});
}
render() {
return (
<div>
<LoadPanel
hideOnOutsideClick={true}
visible={this.state.isLoadPanelVisible}
onHidden={this.handleHide}
/>
<Button
text="Show the Load Panel"
onClick={this.handleClick}
/>
</div>
);
}
}
export default App;See Also
jQuery
Angular
Vue
React
Feedback