React UI Components Documentation
Typescript React Sortable Component
This tutorial will show you the basics of how to get started with the jQWidgets Sortable React Component.
Prerequisites
Refer to Getting Started with React before you start with this help topic.
Structure
I. Imports:
import * as React from 'react'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import 'jqwidgets-scripts/jqwidgets/styles/jqx.material-purple.css';import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
II. Class:
class App extends React.PureComponent<{}, ISortableProps> { constructor(props: {}) { super(props); this.state = { width: '100%' // Other Widget Props } } render() { return ( <JqxSortable width={this.state.width} height={"100%"} ..... /> ) }}
III. Render:
ReactDOM.render(<App />, document.getElementById('app'));
Events
The event names in React are constructed of the original event names starting with capital letter plus on upfront:
class App extends React.PureComponent<{}, ISortableProps> { constructor(props: {}) { super(props); this.state = { width: '100%' // Other Widget Props } } render() { return ( <JqxSortable onNameOfEvent={this.handleEvent} width={this.state.width} height={"100%"} ..... /> ) } private handleEvent(e: Event): void { // Do Something ... }}
Methods & Properties
This is how you call methods & props:
//Get Methodsconst value = this.mySortable.current!.methodName(arg1, arg2); //Set Methodsthis.mySortable.current!.methodName(arg1, arg2); //Get Propertiesconst height = this.state.height; //Set Propertiesthis.setState({ height: 250 });
Every component have a method setOptions which accepts a object as an argument. This object contains component settings.
this.mySortable.current!.setOptions({ width: 350, height: 400 });
Every component also have a method getOptions which returns the value of the requested option.
const width = this.mySortable.current!.getOptions('width');
Sortable API
API Reference of the jQWidgets Sortable React Component: Sortable API
Sortable Demos
Demos Reference of the jQwidgets Sortable React Component: Sortable Demos