jQuery TextBox Methods - DevExtreme jQuery Documentation v23.2 (2024)

Object structure:

DevExpress.ui.dxTextBox.defaultOptions({ device: { deviceType: "desktop" }, options: { // Here go the TextBox properties }});

import TextBox, { Properties } from "devextreme/ui/text_box";// ...export class AppComponent { constructor () { TextBox.defaultOptions<Properties>({ device: { deviceType: "desktop" }, options: { // Here go the TextBox properties } }); }}

<template> <div> <DxTextBox id="textBox1" /> <DxTextBox id="textBox2" /> </div></template><script>import DxTextBox from "devextreme-vue/text-box";import TextBox from "devextreme/ui/text_box";TextBox.defaultOptions({ device: { deviceType: "desktop" }, options: { // Here go the TextBox properties }});export default { components: { DxTextBox }}</script>

import dxTextBox from "devextreme/ui/text_box";import TextBox from "devextreme-react/text-box";dxTextBox.defaultOptions({ device: { deviceType: "desktop" }, options: { // Here go the TextBox properties }});export default function App() { return ( <div> <TextBox id="textBox1" /> <TextBox id="textBox2" /> </div> )}

const devicesConfig = [ { deviceType: 'desktop' }, { deviceType: 'tablet' }, { deviceType: 'phone' },];devicesConfig.forEach(deviceConfig => { DevExpress.ui.dxTextBox.defaultOptions({ device: deviceConfig, options: { // Here go the TextBox properties } });});

import TextBox, { Properties } from "devextreme/ui/text_box";// ...export class AppComponent { constructor () { const devicesConfig = [ { deviceType: 'desktop' }, { deviceType: 'tablet' }, { deviceType: 'phone' }, ]; devicesConfig.forEach(deviceConfig => { TextBox.defaultOptions<Properties>({ device: deviceConfig, options: { // Here go the TextBox properties } }); }); }}

<template> <div> <DxTextBox /> </div></template><script>import DxTextBox from "devextreme-vue/text-box";import TextBox from "devextreme/ui/text_box";const devicesConfig = [ { deviceType: 'desktop' }, { deviceType: 'tablet' }, { deviceType: 'phone' },];devicesConfig.forEach(deviceConfig => { TextBox.defaultOptions({ device: deviceConfig, options: { // Here go the TextBox properties } });});export default { components: { DxTextBox }}</script>

import dxTextBox from "devextreme/ui/text_box";import TextBox from "devextreme-react/text-box";const devicesConfig = [ { deviceType: 'desktop' }, { deviceType: 'tablet' }, { deviceType: 'phone' },];devicesConfig.forEach(deviceConfig => { dxTextBox.defaultOptions({ device: deviceConfig, options: { // Here go the TextBox properties } });});export default function App() { return ( <div> <TextBox /> </div> )}

$("#myTextBox").dxTextBox("dispose");$("#myTextBox").remove();

<dx-text-box ... *ngIf="condition"></dx-text-box>

<template> <DxTextBox ... v-if="condition"> </DxTextBox></template><script>import DxTextBox from 'devextreme-vue/text-box';export default { components: { DxTextBox }}</script>

import React from 'react';import TextBox from 'devextreme-react/text-box';function DxTextBox(props) { if (!props.shouldRender) { return null; } return ( <TextBox ... > </TextBox> );}class App extends React.Component { render() { return ( <DxTextBox shouldRender="condition" /> ); }}export default App;

const myCustomButton = $("#textBoxContainer").dxTextBox("getButton", "myCustomButton");myCustomButton.focus();

import { Component, ViewChild } from '@angular/core';import { DxTextBoxComponent } from 'devextreme-angular';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { @ViewChild('textBoxRef', { static: false }) textBox: DxTextBoxComponent; // Prior to Angular 8 // @ViewChild('textBoxRef') textBox: DxTextBoxComponent; setFocus() { this.textBox.instance.getButton('myCustomButton').focus(); }}

<dx-text-box #textBoxRef ... ></dx-text-box>

<template> <DxTextBox ... :ref="textBoxRef"> </DxTextBox></template><script>import 'devextreme/dist/css/dx.light.css';import DxTextBox from 'devextreme-vue/text-box';export default { components: { DxTextBox }, data() { return { textBoxRef } }, methods: { setFocus() { this.textBox.getButton('myCustomButton').focus(); } }, computed: { textBox: function() { return this.$refs[textBoxRef].instance; } }}</script>

import React from 'react';import 'devextreme/dist/css/dx.light.css';import TextBox from 'devextreme-react/text-box';class App extends React.Component { constructor(props) { super(props); this.textBoxRef = React.createRef(); this.setFocus = () => { this.textBox.getButton('myCustomButton').focus(); }; } get textBox() { return this.textBoxRef.current.instance; } render() { return ( <TextBox ... ref={this.textBoxRef}> </TextBox> ); }}export default App;

Return Value: any

optionValue: any

Thank you!

Thank you!