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

 

 

 

 

TianWen

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