const filterOperators = {
        text: [
          {
              text: "grid.filterContainsOperator",
              operator: "contains"
          },
          {
              text: "grid.filterNotContainsOperator",
              operator: "doesnotcontain"
          },
          {
              text: "grid.filterEqOperator",
              operator: "eq"
          },
          {
              text: "grid.filterNotEqOperator",
              operator: "neq"
          },
          {
              text: "grid.filterStartsWithOperator",
              operator: "startswith"
          },
          {
              text: "grid.filterEndsWithOperator",
              operator: "endswith"
          },
          {
              text: "Is Blank", // Custom text for "Is Blank"
              operator: "isempty, isnull"
          },
          {
              text: "Is Not Blank", // Custom text for "Is Not Blank"
              operator: "isnotempty, isnotnull"
          }
      ]
    };

import * as React from "react";
export const CellRender = (props) => {
    const dataItem = props.originalProps.dataItem;
    const cellField = props.originalProps.field;
    const inEditField = dataItem[props.editField || ""];
    const additionalProps =
        cellField && cellField === inEditField
            ? {
                ref: (td) => {
                    const input = td && td.querySelector("input");
                    const activeElement = document.activeElement;
                    if (
                        !input ||
                        !activeElement ||
                        input === activeElement ||
                        !activeElement.contains(input)
                    ) {
                        return;
                    }
                    if (input.type === "checkbox") {
                        input.focus();
                    } else {
                        input.select();
                    }
                },
            }
            : {
                onClick: () => {
                    props.enterEdit(dataItem, cellField);
                },
            };
    const clonedProps = {
        ...props.td.props,
        ...additionalProps,
    };
    return React.cloneElement(props.td, clonedProps, props.td.props.children);
};
export const RowRender = (props) => {
    const trProps = {
        ...props.tr.props,
        ...{
            onBlur: (e) => {
                    props.exitEdit()
            }
        }
    };
    return React.cloneElement(
        props.tr,
        {
            ...trProps,
        },
        props.tr.props.children
    );
};

const removeCell = (props) => {
    const { dataItem } = props;
    return (
        <td className="k-command-cell">
            <Button onClick={() => delete(dataItem)}><span className="k-icon k-font-icon k-i-close-outline k-icon-xl redIcon"></span></Button>
        </td>
    );
}

const customCellRender = (td, props) => (
    <CellRender
        originalProps={props}
        td={td}
        enterEdit={(dataItem, field) => setState(enterEdit(list, dataItem, field))}
        editField={EDIT_FIELD}
    />
);
const customRowRender = (tr, props) => (
    <RowRender
        originalProps={props}
        tr={tr}
        exitEdit={() => setState(exitEdit())}
        editField={EDIT_FIELD}
    />
);

const enterEdit = (list, dataItem, field) => {
    return list.map((item) => ({
        ...item,
        [EDIT_FIELD]: item.id=== dataItem.id? field : null,
    }));
};

const exitEdit = () => {
    return list.map((item) => ({
        ...item,
        [EDIT_FIELD]: null,
    }));
};

<Grid
    data={list}
    dataItemKey={"id"}
    total={list.length}
    cellRender={customCellRender}
    rowRender={customRowRender}
    onItemChange={itemChange}
    editField={EDIT_FIELD}
>
    <GridToolbar>
        <Button onClick={AddNewItem}><span className="k-icon k-font-icon k-i-plus-circle k-icon-xl greenIcon"></span> Add</Button>
    </GridToolbar>
    <Column field="Name" title="Name" editable={true} />
    <Column title="Delete" cells={{ data: removeCell, }} width="100px"></Column>
</Grid>

<TreeView
    data={processTreeViewItems(workspaceGroups.current, {
      select: select,
      check: check,
      expand: expand,
    })}
    focusIdField={"id"}
    draggable={true}
    expandIcons={true}
    onExpandChange={onItemExpansionChanged}
    aria-multiselectable={true}
    onItemClick={onLayerItemClicked}
    checkboxes={true}
    onCheckChange={onItemCheckedChanged}
/>

function App() {


    const [check, setCheck] = React.useState({
        ids: ["100"],
        idField: "id",
    });
    const [expand, setExpand] = useState({
        ids: ["PROJECT WORKSPACES (5)", "Site Access Plan (8)"],
        idField: "text",
    });
    const [select, setSelect] = useState({
        ids: ["100"],
        idField: "id",
    });

const onLayerVisibilityChanged = (event: TreeViewCheckChangeEvent) => {

console.info("tree node checked or unchecked!!!")
const settings = {
singleMode: false,
checkChildren: true,
checkParents: false,
};

debugger

     // if the UI checkbox is clicked, this value is false.
     // if the checkbox is unclicked, this value is true. It seems to be delayed.
     console.info(event.item.checked)

};

/**
 * The result of the [process]({% slug api_kendo-data-query_process %}) method applied to a data structure.
 */
export interface DataResult {
    /**
     * The data that will be rendered by the Grid as an array.
     */
    data: any[];
    /**
     * The total number of records that are available.
     */
    total: number;
}