SharePoint

KendoReact enables you to add the KendoReact components to SharePoint framework (SPFx) projects.

Requirements

Use SPFx version 1.7 or later. Earlier SPFx versions do not support KendoReact version 16.x or later. Using earlier SPFx versions may result in errors and you may not be able to add KendoReact components to your SPFx project.

Installation

  1. Install and import the desired KendoReact components by using NPM or YARN. The components are written on TypeScript and when they are used in SPFx projects, provide integration and IntelliSense.

    npm install --save @progress/kendo-react-grid @progress/kendo-data-query @progress/kendo-react-inputs @progress/kendo-react-intl @progress/kendo-react-dropdowns @progress/kendo-react-dateinputs
  2. Install and import any of the following Kendo UI themes that are available:

    • Default

    • Material

    • Bootstrap

      npm install --save @progress/kendo-theme-default
      import '@progress/kendo-theme-default/dist/all.css';

Sample Project

For the complete sample project, refer to the GitHub repository on using the KendoReact Grid inside SPFx.

Troubleshooting

The following section provides solutions for issues you might encounter while using KendoReact in SPFx projects.

An error occurs when the project is deployed through the built CDN

Cause KendoReact uses a method from react-dom/server inside some of the components. The default Webpack configuration removes react-dom/server from the CDN build as it assumes that a CDN will not be used with server rendering.

Solution Explicitly add react-dom/server to config.json.

"externals": {
    "react-dom/server": "node_modules/react-dom/umd/react-dom-server.browser.production.min.js"
}

[An Error](#toc-an-error): Can't resolve…` error occurs during build time

Cause A source-map-loader is missing.

Solution Exclude the source-map-loader inside the gulpfile.js

jsx-no-run; build.configureWebpack.mergeConfig({ additionalConfiguration: (generatedConfiguration) => { generatedConfiguration.module.rules.map(rule => { if (rule.use.indexOf("source-map-loader") != -1) { rule.exclude = path.resolve(__dirname, "node_modules"); } }); return generatedConfiguration; } });

 /