Tree control Collapse/Expand

RachappaBellappa1 — Mon, 11 Mar 2024 15:39:41 GMT

I was trying to use List Tree Control, but the collapse expand is not working when i try to implement in the widget, I copied code from this article https://developers.arcgis.com/experience-builder/storybook/?path=/docs/components-jimu-ui-basic-list-tree-tree--docs but expand collapse doesn't work, I tried this on developer edition 1.10, 1.13 but it's not working

Re: Tree control Collapse/Expand

RachappaBellappa1 — Mon, 11 Mar 2024 20:15:12 GMT

@Jianxia any thoughts?

Re: Tree control Collapse/Expand

TianWen — Tue, 12 Mar 2024 01:28:55 GMT

Could you please share the snippet of how you use the component so that we can further investigate? Thank you!

Re: Tree control Collapse/Expand

RachappaBellappa1 — Tue, 12 Mar 2024 14:37:34 GMT

@TianWen I just copied the code snippet from storybook example and placed it inside the sample widget code. Please check the below screenshot

Re: Tree control Collapse/Expand

TianWen — Wed, 13 Mar 2024 09:11:41 GMT

Thanks for the screenshot!

1. The tree component is driven by data, and you can set default data initially.

2. Any interactions with the component will generate updated data, which will be returned via the update function.

You will then need to pass this updated data back to the component.

Please refer to the snippet below for details.

import { React, type AllWidgetProps } from 'jimu-core' import { type IMConfig } from '../config' import { Tree, TreeAlignmentType, TreeCollapseStyle, TreeStyle } from 'jimu-ui/basic/list-tree' const Widget = (props: AllWidgetProps<IMConfig>) => { const getItemsJson = () => { const myCommands = [ { label: 'Edit', iconProps: () => ({ icon: require('jimu-icons/svg/outlined/editor/edit.svg') }), action: (options) => { alert(`Edit fired for item: ${JSON.stringify(options.data.itemJsons, null, 2)}`) } } ] return { itemKey: 'root item for tree data entry', itemStateTitle: 'root item for tree data entry', itemChildren: [ { itemKey: 'dummy entity 1', itemStateTitle: 'dummy entity 1', isItemSelectable: true, itemStateChecked: true, itemStateCommands: myCommands, itemStateDetailContent: JSON.stringify({ itemStateCommands: myCommands.map(i => i.label) }), itemStateIcon: () => ({ icon: require('jimu-icons/svg/outlined/gis/map.svg') }) }, { itemKey: 'dummy entity 2', itemStateTitle: 'dummy entity 2', itemStateExpanded: true, itemStateCommands: myCommands.slice(1), itemStateDetailContent: JSON.stringify({ itemStateCommands: myCommands.slice(1).map(i => i.label) }), itemStateIcon: () => ({ icon: require('jimu-icons/svg/outlined/gis/map.svg') }), itemChildren: [ { itemKey: 'dummy entity 2.1', itemStateTitle: 'dummy entity 2.1', itemChildren: [ { itemKey: 'dummy entity 2.1.1', itemStateTitle: 'dummy entity 2.1.1', itemStateCommands: myCommands.slice(1) }, { itemKey: 'dummy entity 2.1.2', itemStateTitle: 'dummy entity 2.1.2' } ] }, { itemKey: 'dummy entity 2.2', itemStateTitle: 'dummy entity 2.2 (isItemSelectable = false)', isItemSelectable: false, itemChildren: [ { itemKey: 'dummy entity 2.2.1', itemStateTitle: 'dummy entity 2.2.1' } ] } ] } ] } } const [rootItemJson, setRootItemJson] = React.useState(getItemsJson()) return ( <div className="widget-demo jimu-widget m-2"> <p>Simple Widget</p> <p>exampleConfigProperty: {props.config.exampleConfigProperty}</p> <Tree size={'default'} collapseStyle={TreeCollapseStyle.PlusMinus} dndEnabled={false} treeAlignmentType={TreeAlignmentType.Typical} treeStyle={TreeStyle.Card} isMultiSelection={true} checkboxLinkage={true} rootItemJson={rootItemJson} onUpdateItem={(actionData, refComponent) => { if (actionData.changeItemJson) { const [nextRootItemJson] = actionData.itemJsons.slice(-1) setRootItemJson({ ...nextRootItemJson }) } }} /> </div> ) } export default Widget

topic Tree control Collapse/Expand in ArcGIS Experience Builder Questions

Tree control Collapse/Expand

Re: Tree control Collapse/Expand

Re: Tree control Collapse/Expand

Re: Tree control Collapse/Expand

Re: Tree control Collapse/Expand