spfx-controls-react TreeView

[gleasoncyclotron]

<TreeView
items={this.treeItems}
defaultExpanded={false}
selectionMode={TreeViewSelectionMode.Multiple}
selectChildrenIfParentSelected={true}
showCheckboxes={true}
treeItemActionsDisplayMode={TreeItemActionsDisplayMode.ContextualMenu}
defaultSelectedKeys={this.state.pkey} ------This State value
expandToSelected={true}
defaultExpandedChildren={true}
onSelect={this.onTreeItemSelect}
onExpandCollapse={this.onTreeItemExpandCollapse}
onRenderItem={this.renderCustomTreeItem} />

I'm trying to change the state in componentdidmount i.e this.setState ({ pkey: ['6'] }); but doesnot changing the value,
please provide me the solution asap.

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[Abderahman88]

Hi @gleasoncyclotron

What you can do, is add a state 'loading'. When everything is correctly loaded, you can set the state of pkey.

Example:

export interface ITreeViewTestState {
  pkey: string[];
  loading: boolean;
}

import * as React from 'react';
import styles from './TreeViewTest.module.scss';
import { ITreeViewTestProps, ITreeViewTestState } from './ITreeViewTestProps';
import { TreeView, ITreeItem, TreeItemActionsDisplayMode, TreeViewSelectionMode } from "@pnp/spfx-controls-react/lib/TreeView";
import { Spinner } from 'office-ui-fabric-react/lib/Spinner';
import { IIconProps } from 'office-ui-fabric-react/lib/Icon';

export default class TreeViewTest extends React.Component<ITreeViewTestProps, ITreeViewTestState> {
  private skypeCheckIcon: IIconProps = { iconName: 'SkypeCheck' };
  private treeitems = [
    {
      key: "R1",
      label: "Root",
      subLabel: "This is a sub label for node",
      iconProps: this.skypeCheckIcon,
      actions: [{
        title: "Get item",
        iconProps: {
          iconName: 'Warning',
          style: {
            color: 'salmon',
          },
        },
        id: "GetItem",
        actionCallback: async (treeItem: ITreeItem) => {
          console.log(treeItem);
        }
      }],
      children: [
        {
          key: "1",
          label: "Parent 1",
          selectable: false,
          children: [
            {
              key: "3",
              label: "Child 1",
              subLabel: "This is a sub label for node",
              actions: [{
                title: "Share",
                iconProps: {
                  iconName: 'Share'
                },
                id: "GetItem",
                actionCallback: async (treeItem: ITreeItem) => {
                  console.log(treeItem);
                }
              }],
              children: [
                {
                  key: "gc1",
                  label: "Grand Child 1",
                  actions: [{
                    title: "Get Grand Child item",
                    iconProps: {
                      iconName: 'Mail'
                    },
                    id: "GetItem",
                    actionCallback: async (treeItem: ITreeItem) => {
                      console.log(treeItem);
                    }
                  }]
                }
              ]
            },
            {
              key: "4",
              label: "Child 2",
              iconProps: this.skypeCheckIcon
            }
          ]
        },
        {
          key: "2",
          label: "Parent 2"
        },
        {
          key: "5",
          label: "Parent 3",
          disabled: true
        },
        {
          key: "6",
          label: "Parent 4",
          selectable: true
        }
      ]
    },
    {
      key: "R2",
      label: "Root 2",
      children: [
        {
          key: "8",
          label: "Parent 5"
        },
        {
          key: "9",
          label: "Parent 6"

        },
        {
          key: "10",
          label: "Parent 7"
        },
        {
          key: "11",
          label: "Parent 8"
        }
      ]
    },
    {
      key: "R3",
      label: "Root 3",
      children: [
        {
          key: "12",
          label: "Parent 9"
        },
        {
          key: "13",
          label: "Parent 10",
          children: [
            {
              key: "gc3",
              label: "Child of Parent 10",
              children: [
                {
                  key: "ggc1",
                  label: "Grandchild of Parent 10"
                }
              ]
            },
          ]
        },
        {
          key: "14",
          label: "Parent 11"
        },
        {
          key: "15",
          label: "Parent 12"
        }
      ]
    }
  ];

  constructor(props: ITreeViewTestProps) {
    super(props);

    this.state = {
      pkey: [],
      loading: true
    };
  }

  public componentDidMount() {
    this.setState({ loading: false, pkey: ['6'] });
  }

  private onTreeItemExpandCollapse(item: ITreeItem, isExpanded: boolean) {
    console.log((isExpanded ? "item expanded: " : "item collapsed: ") + item);
  }

  private onTreeItemSelect(items: ITreeItem[]) {
    console.log("items selected: " + items.length);
  }

  private renderCustomTreeItem(item: ITreeItem): JSX.Element {
    return (
      <span>
        {
          item.iconProps &&
          <i className={"ms-Icon ms-Icon--" + item.iconProps.iconName} style={{ paddingRight: '4px' }} />
        }
        {item.label}
      </span>
    );
  }

  public render(): React.ReactElement<ITreeViewTestProps> {
    return (
      this.state.loading ?
        <div><Spinner>Loading items ...</Spinner></div> :
        <div>
          <TreeView
            items={this.treeitems}
            defaultExpanded={false}
            selectionMode={TreeViewSelectionMode.Multiple}
            selectChildrenIfParentSelected={true}
            showCheckboxes={true}
            treeItemActionsDisplayMode={TreeItemActionsDisplayMode.ContextualMenu}
            defaultSelectedKeys={this.state.pkey}
            expandToSelected={true}
            defaultExpandedChildren={true}
            onSelect={this.onTreeItemSelect}
            onExpandCollapse={this.onTreeItemExpandCollapse}
            onRenderItem={this.renderCustomTreeItem} />
        </div>
    );
  }
}

[gleasoncyclotron]

Dear Team, Is it possible to change the Expand/Collapse icon of TreeView. Regards, Gleason

…

________________________________ From: Abderahman Moujahid <notifications@github.com> Sent: Monday, December 7, 2020 3:55 AM To: pnp/sp-dev-fx-controls-react <sp-dev-fx-controls-react@noreply.github.com> Cc: Gleason Philip <gleason.philip@cyclotron.com>; Mention <mention@noreply.github.com> Subject: Re: [pnp/sp-dev-fx-controls-react] spfx-controls-react TreeView (#753) Hi @gleasoncyclotron<https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fgleasoncyclotron&data=04%7C01%7Cgleason.philip%40cyclotron.com%7C2e0fc743902e401bb98d08d89a425ee0%7C6583636bd156492e86ceb8fccb790df1%7C0%7C0%7C637428957145158666%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=j5V4FmLLKIc7EpHIfpT5o36BPnT9Zk01GgNjOOgh1eM%3D&reserved=0> What you can do, is add a state 'loading'. When everything is correctly loaded, you can set the state of pkey. Example: export interface ITreeViewTestState { pkey: string[]; loading: boolean; } import * as React from 'react'; import styles from './TreeViewTest.module.scss'; import { ITreeViewTestProps, ITreeViewTestState } from './ITreeViewTestProps'; import { TreeView, ITreeItem, TreeItemActionsDisplayMode, TreeViewSelectionMode } from "@pnp/spfx-controls-react/lib/TreeView"; import { Spinner } from 'office-ui-fabric-react/lib/Spinner'; import { IIconProps } from 'office-ui-fabric-react/lib/Icon'; export default class TreeViewTest extends React.Component<ITreeViewTestProps, ITreeViewTestState> { private skypeCheckIcon: IIconProps = { iconName: 'SkypeCheck' }; private treeitems = [ { key: "R1", label: "Root", subLabel: "This is a sub label for node", iconProps: this.skypeCheckIcon, actions: [{ title: "Get item", iconProps: { iconName: 'Warning', style: { color: 'salmon', }, }, id: "GetItem", actionCallback: async (treeItem: ITreeItem) => { console.log(treeItem); } }], children: [ { key: "1", label: "Parent 1", selectable: false, children: [ { key: "3", label: "Child 1", subLabel: "This is a sub label for node", actions: [{ title: "Share", iconProps: { iconName: 'Share' }, id: "GetItem", actionCallback: async (treeItem: ITreeItem) => { console.log(treeItem); } }], children: [ { key: "gc1", label: "Grand Child 1", actions: [{ title: "Get Grand Child item", iconProps: { iconName: 'Mail' }, id: "GetItem", actionCallback: async (treeItem: ITreeItem) => { console.log(treeItem); } }] } ] }, { key: "4", label: "Child 2", iconProps: this.skypeCheckIcon } ] }, { key: "2", label: "Parent 2" }, { key: "5", label: "Parent 3", disabled: true }, { key: "6", label: "Parent 4", selectable: true } ] }, { key: "R2", label: "Root 2", children: [ { key: "8", label: "Parent 5" }, { key: "9", label: "Parent 6" }, { key: "10", label: "Parent 7" }, { key: "11", label: "Parent 8" } ] }, { key: "R3", label: "Root 3", children: [ { key: "12", label: "Parent 9" }, { key: "13", label: "Parent 10", children: [ { key: "gc3", label: "Child of Parent 10", children: [ { key: "ggc1", label: "Grandchild of Parent 10" } ] }, ] }, { key: "14", label: "Parent 11" }, { key: "15", label: "Parent 12" } ] } ]; constructor(props: ITreeViewTestProps) { super(props); this.state = { pkey: [], loading: true }; } public componentDidMount() { this.setState({ loading: false, pkey: ['6'] }); } private onTreeItemExpandCollapse(item: ITreeItem, isExpanded: boolean) { console.log((isExpanded ? "item expanded: " : "item collapsed: ") + item); } private onTreeItemSelect(items: ITreeItem[]) { console.log("items selected: " + items.length); } private renderCustomTreeItem(item: ITreeItem): JSX.Element { return ( <span> { item.iconProps && <i className={"ms-Icon ms-Icon--" + item.iconProps.iconName} style={{ paddingRight: '4px' }} /> } {item.label} </span> ); } public render(): React.ReactElement<ITreeViewTestProps> { return ( this.state.loading ? <div><Spinner>Loading items ...</Spinner></div> : <div> <TreeView items={this.treeitems} defaultExpanded={false} selectionMode={TreeViewSelectionMode.Multiple} selectChildrenIfParentSelected={true} showCheckboxes={true} treeItemActionsDisplayMode={TreeItemActionsDisplayMode.ContextualMenu} defaultSelectedKeys={this.state.pkey} expandToSelected={true} defaultExpandedChildren={true} onSelect={this.onTreeItemSelect} onExpandCollapse={this.onTreeItemExpandCollapse} onRenderItem={this.renderCustomTreeItem} /> </div> ); } } — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-controls-react%2Fissues%2F753%23issuecomment-739588128&data=04%7C01%7Cgleason.philip%40cyclotron.com%7C2e0fc743902e401bb98d08d89a425ee0%7C6583636bd156492e86ceb8fccb790df1%7C0%7C0%7C637428957145168661%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=9xtXHBl83PfZDC90Uji3dY2Ij59gMCg5fOwWL6ES%2FEs%3D&reserved=0>, or unsubscribe<https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAR37D6EGWGNIXW2UTM4QX63STQKV7ANCNFSM4UJCPPPA&data=04%7C01%7Cgleason.philip%40cyclotron.com%7C2e0fc743902e401bb98d08d89a425ee0%7C6583636bd156492e86ceb8fccb790df1%7C0%7C0%7C637428957145168661%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=Xc65db6x2m2CxNoRgSai9IRTVRasiqIcagZ2fFru0AA%3D&reserved=0>.

[AJIXuMuK]

Thank you @Abderahman88 for responding with the example.

@gleasoncyclotron - unfortunately, no. But you can create a separate enhancement issue.

[sumitdeyonline]

I am not able to select/deselect any other node after set the default node using defaultSelectedKeys

defaultSelectedKeys={['5678','1234']}