add kbs

Author: filipKovachev

knowledge-base/examples/excel/excel-conditional-styling/main.jsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import {
+  ExcelExport,
+  ExcelExportColumn,
+  WorkbookOptions,
+} from '@progress/kendo-react-excel-export';
+
+import products from './products.json';
+
+const data = products;
+const modifiedData = data.map((item) => ({
+  ...item,
+}));
+
+const App = () => {
+  const _exporter = React.createRef<ExcelExport>();
+  const excelExport = () => {
+    save(_exporter);
+  };
+  const save = (component) => {
+    const options: WorkbookOptions = component.current.workbookOptions();
+    const rows = options.sheets[0].rows;
+
+    const dataMap = new Map(modifiedData.map((item) => [item.ProductID, item]));
+
+    rows.forEach((row) => {
+      if (row.type === 'data') {
+        const productID = row.cells[0].value;
+        const dataItem = dataMap.get(productID);
+
+        if (dataItem && dataItem.is_total) {
+          row.cells.forEach((cell) => {
+            cell.bold = true;
+          });
+        }
+      }
+    });
+
+    component.current.save(options);
+  };
+  return (
+    <div>
+      <button
+        className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
+        onClick={excelExport}
+      >
+        Export to Excel
+      </button>
+
+      <ExcelExport data={modifiedData} fileName="Products.xlsx" ref={_exporter}>
+        <ExcelExportColumn field="ProductID" title="Product ID" />
+        <ExcelExportColumn field="ProductName" title="Product Name" />
+      </ExcelExport>
+    </div>
+  );
+};
+
+ReactDOM.render(<App />, document.querySelector('my-app'));

knowledge-base/examples/layout/tilelayout-adapt-rowspan-content-dynamically/main.jsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { TileLayout } from "@progress/kendo-react-layout";
+import { Grid } from "@progress/kendo-react-grid";
+import products from "./products.json";
+const initialDataState = {
+  skip: 0,
+  take: 10,
+};
+const App = () => {
+  const [data, setData] = React.useState([
+    {
+      col: 1,
+      colSpan: 3,
+      rowSpan: 3,
+    },
+  ]);
+
+  const rowHeight = 200;
+
+  const calculateRowSpan = (contentHeight) => {
+    const minHeight = Math.max(contentHeight, rowHeight);
+    return Math.ceil(minHeight / rowHeight);
+  };
+
+  const adjustRowSpanBasedOnContent = () => {
+    const gridElement = document.querySelector(".k-grid");
+    const contentHeight = gridElement ? gridElement.clientHeight : 0;
+    const newRowSpan = calculateRowSpan(contentHeight);
+
+    setData((prevData) =>
+      prevData.map((item, index) =>
+        index === 0 ? { ...item, rowSpan: newRowSpan } : item
+      )
+    );
+  };
+
+  React.useEffect(() => {
+    adjustRowSpanBasedOnContent();
+  }, [products]);
+
+  const [page, setPage] = React.useState(initialDataState);
+  const [pageSizeValue, setPageSizeValue] = React.useState();
+  const pageChange = (event) => {
+    const targetEvent = event.targetEvent;
+    const take =
+      targetEvent.value === "All" ? products.length : event.page.take;
+    if (targetEvent.value) {
+      setPageSizeValue(targetEvent.value);
+    }
+    setPage({
+      ...event.page,
+      take,
+    });
+  };
+  const tiles = [
+    {
+      header: "Page Views",
+      body: (
+        <Grid
+          maxHeight={500}
+          data={products.slice(page.skip, page.take + page.skip)}
+        />
+      ),
+    },
+  ];
+  const handleReposition = (e) => {
+    setData(e.value);
+    console.log(e.value);
+  };
+  return (
+    <TileLayout
+      columns={4}
+      rowHeight={200}
+      positions={data}
+      gap={{
+        rows: 10,
+        columns: 10,
+      }}
+      items={tiles}
+      onReposition={handleReposition}
+    />
+  );
+};
+export default App;
+ReactDOM.render(<App />, document.querySelector("my-app"));

knowledge-base/excel-conditional-cell-styling.md

@@ -0,0 +1,37 @@
+---
+title: Conditional Cell Styling in ExcelExport
+description: This article provides guidance on how to apply conditional cell styling based on specific data conditions within the ExcelExport
+type: how-to
+page_title: Applying Conditional Cell Styling in the ExcelExport Component
+slug: excel-conditional-cell-styling
+tags: excel-export, conditional-styling, cell-formatting
+res_type: kb
+category: knowledge-base
+ticketid: 1633213
+---
+
+## 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
+
+I want to apply conditional cell styling in the ExcelExport component within my application. Specifically, I need to format cells as bold based on the presence of a `is_total` flag in the row data. However, the `is_total` flag should not be included in the exported Excel data.
+
+## Solution
+
+To achieve conditional cell styling in the ExcelExport, set a flag variable to the exported data and apply the required styles if the flag is set to `true`
+
+{% meta id:index height:330 %}
+{% embed_file excel/excel-conditional-styling.jsx preview %}
+{% endmeta %}

knowledge-base/tilelayout-adapt-rowspan-content-dynamically.md

@@ -0,0 +1,36 @@
+---
+title: Adapting rowSpan to Contents in TileLayout for React
+description: Learn how to dynamically adjust the rowSpan value in a TileLayout based on the contents' height.
+type: how-to
+page_title: Adapting rowSpan to Contents in TileLayout for React | KendoReact TileLayout
+slug: tilelayout-adapt-rowspan-content-dynamically
+tags: tilelayout, rowSpan, content, dynamic, dynamically
+res_type: kb
+---
+
+
+## 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
+I want to adapt the `rowSpan` value in a TileLayout based on the height of its contents. Currently, I have set the `colSpan` and `rowSpan` to a static number, but this results in white space when there is less data in the grid.
+
+## Solution
+
+To dynamically adjust the `rowSpan` value based on the content height, create a function that obtains the Grid height and recalculates it based on your needs.
+
+
+{% meta id height:500 %}
+{% embed_file layout/tilelayout-adapt-rowspan-content-dynamically/main.jsx preview %}
+{% endmeta %}