Merge pull request #2127 from telerik/march-kb-articles

KB articles for PDF server proxy, Grid row colors, and Next.js theme switcher

knowledge-base/examples/grid/grid-row-colors/alternate-colors/main.jsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Grid, GridColumn } from '@progress/kendo-react-grid';
+import products from './products.json';
+const App = () => {
+  return (
+    <div>
+      <Grid
+        style={{
+          height: '400px',
+        }}
+        data={products}
+      >
+        <GridColumn field="ProductID" title="ID" width="40px" locked />
+        <GridColumn field="ProductName" title="Name" width="250px" />
+        <GridColumn field="Category.CategoryName" title="CategoryName" />
+        <GridColumn field="UnitPrice" title="Price" />
+        <GridColumn field="UnitsInStock" title="In stock" />
+      </Grid>
+      <style>
+        {`
+     
+     .k-grid .k-table-row {
+       background: lightblue;
+     }
+      .k-grid .k-table-row.k-table-alt-row {
+        background: red;
+      }
+
+      .k-grid .k-table .k-grid-content-sticky {
+        background: lightblue;
+      }
+      .k-master-row.k-table-alt-row .k-grid-content-sticky {
+        background: red;
+      }
+      `}
+      </style>
+    </div>
+  );
+};
+ReactDOM.render(<App />, document.querySelector('my-app'));

knowledge-base/examples/grid/grid-row-colors/single-row-color/main.jsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { Grid, GridColumn } from "@progress/kendo-react-grid";
+import products from "./products.json";
+const App = () => {
+  return (
+    <div>
+      <Grid
+        style={{
+          height: "400px",
+        }}
+        data={products}
+      >
+        <GridColumn field="ProductID" title="ID" width="40px" locked />
+        <GridColumn field="ProductName" title="Name" width="250px" />
+        <GridColumn field="Category.CategoryName" title="CategoryName" />
+        <GridColumn field="UnitPrice" title="Price" />
+        <GridColumn field="UnitsInStock" title="In stock" />
+      </Grid>
+      <style>
+    {`
+    .k-grid .k-table-row:nth-child(2) {
+      background: lightblue;
+    }
+    `}
+      </style>
+    </div>
+  );
+};
+ReactDOM.render(<App />, document.querySelector("my-app"));

knowledge-base/grid-alternate-row-colors.md

@@ -0,0 +1,87 @@
+---
+title: Alternate the KendoReact Data Grid row colors with CSS
+description: An example on how to alternate the row colors of the KendoReact Data Grid.
+type: how-to
+page_title: Alternate row colors - KendoReact Grid
+slug: grid-alternate-row-colors
+tags: grid, locked, row color, row, locked column color
+ticketid: 1622261
+res_type: kb
+category: knowledge-base
+---
+
+## Environment
+
+<table>
+	<tbody>
+		<tr>
+			<td>Product Version</td>
+			<td>7.3.0</td>
+		</tr>
+		<tr>
+			<td>Product</td>
+			<td>Progress® KendoReact</td>
+		</tr>
+	</tbody>
+</table>
+
+## Description
+
+I want to alternate the Grid row colors. In addition, I also want to apply this color to the rows that belong to [locked]({% slug api_grid-gridcolumnprops %}#toc-locked) columns.
+
+## Solution
+
+For changing the row, you can use the `.k-grid .k-table-row` class, and `.k-grid .k-table-row.k-table-alt-row` for the alt rows. As for the rows that are in locked columns, use the `.k-grid .k-table .k-grid-content-sticky` and `.k-master-row.k-table-alt-row .k-grid-content-sticky` classes.
+
+As an example, the following will set the background of the alt rows to `red` and the normal rows to `lightblue`. This will also be applied to the rows of the `ProductID` column that is locked because .
+
+```jsx
+<div>
+  <Grid
+    style={{
+      height: "400px",
+    }}
+    data={products}
+  >
+    <GridColumn field="ProductID" title="ID" width="40px" locked={true} />
+    <GridColumn field="ProductName" title="Name" width="250px" />
+    <GridColumn field="Category.CategoryName" title="CategoryName" />
+    <GridColumn field="UnitPrice" title="Price" />
+    <GridColumn field="UnitsInStock" title="In stock" />
+  </Grid>
+  <style>
+    {`
+    .k-grid .k-table-row {
+        background: lightblue;
+    }
+    .k-grid .k-table-row.k-table-alt-row {
+        background: red;
+    }
+    .k-grid .k-table .k-grid-content-sticky {
+        background: lightblue;
+    }
+    .k-master-row.k-table-alt-row .k-grid-content-sticky {
+        background: red;
+    }
+    `}
+  </style>
+</div>
+```
+
+{% meta id:index height:480 %}
+{% embed_file grid-row-colors/alternate-colors/main.jsx preview %}
+{% embed_file shared/products.json %}
+{% endmeta %}
+
+You can also set the background color to specific rows using the [nth-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child) pseudo class.
+
+```css
+.k-grid .k-table-row:nth-child(2) {
+  background: lightblue;
+}
+```
+
+{% meta id:index height:480 %}
+{% embed_file grid-row-colors/single-row-color/main.jsx preview %}
+{% embed_file shared/products.json %}
+{% endmeta %}

knowledge-base/nextjs-theme-switcher.md

@@ -0,0 +1,72 @@
+---
+title: Next.js Theme Switcher
+description: An example on how to implement a Kendo theme switcher with Next.js.
+type: how-to
+page_title: Change between the kendo themes in Next.js - KendoReact
+slug: nextjs-theme-switcher
+tags: nextjs, theme switcher, kendo themes switcher, nextjs theme switcher
+ticketid: 1624402
+res_type: kb
+category: knowledge-base
+---
+
+## Environment
+
+<table>
+    <tbody>
+	    <tr> 
+	    	<td>Product Version</td>
+	    	<td>7.3.0</td>
+	    </tr>
+	    <tr>
+	    	<td>Product</td>
+	    	<td>Progress® KendoReact</td>
+	    </tr>
+    </tbody>
+</table>
+
+## Description
+
+I want to implement a theme switcher that changes between all the different kendo [theme swatches](https://www.telerik.com/design-system/docs/themes/customization/swatches/) in KendoReact.
+
+## Solution
+
+You can achieve this using CDN imports for the themes. Basically, in the main `layout.js` file, add the link to the default main swatch inside the head element. In addition, the `ThemeSwitcher` component can be added in the body, where this will always render it no matter the route.
+
+```jsx
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <link
+          rel="stylesheet"
+          data-kendo="true"
+          href={`https://cdn.kendostatic.com/themes/7.2.1/default/default-main.css`}
+        />
+      </head>
+      <body className="k-body">
+        <ThemeSwitcher />
+        {children}
+      </body>
+    </html>
+  );
+}
+```
+
+For the ThemeSwitcher, the most convenient component is the KendoReact [DropDownList]({% slug dropdownlist_overview %}) component. This is because it supports [grouping]({% slug dropdownlist_overview %}), rendering [custom items]({% slug dropdownlist_custom-rendering %}), and [binding]({% dropdownlist_binding %}) its data to an array of objects.
+
+Basically, the main idea in this `ThemeSwitcher` component is to change the `href` attribute of the link in the onChange event handler of the DropDownList using `link.setAttribute`.
+
+```jsx
+const handleChange = (event) => {
+  const link = document.head.querySelector("link[data-kendo");
+  if (link) {
+    link.setAttribute(
+      "href",
+      `https://cdn.kendostatic.com/themes/7.2.1/${event.target.value.swatch}.css`
+    );
+  }
+};
+```
+
+This approach is demonstrated in [this StackBlitz example](https://stackblitz.com/edit/stackblitz-starters-ajmsqv?description=The%20React%20framework%20for%20production&file=app%2Fcomponents%2FThemeSwitcher.jsx&title=Next.js%20Starter).

knowledge-base/pdfexport-setup-proxy.md

@@ -0,0 +1,119 @@
+---
+title: How can I implement a server proxy in the KendoReact PDFExport with Express.js
+description: An example of how to configure a proxy in the KendoReact PDFExport.
+type: how-to
+page_title: implement a server proxy - KendoReact DropDownList
+slug: pdfexport-server-proxy
+tags: pdfexport, proxy, proxyurl, forceproxy, server proxy
+ticketid: 1618904
+res_type: kb
+category: knowledge-base
+---
+
+## Environment
+
+<table>
+    <tbody>
+	    <tr>
+	    	<td>Product Version</td>
+	    	<td>7.3.0</td>
+	    </tr>
+	    <tr>
+	    	<td>Product</td>
+	    	<td>Progress® KendoReact</td>
+	    </tr>
+    </tbody>
+</table>
+
+## Description
+
+I need to configure a server proxy using [Express.js](https://expressjs.com/)(Node.js) in the PDFExport component to download PDFs in browsers like Internet Explorer 9 and Safari. This is because these browsers do not support saving the exported PDF file.
+
+## Solution
+
+### Client-side application
+
+In your React application, render the PDFExport component settings its [forceProxy]({% slug api_pdfexport_pdfexportprops %}#toc-forceproxy) prop to true and [proxyURL]({% slug api_pdfexport_pdfexportprops %}#toc-proxyurl) to `http://localhost:4000/export`. Port 4000 is the where we will be running our Express.js project while `export` is the API route that will handle this proxy.
+
+```jsx
+import * as React from "react";
+import { PDFExport } from "@progress/kendo-react-pdf";
+import { Button } from "@progress/kendo-react-buttons";
+import { Grid, GridColumn as Column } from "@progress/kendo-react-grid";
+import products from "./products.json";
+
+const App = () => {
+  const container = React.useRef(null);
+  const pdfExportComponent = React.useRef(null);
+  const exportPDFWithComponent = () => {
+    if (pdfExportComponent.current) {
+      pdfExportComponent.current.save();
+    }
+  };
+  return (
+    <div>
+      <div className="example-config">
+        <Button onClick={exportPDFWithComponent}>Export with component</Button>
+      </div>
+      <div className="border rounded p-2">
+        <PDFExport
+          ref={pdfExportComponent}
+          forceProxy={true}
+          proxyURL="http://localhost:4000/export"
+          paperSize="auto"
+          margin={40}
+          fileName={`Report for ${new Date().getFullYear()}`}
+          author="KendoReact Team"
+        >
+          <div ref={container}>
+            <h3 className="text-center">Monthly report</h3>
+            <hr className="k-hr" />
+            <Grid
+              style={{
+                maxHeight: "400px",
+              }}
+              data={products.slice(0, 5)}
+            >
+              <Column field="ProductID" title="ID" width="40px" />
+              <Column field="ProductName" title="Name" width="250px" />
+              <Column field="Category.CategoryName" title="CategoryName" />
+              <Column field="UnitPrice" title="Price" width="80px" />
+              <Column field="UnitsInStock" title="In stock" width="80px" />
+            </Grid>
+          </div>
+        </PDFExport>
+      </div>
+    </div>
+  );
+};
+
+export default App;
+```
+
+### Express.js application
+
+1. Setup an Express.js project by following their [getting started](https://expressjs.com/en/starter/installing.html) article.
+2. Add the following code to "app.js" or "index.js" depending on the entry point of your Node.js project.
+
+```jsx
+const express = require("express");
+const cors = require("cors");
+var bodyParser = require("body-parser");
+var XLSX = require("xlsx");
+const app = express();
+app.use(bodyParser.json());
+app.use(bodyParser.urlencoded({ extended: false }));
+// allow cross-origin requests
+app.use(cors());
+
+app.post("/export", (request, response) => {
+  let file = XLSX.read(request.body.base64, { type: "base64" });
+  XLSX.writeFile(file, "my.xlsx");
+});
+
+app.listen(4000, () => {
+  console.log("now listening for requests on port 4000");
+});
+```
+
+In `app.post`, we are returning `request.body.base64` that is received after exporting the PDFExport component. You now have access to the content of the PDF file on the server. After this, you can use the `XLSX` library to download the file. You can also use the Kendo [File Saver]({% slug file_saver %}) package.