| Name | Type | Default |
|---|
|
disabled
# |
boolean
|
false
|
Enables or disables the jqxTextArea.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
function App() {
const myTextArea = useRef<JqxTextArea>(null);
return (
<JqxTextArea
ref={myTextArea}
width={200}
height={50}
placeHolder={'Enter a Country'}
disabled={true}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
displayMember
# |
string
|
''
|
Sets or gets the displayMember of the Items. The displayMember specifies the name of an object property to display. The name is contained in the collection specified by the 'source' property.
import { createRoot } from 'react-dom/client';
import { useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea, {
type ITextAreaProps
} from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
function App() {
const myTextArea = useRef<JqxTextArea>(null);
const displayMember = 'ContactName';
const source = useMemo<ITextAreaProps['source']>(
() => [
{ CompanyName: 'Company1', ContactName: 'Ana' },
{ CompanyName: 'Company2', ContactName: 'Maria' }
],
[]
);
return (
<JqxTextArea
ref={myTextArea}
width={200}
height={50}
placeHolder={'Enter a Country'}
displayMember={displayMember}
source={source}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
dropDownWidth
# |
number | string
|
null
|
Sets or gets the jqxTextArea's dropdown (pop-up) width.
import { createRoot } from 'react-dom/client';
import { useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea, {
type ITextAreaProps
} from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
function App() {
const myTextArea = useRef<JqxTextArea>(null);
const dropDownWidth = 300;
const source = useMemo<ITextAreaProps['source']>(
() => [
'Afghanistan',
'Albania',
'Algeria',
'Andorra',
'Angola',
'Brazil',
'Brunei',
'Bulgaria'
],
[]
);
return (
<JqxTextArea
ref={myTextArea}
width={200}
height={50}
placeHolder={'Enter a Country'}
dropDownWidth={dropDownWidth}
source={source}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
height
# |
string | number
|
null
|
Sets or gets the jqxTextArea's height.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
function App() {
const myTextArea = useRef<JqxTextArea>(null);
return <JqxTextArea ref={myTextArea} width={200} height={50} placeHolder={'Enter a Country'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
items
# |
number
|
8
|
Sets or gets the maximum number of items to display in the popup menu.
import { createRoot } from 'react-dom/client';
import { useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea, {
type ITextAreaProps
} from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
function App() {
const myTextArea = useRef<JqxTextArea>(null);
const items = 3;
const source = useMemo<ITextAreaProps['source']>(
() => [
'Afghanistan',
'Albania',
'Algeria',
'Andorra',
'Angola',
'Brazil',
'Brunei',
'Bulgaria'
],
[]
);
return (
<JqxTextArea
ref={myTextArea}
width={200}
height={50}
placeHolder={'Enter a Country'}
items={items}
source={source}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
maxLength
# |
number
|
null
|
Sets or gets the maximum character length of the textarea.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
function App() {
const myTextArea = useRef<JqxTextArea>(null);
return (
<JqxTextArea
ref={myTextArea}
width={200}
height={50}
placeHolder={'Enter a Country'}
maxLength={10}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
minLength
# |
number
|
1
|
Sets or gets the minimum character length needed before triggering auto-complete suggestions.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
function App() {
const myTextArea = useRef<JqxTextArea>(null);
return (
<JqxTextArea
ref={myTextArea}
width={200}
height={50}
placeHolder={'Enter a Country'}
minLength={2}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
opened
# |
boolean
|
false
|
Gets a value indicating whether the auto-suggest popup is opened.
|
|
placeHolder
# |
string
|
''
|
Sets or gets the textarea's placeholder.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
function App() {
const myTextArea = useRef<JqxTextArea>(null);
return <JqxTextArea ref={myTextArea} width={200} height={50} placeHolder={'Enter a Country'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
Sets or gets the auto-suggest popup's z-index.
import { createRoot } from 'react-dom/client';
import { useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea, {
type ITextAreaProps
} from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
function App() {
const myTextArea = useRef<JqxTextArea>(null);
const popupZIndex = 99999;
const source = useMemo<ITextAreaProps['source']>(
() => [
'Afghanistan',
'Albania',
'Algeria',
'Andorra',
'Angola',
'Brazil',
'Brunei',
'Bulgaria'
],
[]
);
return (
<JqxTextArea
ref={myTextArea}
width={200}
height={50}
placeHolder={'Enter a Country'}
popupZIndex={popupZIndex}
source={source}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
query
# |
string
|
''
|
Determines the textarea's query.
|
|
renderer
# |
(itemValue: any, inputValue: any) => any
|
null
|
Enables you to update the textarea's value, after a selection from the auto-complete popup.
|
|
roundedCorners
# |
boolean
|
true
|
Enables or disables the rounded corners functionality. This property setting has effect in browsers which support CSS border-radius.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
function App() {
const myTextArea = useRef<JqxTextArea>(null);
return (
<JqxTextArea
ref={myTextArea}
width={200}
height={50}
placeHolder={'Enter a Country'}
roundedCorners={true}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
rtl
# |
boolean
|
false
|
Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
function App() {
const myTextArea = useRef<JqxTextArea>(null);
return (
<JqxTextArea
ref={myTextArea}
width={200}
height={50}
placeHolder={'Enter a Country'}
rtl={true}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
scrollBarSize
# |
number
|
15
|
Sets or gets the size of the scrollbar.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
function App() {
const myTextArea = useRef<JqxTextArea>(null);
return (
<JqxTextArea
ref={myTextArea}
width={200}
height={50}
placeHolder={'Enter a Country'}
scrollBarSize={15}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
searchMode
# |
TextAreaSearchMode
|
'default'
|
TextAreaSearchMode: "none" | "contains" | "containsignorecase" | "equals" | "equalsignorecase" | "startswithignorecase" | "startswith" | "endswithignorecase" | "endswith"
Sets or gets the search mode. When the user types into the textarea, the widget tries to find the searched item using the entered text and the selected search mode.
Possible Values:
'none'
'contains'
'containsignorecase'
'equals'
'equalsignorecase'
'startswithignorecase'
'startswith'
'endswithignorecase'
'endswith'
import { createRoot } from 'react-dom/client';
import { useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea, {
type ITextAreaProps
} from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
function App() {
const myTextArea = useRef<JqxTextArea>(null);
const searchMode = 'containsignorecase';
const source = useMemo<ITextAreaProps['source']>(
() => [
'Afghanistan',
'Albania',
'Algeria',
'Andorra',
'Angola',
'Brazil',
'Brunei',
'Bulgaria'
],
[]
);
return (
<JqxTextArea
ref={myTextArea}
width={200}
height={50}
placeHolder={'Enter a Country'}
searchMode={searchMode}
source={source}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
source
# |
any
|
[]
|
Sets the widget's data source. The 'source' function is passed two arguments, the textarea's value and a callback function. The 'source' function may be used synchronously by returning an array of items or asynchronously via the callback.
import { createRoot } from 'react-dom/client';
import { useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea, {
type ITextAreaProps
} from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
function App() {
const myTextArea = useRef<JqxTextArea>(null);
const source = useMemo<ITextAreaProps['source']>(
() => [
'Afghanistan',
'Albania',
'Algeria',
'Andorra',
'Angola',
'Brazil',
'Brunei',
'Bulgaria'
],
[]
);
return (
<JqxTextArea
ref={myTextArea}
width={200}
height={50}
placeHolder={'Enter a Country'}
source={source}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
theme
# |
string
|
''
|
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
function App() {
const myTextArea = useRef<JqxTextArea>(null);
return (
<JqxTextArea
ref={myTextArea}
width={200}
height={50}
placeHolder={'Enter a Country'}
theme={'material'}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
valueMember
# |
string
|
''
|
Sets or gets the valueMember of the Items. The valueMember specifies the name of an object property to set as a 'value' of the list items. The name is contained in the collection specified by the 'source' property.
import { createRoot } from 'react-dom/client';
import { useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea, {
type ITextAreaProps
} from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
function App() {
const myTextArea = useRef<JqxTextArea>(null);
const valueMember = 'CompanyName';
const source = useMemo<ITextAreaProps['source']>(
() => [
{ CompanyName: 'Company1', ContactName: 'Ana' },
{ CompanyName: 'Company2', ContactName: 'Maria' }
],
[]
);
return (
<JqxTextArea
ref={myTextArea}
width={200}
height={50}
placeHolder={'Enter a Country'}
valueMember={valueMember}
source={source}
displayMember={'ContactName'}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
width
# |
string | number
|
null
|
Sets or gets the jqxTextArea's width.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
function App() {
const myTextArea = useRef<JqxTextArea>(null);
return <JqxTextArea ref={myTextArea} width={200} height={50} placeHolder={'Enter a Country'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
|
|
change
# |
Event
|
|
This event is triggered when the value is changed.
Code examples #
Bind to the change event of jqxTextArea.
|
|
close
# |
Event
|
|
This event is triggered when the auto-suggest popup is closed.
Code examples #
Bind to the close event of jqxTextArea.
|
|
open
# |
Event
|
|
This event is triggered when the auto-suggest popup is opened.
Code examples #
Bind to the open event of jqxTextArea.
|
|
select
# |
Event
|
|
This event is triggered when an item is selected from the auto-suggest popup.
Code examples #
Bind to the select event of jqxTextArea.
|
|
|
| Name | Arguments | Return Type |
|---|
|
destroy
# |
None
|
|
Destroys the widget.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
function App() {
const myTextArea = useRef<JqxTextArea>(null);
useEffect(() => {
myTextArea.current!.destroy();
}, []);
return <JqxTextArea ref={myTextArea} width={200} height={50} placeHolder={'Enter a Country'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
focus
# |
None
|
|
Focuses the widget.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
function App() {
const myTextArea = useRef<JqxTextArea>(null);
useEffect(() => {
myTextArea.current!.focus();
}, []);
return <JqxTextArea ref={myTextArea} width={200} height={50} placeHolder={'Enter a Country'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
refresh
# |
None
|
|
Refreshes the widget.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
function App() {
const myTextArea = useRef<JqxTextArea>(null);
useEffect(() => {
myTextArea.current!.refresh();
}, []);
return <JqxTextArea ref={myTextArea} width={200} height={50} placeHolder={'Enter a Country'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
render
# |
None
|
|
Renders the widget.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
function App() {
const myTextArea = useRef<JqxTextArea>(null);
useEffect(() => {
myTextArea.current!.render();
}, []);
return <JqxTextArea ref={myTextArea} width={200} height={50} placeHolder={'Enter a Country'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
selectAll
# |
None
|
|
Selects the text in the textarea.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
function App() {
const myTextArea = useRef<JqxTextArea>(null);
useEffect(() => {
myTextArea.current!.selectAll();
}, []);
return <JqxTextArea ref={myTextArea} width={200} height={50} placeHolder={'Enter a Country'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
val
# |
value
|
|
Sets or gets the value.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
function App() {
const myTextArea = useRef<JqxTextArea>(null);
useEffect(() => {
myTextArea.current!.val();
}, []);
return <JqxTextArea ref={myTextArea} width={200} height={50} placeHolder={'Enter a Country'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
