React Suite CheckTreePicker Disabled and read only
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products.CheckTreePicker is supported in multiple selectors for multiple selections of complex data structures.
The disabled option is used to make some options/entire components in the CheckTreePicker, nonselectable or uncheckable. We just need to mention indexes of the options to make them disabled or uncheckable.
The readonly option makes the default value as selected. The user cannot change it. It is only for reading purposes.
Syntax:
<CheckTreePicker data={data} uncheckableItemValues={[indexes of values to make uncheckable]} /> <CheckTreePicker readOnly data={data} defaultValue={[Any default value]} /> <CheckTreePicker data={data} disabledItemValues={[indexes of values to make them disable}/> <CheckTreePicker disabled data={data} defaultValue={[Index of default value]} />
Parameters
- data: These are the options in the form of JSON
- Indexes: These are the values of the options. When we create options, then we define a member value for each object.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install rsuite npm install @thumbtack/thumbprint-react
Project Structure: It will look like the following.
Example 1: In this example, we will learn about disabling entire components and disabling particular options also.
- App.js: Now write down the following code in the App.js file. Here, App is our default component where we have written our code
Javascript
import React from 'react' ; import CheckTreePicker from 'rsuite/CheckTreePicker' ; import 'rsuite/dist/rsuite.min.css' ; import { Label } from '@thumbtack/thumbprint-react' ; export default function App() { // Sample Options const data = [ { "label" : "w3wiki" , "value" : 1, "children" : [ { "label" : "Machine Learning" , "value" : 2 }, { "label" : "Data Structures" , "value" : 3, "children" : [ { "label" : "Java" , "value" : 4 }, { "label" : "C++" , "value" : 5 }, { "label" : "Python" , "value" : 6 }, { "label" : "C#" , "value" : 7 }, ] } ] }, { "label" : "StackOverFlow" , "value" : 8, "children" : [ { "label" : "Databases" , "value" : 9 }, { "label" : "Operating System" , "value" : 10, "children" : [ { "label" : "linux" , "value" : 11 }, { "label" : "Windows" , "value" : 12 } ] } ] }, { "label" : "Tutorial Point" , "value" : 13, "children" : [ { "label" : "Engineering Mathematics" , "value" : 14 }, { "label" : "Theory of Computation" , "value" : 15 } ] } ] return ( <div className= "App" > <h1 style={{ color: 'green' }} > w3wiki</h1> <h3>React Suite CheckTreePicker Disabled and ReadOnly</h3> <Label>Disabled: </Label> <CheckTreePicker disabled data={data} defaultValue={[2]} style={{ width: '50%' }} /> <br /> <hr /> <Label>Disabled option: </Label> <CheckTreePicker defaultExpandAll data={data} disabledItemValues={[1, 3, 13]} style={{ width: '50%' }} /> <br /> <hr /> </div> ); } |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output:
Example 2: In this example, we will learn about Uncheckable and readOnly
Javascript
import React from 'react' ; import CheckTreePicker from 'rsuite/CheckTreePicker' ; import 'rsuite/dist/rsuite.min.css' ; import { Label } from '@thumbtack/thumbprint-react' ; export default function App() { // Sample Options const data = [ { "label" : "w3wiki" , "value" : 1, "children" : [ { "label" : "Machine Learning" , "value" : 2 }, { "label" : "Data Structures" , "value" : 3, "children" : [ { "label" : "Java" , "value" : 4 }, { "label" : "C++" , "value" : 5 }, { "label" : "Python" , "value" : 6 }, { "label" : "C#" , "value" : 7 }, ] } ] }, { "label" : "StackOverFlow" , "value" : 8, "children" : [ { "label" : "Databases" , "value" : 9 }, { "label" : "Operating System" , "value" : 10, "children" : [ { "label" : "linux" , "value" : 11 }, { "label" : "Windows" , "value" : 12 } ] } ] }, { "label" : "Tutorial Point" , "value" : 13, "children" : [ { "label" : "Engineering Mathematics" , "value" : 14 }, { "label" : "Theory of Computation" , "value" : 15 } ] } ] return ( <div className= "App" > <h1 style={{ color: 'green' }} > w3wiki</h1> <h3>React Suite CheckTreePicker Disabled and ReadOnly</h3> <Label>Uncheckable: </Label> <CheckTreePicker defaultExpandAll data={data} uncheckableItemValues={[1, 5, 12]} style={{ width: '50%' }} /> <hr /> <Label>Read only: </Label> <CheckTreePicker readOnly data={data} defaultValue={[1]} style={{ width: '50%' }} /> <hr /> </div> ); } |
Output:
Reference: https://rsuitejs.com/components/check-tree-picker/#disabled-and-read-only
Contact Us