Kendo React Treelist - Select/Deselect the checkboxes column's values' based on an external dropdown selection

Question

I'm having a shared component TreeList, something like below: TreeList.jsx

<KendoTreeList
        style={getStyle()}
        tableProps={{ ref: table => (thisTable = table) }}
        rowHeight={rowHeight}
        scrollable="virtual"
        data={processData()}
        expandField={EXPAND_FIELD}
        subItemsField={SUB_ITEMS_FIELD}
        onExpandChange={onExpandChange}
        sortable
        onSortChange={handleSortChange}
        sort={sort}
        columns={columnDefinitions}
        resizable
        onColumnResize={onColumnResize}
        rowRender={renderRow}
        dataItemKey={idField}
        columnMenuFilter={filter}
        onColumnMenuFilterChange={handleFilterChange}
        reorderable
        onColumnReorder={onColumnReorder}
        selectedField={selectedField}
        onSelectionChange={handleSelectionChange}
        onHeaderSelectionChange={handleHeaderSelectionChange}
      />

Which has the values accessed from the props and the methods for the checkboxes as implemented here in this demo: https://www.telerik.com/kendo-react-ui/components/treelist/selection/#toc-customizing-the-selection

Now, the selection and deselection are working fine in the normal scenario, but I'm unable to achieve this based on a value from an external dropdown. So, for example, I have an external dropdown with Option 1, Option 2, and Option 3. If the user has selected Option 1, the above component will receive its value as a prop from my Dropdown component, let's say selectedOption, and if I've selected few records on the treelist. Now, if I change my selection of the dropdown to Option 2, I wish that all the checkboxes should be deselected. I'm unable to achieve this.

Any suggestions will be helpful. TIA.

Your demo link is invalid – Zunayed Shahriar Apr 02 '21 at 14:08 — Zunayed Shahriar, Apr 02 '21 at 14:08
@ZunayedShahriar Updated the link. – Miral Kumbhani Apr 02 '21 at 14:37 — Miral Kumbhani, Apr 02 '21 at 14:37
What is your approach? – Zunayed Shahriar Apr 02 '21 at 14:51 — Zunayed Shahriar, Apr 02 '21 at 14:51

score 0 · Answer 1 · answered Apr 02 '21 at 16:10

I've added selectedOption as a prop for your TreeList Component.

App component:

import * as React from "react";
import * as ReactDOM from "react-dom";
import MyTreeList from "./TreeList";
import { DropDownList } from "@progress/kendo-react-dropdowns";
import { Label } from '@progress/kendo-react-labels';

class App extends React.Component {
  options = ["Option 1", "Option 2", "Option 3"];
  state = { selectedOption: '' };

  onChange = (e) => {
    this.setState({selectedOption: e.value});
  }

  render() {
    return (
      <div>
        <Label>Your option:&nbsp;</Label>
        <DropDownList data={this.options} onChange={(e) => this.onChange(e)}/>
        <br />
        <br />
        <MyTreeList selectedOption={this.state.selectedOption}/>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector("my-app"));

Using componentDidUpdate hook I've checked your selection and updated the list as you wanted.

TreeList Component:

import * as React from "react";
import {
  TreeList,
  mapTree,
  extendDataItem,
  TreeListSelectionCell,
  TreeListHeaderSelectionCell
} from "@progress/kendo-react-treelist";
import employees from "./data";

const subItemsField = "employees";
const expandField = "expanded";
const selectField = "selected";

export default class MyTreeList extends React.Component {
  state = {
    data: employees.slice(),
    expanded: [1, 2, 32],
    selected: []
  };

  handleRowClick = e => {
    const selected = e.dataItem.selected
      ? this.state.selected.filter(x => x !== e.dataItem.id)
      : [...this.state.selected, e.dataItem.id];

    this.setState({ selected });
  };

  onExpandChange = e => {
    this.setState({
      expanded: e.value
        ? this.state.expanded.filter(id => id !== e.dataItem.id)
        : [...this.state.expanded, e.dataItem.id]
    });
  };
  updateFields = dataArr => {
    const { expanded, selected } = this.state;
    return mapTree(dataArr, subItemsField, item =>
      extendDataItem(item, subItemsField, {
        expanded: expanded.includes(item.id),
        selected: selected.includes(item.id)
      })
    );
  };
  onSelectionChange = event => {
    this.changeSelection(event.dataItem);
  };

  changeSelection = dataItem => {
    const selected = dataItem.selected
      ? this.state.selected.filter(x => x !== dataItem.id)
      : [...this.state.selected, dataItem.id];

    this.setState({ selected });
  };

  onRowClick = event => {
    this.changeSelection(event.dataItem);
  };

  onHeaderSelectionChange = event => {
    const checked = event.syntheticEvent.target.checked;
    const selected = [];
    if (checked) {
      mapTree(this.state.data, subItemsField, item => {
        selected.push(item.id);
        return item;
      });
    }

    this.setState({ selected });
  };

  headerSelectionValue = () => {
    let allSelected = true;
    const selected = this.state.selected;
    mapTree(this.state.data, subItemsField, item => {
      allSelected = allSelected && selected.includes(item.id);
      return item;
    });
    return allSelected;
  };

  clearSelection() {
    this.setState({ selected: [] });
  }

  componentDidUpdate(prevProps) {
    if (prevProps.selectedOption !== this.props.selectedOption) {
      var selectedOption = this.props.selectedOption;
      switch (selectedOption) {
        case "Option 1":
          this.setState({ selected: [1, 2, 3] });
          break;
        case "Option 2":
          this.clearSelection();
          break;
        case "Option 3":
          break;
      }
    }
  }

  render() {
    return (
      <div>
        <TreeList
          style={{ maxHeight: "510px", overflow: "auto" }}
          data={this.updateFields(this.state.data)}
          selectedField={selectField}
          onSelectionChange={this.onSelectionChange}
          onHeaderSelectionChange={this.onHeaderSelectionChange}
          onRowClick={this.onRowClick}
          expandField={expandField}
          subItemsField={subItemsField}
          onExpandChange={this.onExpandChange}
          columns={[
            {
              field: "selected",
              width: "7%",
              headerSelectionValue: this.headerSelectionValue(),
              cell: TreeListSelectionCell,
              headerCell: TreeListHeaderSelectionCell
            },
            { field: "name", title: "Name", expandable: true, width: "31%" },
            { field: "position", title: "Position", width: "31%" },
            {
              field: "hireDate",
              title: "Hire Date",
              format: "{0:d}",
              width: "31%"
            }
          ]}
        />
      </div>
    );
  }
}

Working demo at StackBlitz.

Kendo React Treelist - Select/Deselect the checkboxes column's values' based on an external dropdown selection

1 Answers1