DevExtreme React - Show and Hide Using the API
NOTE
In this article, the Button widget is used to demonstrate how to show and hide the LoadIndicator. This choice is made for purely demonstrational purposes, and you can do the same operations using another widget following the same guidelines.
To specify whether the LoadIndicator is shown, change the visible option.
jQuery
HTML
JavaScript
<div id="loadIndicatorContainer"></div> <div id="buttonContainer"></div>
$(function() { var loadIndicator = $("#loadIndicatorContainer").dxLoadIndicator({ visible: false }).dxLoadIndicator("instance"); $("#buttonContainer").dxButton({ text: "Toggle the LoadIndicator", onClick: function () { var isLoadIndicatorVisible = loadIndicator.option("visible"); loadIndicator.option("visible", !isLoadIndicatorVisible); } }); });
Angular
HTML
TypeScript
<dx-load-indicator [(visible)]="isLoadIndicatorVisible"> </dx-load-indicator> <dx-button text="Toggle the LoadIndicator" (onClick)="isLoadIndicatorVisible = !isLoadIndicatorVisible"> </dx-button>
import { DxLoadIndicatorModule, DxButtonModule } from "devextreme-angular"; // ... export class AppComponent { isLoadIndicatorVisible: boolean = true; } @NgModule({ imports: [ // ... DxLoadIndicatorModule, DxButtonModule ], // ... })
Vue
<template> <div> <DxLoadIndicator :visible.sync="isLoadIndicatorVisible" /> <DxButton text="Toggle the LoadIndicator" @click="toggleLoadIndicator" /> </div> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxLoadIndicator } from 'devextreme-vue/load-indicator'; import { DxButton } from 'devextreme-vue/button'; export default { components: { DxLoadIndicator, DxButton }, data() { return { isLoadIndicatorVisible: false }; }, methods: { toggleLoadIndicator(e) { this.isLoadIndicatorVisible = !this.isLoadIndicatorVisible; } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { LoadIndicator } from 'devextreme-react/load-indicator'; import { Button } from 'devextreme-react/button'; class App extends React.Component { constructor(props) { super(props); this.state = { isLoadIndicatorVisible: false }; this.handleButtonClick = this.handleButtonClick.bind(this); } handleButtonClick() { const value = this.state.isLoadIndicatorVisible; this.setState({ isLoadIndicatorVisible: !value }); } render() { return ( <div> <LoadIndicator visible={this.state.isLoadIndicatorVisible} /> <Button text="Toggle the LoadIndicator" onClick={this.handleButtonClick} /> </div> ); } } export default App;
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().LoadIndicator() .ID("loadIndicator") .Visible(false) ) @(Html.DevExtreme().Button() .ID("button") .Text("Toggle the LoadIndicator") .OnClick(@<text> function () { var loadIndicator = $("#loadIndicator").dxLoadIndicator("instance"); var isLoadIndicatorVisible = loadIndicator.option("visible"); loadIndicator.option("visible", !isLoadIndicatorVisible); } </text>) )
@(Html.DevExtreme().LoadIndicator() _ .ID("loadIndicator") _ .Visible(False) ) @(Html.DevExtreme().Button() _ .ID("button") _ .Text("Toggle the LoadIndicator") _ .OnClick("button_click") ) <script> function button_click() { var loadIndicator = $("#loadIndicator").dxLoadIndicator("instance"); var isLoadIndicatorVisible = loadIndicator.option("visible"); loadIndicator.option("visible", !isLoadIndicatorVisible); } </script>
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- LoadIndicator Demos
- LoadIndicator API Reference
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.