Merge pull request #1860 from telerik/new-kb-jan2024

docs(grid): add merge duplicate rows and cells data kb
telerik · Jan 24, 2024 · f433452 · f433452
2 parents 3956a51 + d741aa6
commit f433452
Show file tree

Hide file tree

Showing 3 changed files with 256 additions and 0 deletions.
diff --git a/knowledge-base/examples/grid/merge-rows-and-cells/main.jsx b/knowledge-base/examples/grid/merge-rows-and-cells/main.jsx
@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
+import products from './products.json';
+
+const App = () => {
+  const [gridData, setGridData] = useState(products);
+  const gridRef = React.useRef(null);
+  const cellRender = (cell, props) => {
+    const { dataItem, field } = props;
+    let duplicate = false;
+    if (gridRef.current) {
+      const rowIndex = props.dataIndex;
+      const columns = gridRef.current.columns;
+      const colIndex = columns.findIndex((c) => c.field == props.field);
+
+      if (colIndex > 0) {
+        if (
+          dataItem[columns[colIndex].field] ==
+          dataItem[columns[colIndex - 1].field]
+        ) {
+          duplicate = true;
+        }
+      }
+      if (rowIndex > 0) {
+        if (
+          dataItem[props.field] ==
+          gridRef.current.props.data[rowIndex - 1][props.field]
+        ) {
+          duplicate = true;
+        }
+      }
+    }
+    let style = { ...cell.props.style };
+    if (typeof dataItem[props.field] == 'boolean') {
+      style.backgroundColor = dataItem[props.field] ? '#1fb542' : '#b51f2e';
+      style.color = dataItem[props.field] ? '#1fb542' : '#b51f2e';
+      style.border = 'none';
+    }
+
+    if (duplicate) {
+      return (
+        <td {...cell.props} style={style}>
+          {' '}
+        </td>
+      );
+    } else {
+      return <td {...cell.props} style={style}></td>;
+    }
+  };
+  return (
+    <div>
+      <Grid
+        ref={gridRef}
+        style={{
+          height: '500px',
+        }}
+        data={gridData}
+        cellRender={cellRender}
+      >
+        <Column field="ProductID" title="ID" width="60px" />
+        <Column field="ProductName" title="Name" width="250px" />
+        <Column field="CategoryName" title="CategoryName" />
+        <Column field="UnitPrice" title="Price" width="80px" />
+        <Column field="Discontinued" width="120px" />
+        <Column field="Discontinued2" width="120px" />
+      </Grid>
+    </div>
+  );
+};
+ReactDOM.render(<App />, document.querySelector('my-app'));
diff --git a/knowledge-base/examples/grid/merge-rows-and-cells/products.json b/knowledge-base/examples/grid/merge-rows-and-cells/products.json
@@ -0,0 +1,143 @@
+[
+    {
+      "ProductID": 1,
+      "ProductName": "Chai",
+      "SupplierID": 1,
+      "CategoryID": 1,
+      "QuantityPerUnit": "10 boxes x 20 bags",
+      "UnitPrice": 18.0,
+      "UnitsInStock": 39,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 10,
+      "Discontinued": false,
+      "Discontinued2": false,
+      "CategoryName": "Beverages"
+    },
+    {
+      "ProductID": 2,
+      "ProductName": "Chang",
+      "SupplierID": 1,
+      "CategoryID": 1,
+      "QuantityPerUnit": "24 - 12 oz bottles",
+      "UnitPrice": 19.0,
+      "UnitsInStock": 17,
+      "UnitsOnOrder": 40,
+      "ReorderLevel": 25,
+      "Discontinued": false,
+      "Discontinued2": false,
+      "CategoryName": "Beverages"
+    },
+    {
+      "ProductID": 3,
+      "ProductName": "Aniseed Syrup",
+      "SupplierID": 1,
+      "CategoryID": 2,
+      "QuantityPerUnit": "12 - 550 ml bottles",
+      "UnitPrice": 10.0,
+      "UnitsInStock": 13,
+      "UnitsOnOrder": 70,
+      "ReorderLevel": 25,
+      "Discontinued": false,
+      "Discontinued2": true,
+      "CategoryName": "Condiments"
+    },
+    {
+      "ProductID": 4,
+      "ProductName": "Chef Anton's Cajun Seasoning",
+      "SupplierID": 2,
+      "CategoryID": 2,
+      "QuantityPerUnit": "48 - 6 oz jars",
+      "UnitPrice": 22.0,
+      "UnitsInStock": 53,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": false,
+      "Discontinued2": true,
+      "CategoryName": "Condiments"
+    },
+    {
+      "ProductID": 5,
+      "ProductName": "Chef Anton's Gumbo Mix",
+      "SupplierID": 2,
+      "CategoryID": 2,
+      "QuantityPerUnit": "36 boxes",
+      "UnitPrice": 21.35,
+      "UnitsInStock": 0,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": true,
+      "Discontinued2": true,
+      "CategoryName": "Condiments"
+    },
+    {
+      "ProductID": 6,
+      "ProductName": "Grandma's Boysenberry Spread",
+      "SupplierID": 3,
+      "CategoryID": 2,
+      "QuantityPerUnit": "12 - 8 oz jars",
+      "UnitPrice": 25.0,
+      "UnitsInStock": 120,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 25,
+      "Discontinued": false,
+      "Discontinued2": true,
+      "CategoryName": "Condiments"
+    },
+    {
+      "ProductID": 7,
+      "ProductName": "Uncle Bob's Organic Dried Pears",
+      "SupplierID": 3,
+      "CategoryID": 7,
+      "QuantityPerUnit": "12 - 1 lb pkgs.",
+      "UnitPrice": 30.0,
+      "UnitsInStock": 15,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 10,
+      "Discontinued": false,
+      "Discontinued2": false,
+      "CategoryName": "Produce"
+    },
+    {
+      "ProductID": 8,
+      "ProductName": "Northwoods Cranberry Sauce",
+      "SupplierID": 3,
+      "CategoryID": 2,
+      "QuantityPerUnit": "12 - 12 oz jars",
+      "UnitPrice": 40.0,
+      "UnitsInStock": 6,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": false,
+      "Discontinued2": true,
+      "CategoryName": "Condiments"
+    },
+    {
+      "ProductID": 9,
+      "ProductName": "Mishi Kobe Niku",
+      "SupplierID": 4,
+      "CategoryID": 6,
+      "QuantityPerUnit": "18 - 500 g pkgs.",
+      "UnitPrice": 97.0,
+      "UnitsInStock": 29,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": true,
+      "Discontinued2": true,
+      "CategoryName": "Meat/Poultry"
+    },
+    {
+      "ProductID": 10,
+      "ProductName": "Ikura",
+      "SupplierID": 4,
+      "CategoryID": 8,
+      "QuantityPerUnit": "12 - 200 ml jars",
+      "UnitPrice": 31.0,
+      "UnitsInStock": 31,
+      "UnitsOnOrder": 0,
+      "ReorderLevel": 0,
+      "Discontinued": false,
+      "Discontinued2": false,
+      "CategoryName": "Seafood"
+    }
+  ]
+
diff --git a/knowledge-base/grid-merge-cells-and-rows-data.md b/knowledge-base/grid-merge-cells-and-rows-data.md
@@ -0,0 +1,42 @@
+---
+title: Merge Rows in the Grid
+description: An example on how to merge cells and rows data in the KendoReact Grid.
+type: how-to
+page_title: Merge Rows and Cells Data in the Grid - KendoReact Grid
+slug: merge-row-and-cell-in-the-grid
+tags: grid, rows, merge, cells
+res_type: kb
+category: knowledge-base
+---
+
+## Environment
+
+<table>
+    <tbody>
+	    <tr>
+	    	<td>Product Version</td>
+	    	<td>7.0.2</td>
+	    </tr>
+	    <tr>
+	    	<td>Product</td>
+	    	<td>Progress® KendoReact</td>
+	    </tr>
+    </tbody>
+</table>
+
+
+## Description
+
+How can I merge or group duplicate cells and rows data in the KendoReact Data Grid?
+
+## Solution
+
+For simple scenarios where the data needs to be merged for single column, rowSpan can be set to the TD elements within the cellRender of the Grid. However, due to limitations in how HTML table can rowSpan/colSpan, it is not possible to have different colSpan for rows that already have set rowSpan, so using colSpan and rowSpan for merging duplicate rows and cells data will not be possible and different approach must be used. 
+
+For this scenario, use a [`cellRender`]({% slug api_grid_gridprops %}#toc-cellrender) and compare the previous cell and previous row data to remove the content of the cell if it duplicate. You can also add different colors of the cell based on the values (suitable for boolean values for example), so they can be distinguished visually. 
+
+{% meta id:index height:760 %}
+{% embed_file grid/merge-rows-and-cells/main.jsx preview %}
+{% embed_file grid/merge-rows-and-cells/products.json %} 
+{% endmeta %}
+