DevExtreme jQuery - Resize and Relocate
Specify the height and width options to change the LoadPanel's size:
jQuery
JavaScript
$(function() {
$("#loadPanelContainer").dxLoadPanel({
closeOnOutsideClick: true,
height: 300,
width: 500
});
$("#buttonContainer").dxButton({
text: "Show the Load Panel",
onClick: function () {
$("#loadPanelContainer").dxLoadPanel("show");
}
});
});Angular
HTML
TypeScript
<dx-load-panel
[closeOnOutsideClick]="true"
[(visible)]="isLoadPanelVisible"
[height]="300"
[width]="500">
</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
:close-on-outside-click="true"
:visible.sync="isLoadPanelVisible"
:height="300"
:width="500"
/>
<DxButton
text="Show the Load Panel"
@click="handleClick"
/>
</div>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
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.common.css';
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
closeOnOutsideClick={true}
visible={this.state.isLoadPanelVisible}
onHidden={this.handleHide}
height={300}
width={500}
/>
<Button
text="Show the Load Panel"
onClick={this.handleClick}
/>
</div>
);
}
}
export default App;The container option specifies the LoadPanel's container. The container is shaded when the LoadPanel is visible; the LoadPanel inherits styles from the container and is scrolled with. To position the widget relative to a specific element, use the position option:
jQuery
JavaScript
$(function() {
$("#loadPanelContainer").dxLoadPanel({
closeOnOutsideClick: true,
container: "#container",
position: { my: "left", at: "left", of: "#targetElement" }
});
$("#buttonContainer").dxButton({
text: "Show the Load Panel",
onClick: function () {
$("#loadPanelContainer").dxLoadPanel("show");
}
});
});Angular
HTML
TypeScript
<dx-load-panel
[closeOnOutsideClick]="true"
container="#container"
[(visible)]="isLoadPanelVisible">
<dxo-position
my="left"
at="left"
of="#targetElement">
</dxo-position>
</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
:close-on-outside-click="true"
:visible.sync="isLoadPanelVisible"
container="#container">
<DxPosition
my="left"
at="left"
of="#targetElement"/>
</DxLoadPanel>
<DxButton
text="Show the Load Panel"
@click="handleClick"
/>
</div>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import { DxLoadPanel, DxPosition } 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.common.css';
import 'devextreme/dist/css/dx.light.css';
import { LoadPanel, Position } 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
closeOnOutsideClick={true}
visible={this.state.isLoadPanelVisible}
inHidden={this.handleHide}
container="#container">
<Position
my="left"
at="left"
of="#targetElement"/>
</LoadPanel>
<Button
text="Show the Load Panel"
onClick={this.handleClick}
/>
</div>
);
}
}
export default App;This configuration of the position option reads as follows: "place my left side at the left of the "#targetElement".
See Also
Feedback