Merge pull request #1918 from telerik/kb-grid-custom-expand-update

docs(grid): Updating custom expand-collapse cell KB

knowledge-base/custom-expand-collapse-column.md

@@ -30,11 +30,16 @@ How can I have control over the expand/collapse column of the KendoReact Grid an
 
 To modify the expand/collapse column of the Grid:
 
-1. Create a custom column that is bound to the expanded field.
-1. Show the icons conditionally.
+1. Remove the onExpandChange event handler from the Grid
+1. Create a custom column that is bound to a custom expand field (different from the expandField set to the Grid).
+1. Show the icons conditionally within the custom cell.
+1. On click of the icons, trigger the onChange from the cell props, which will trigger the onItemChange event of the Grid
+1. Within the onItemChange of the Grid, when the field is the custom expand field, change the expanded field state
 
-For more information, refer to the following props:
-* [`cell`]({% slug api_grid_gridcolumnprops %}#toc-cell)
-* [`headerCell`]({% slug api_grid_gridcolumnprops %}#toc-headercell)
 
-For the full implementation of the suggested approach, refer to the [demo on creating a custom expand/collapse column in the KendoReact Grid](https://stackblitz.com/edit/react-abh1id-pwtfuf?file=app/main.jsx).
+Following is an example demonstrating this approach:
+
+{% meta id height:540 %}
+{% embed_file grid/custom-expand-collapse-column/main.jsx preview %}
+{% embed_file shared/products.json %}
+{% endmeta %}

knowledge-base/examples/grid/custom-expand-collapse-column/main.jsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
+import products from './products.json';
+import { IconWrap } from '@progress/kendo-react-common';
+import { minusIcon, plusIcon } from '@progress/kendo-svg-icons';
+const DetailComponent = (props) => {
+  const dataItem = props.dataItem;
+  return (
+    <p>
+      <strong>In Stock:</strong> {dataItem.UnitsInStock} units
+    </p>
+  );
+};
+
+const expandCell = (props) => {
+  console.log(props);
+  return (
+    <td {...props.tdProps}>
+      <a
+        onClick={(e) => {
+          e.preventDefault();
+          if (props.onChange) {
+            props.onChange({
+              dataItem: props.dataItem,
+              dataIndex: props.dataIndex,
+              syntheticEvent: e,
+              field: 'expanded_custom',
+              value: !props.dataItem['expanded'],
+            });
+          }
+        }}
+        href="#"
+        tabIndex={-1}
+      >
+        <IconWrap
+          name={props.dataItem['expanded'] ? 'minus' : 'plus'}
+          icon={props.dataItem['expanded'] ? minusIcon : plusIcon}
+        />
+      </a>
+    </td>
+  );
+};
+const App = () => {
+  const [data, setData] = React.useState(products);
+  const onItemChange = (event) => {
+    //This is for the expand only
+    if (event.field == 'expanded_custom') {
+      let newData = data.map((item) => {
+        if (item.ProductID === event.dataItem.ProductID) {
+          item.expanded = !event.dataItem.expanded;
+        }
+
+        return item;
+      });
+      setData(newData);
+    }
+
+    //Add standard onItemChange here
+  };
+  return (
+    <Grid
+      data={data}
+      detail={DetailComponent}
+      style={{
+        height: '400px',
+      }}
+      expandField="expanded"
+      onItemChange={onItemChange}
+    >
+      <Column
+        field="expanded"
+        title=" "
+        width="50px"
+        cells={{ data: expandCell }}
+        editable={false}
+      />
+      <Column field="ProductName" title="Product" width="300px" />
+      <Column field="ProductID" title="ID" width="50px" />
+      <Column field="UnitPrice" title="Unit Price" width="100px" />
+      <Column field="QuantityPerUnit" title="Qty Per Unit" />
+    </Grid>
+  );
+};
+ReactDOM.render(<App />, document.querySelector('my-app'));