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
],
// ...
})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
],
// ...
})This configuration of the position option reads as follows: "place my left side at the left of the "#targetElement".
See Also
Feedback