The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user. treeData
is a required prop that is expected to contain the data in the form of an array of objects. See code snippet for an example data array.
For the React version of the kit, the onSelect
prop returns an array of objects. This array contains all checked items irrespective of whether it is a parent, child or grandchild. Open the console on this example and check and uncheck checkboxes to see this is action!
For the Rails version of the kit, there is no onselect. The form submits as a array of strings, following the typical rails pattern of utilizing hidden inputs. The strings are the values of the selected items' ids. For example, ["103", "106", "107"].
import React from "react"; import MultiLevelSelect from 'playbook-ui' const treeData = [ { label: "Power Home Remodeling", value: "Power Home Remodeling", id: "powerhome1", expanded: true, children: [ { label: "People", value: "People", id: "people1", expanded: true, children: [ { label: "Talent Acquisition", value: "Talent Acquisition", id: "talent1", }, { label: "Business Affairs", value: "Business Affairs", id: "business1", children: [ { label: "Initiatives", value: "Initiatives", id: "initiative1", }, { label: "Learning & Development", value: "Learning & Development", id: "development1", }, ], }, { label: "People Experience", value: "People Experience", id: "experience1", }, ], }, { label: "Contact Center", value: "Contact Center", id: "contact1", children: [ { label: "Appointment Management", value: "Appointment Management", id: "appointment1", }, { label: "Customer Service", value: "Customer Service", id: "customer1", }, { label: "Energy", value: "Energy", id: "energy1", }, ], }, ], }, ]; const MultiLevelSelectDefault = (props) => { return ( <div> <MultiLevelSelect id='multiselect-default' onSelect={(selectedNodes) => console.log( "Selected Items", selectedNodes ) } treeData={treeData} /> </div> ) }; export default MultiLevelSelectDefault;
The returnAllSelected
or return_all_selected
prop can be used when users want data on all checked nodes from the dropdown, irrespective of whether it is a parent or child node.
NOTE: This variant also does not automatically uncheck the parent when any of the child nodes are unchecked. returnAllSelected
is set to false by default.
NOTE: For larger trees that may return many pill selections, you can optionally set input_display: "none"
(for Rails) or inputDisplay = "none"
(for React) to hide all pills within the input.
import React from "react"; import MultiLevelSelect from 'playbook-ui' const treeData = [ { label: "Power Home Remodeling", value: "Power Home Remodeling", id: "powerhome1", expanded: true, children: [ { label: "People", value: "People", id: "people1", children: [ { label: "Talent Acquisition", value: "Talent Acquisition", id: "talent1", }, { label: "Business Affairs", value: "Business Affairs", id: "business1", children: [ { label: "Initiatives", value: "Initiatives", id: "initiative1", }, { label: "Learning & Development", value: "Learning & Development", id: "development1", }, ], }, { label: "People Experience", value: "People Experience", id: "experience1", }, ], }, { label: "Contact Center", value: "Contact Center", id: "contact1", children: [ { label: "Appointment Management", value: "Appointment Management", id: "appointment1", }, { label: "Customer Service", value: "Customer Service", id: "customer1", }, { label: "Energy", value: "Energy", id: "energy1", }, ], }, ], }, ]; const MultiLevelSelectReturnAllSelected = (props) => { return ( <div> <MultiLevelSelect id="multi-level-select-return-all-selected" onSelect={(selectedNodes) => console.log("Selected Items with Return All Selected Data", selectedNodes) } returnAllSelected treeData={treeData} /> </div> ); }; export default MultiLevelSelectReturnAllSelected;
selected_ids
(Rails) / selectedIds
(React) is an optional prop that accepts an array of ids that, if present, will mark the corresponding nodes on the treeData as checked on page load.
Items that include checked:true
on the treeData itself will also be selected on page load, even without being passed to selectedIds
.
When an item is marked as checked on page load by any means, the dropdown will expand to show the checked items for easier accessibility.
import React from "react"; import MultiLevelSelect from 'playbook-ui' const treeData = [ { label: "Power Home Remodeling", value: "Power Home Remodeling", id: "powerhome1", expanded: true, children: [ { label: "People", value: "People", id: "people1", children: [ { label: "Talent Acquisition", value: "Talent Acquisition", id: "talent1", }, { label: "Business Affairs", value: "Business Affairs", id: "business1", children: [ { label: "Initiatives", value: "Initiatives", id: "initiative1", }, { label: "Learning & Development", value: "Learning & Development", id: "development1", }, ], }, { label: "People Experience", value: "People Experience", id: "experience1", }, ], }, { label: "Contact Center", value: "Contact Center", id: "contact1", children: [ { label: "Appointment Management", value: "Appointment Management", id: "appointment1", }, { label: "Customer Service", value: "Customer Service", id: "customer1", }, { label: "Energy", value: "Energy", id: "energy1", }, ], }, ], }, ]; const MultiLevelSelectSelectedIds = (props) => { return ( <div> <MultiLevelSelect id="multi-level-select-selected_ids" onSelect={(selectedNodes) => console.log("Selected Items with Return All Selected Data", selectedNodes) } returnAllSelected selectedIds={["energy1","talent1"]} treeData={treeData} /> </div> ); }; export default MultiLevelSelectSelectedIds;