Tree control Collapse/Expand

[RachappaBellappa1]

Hi 

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... but expand collapse doesn't work, I tried this on developer edition 1.10, 1.13 but it's not working

[RachappaBellappa1]

@Jianxia any thoughts?

[TianWen]

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

[RachappaBellappa1]

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

[TianWen · Accepted solution]

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