javascripthtmlreactjskendo-uikendo-react-ui

Include Kendo React with Script Tag

I am trying to develop with Kendo React in a .NET Web Forms application. It looks like Kendo distributes their packages as a variety of JavaScript modules -- the dist folder in their node packages contains the following four subfolders:

I'm sure this is relatively painless to work with in some of the newer JavaScript systems, but I do not have access to utilities such as node.js to manage modules. I am trying to simply include a JavaScript file with a script tag, but so far have not had much luck. I get the following errors when trying to include @progress/kendo-react-common:

It looks like @TylerDahle has done something similar here: How to access kendo-react widgets when accessing the react dropdowns javascript by script instead of import? But I don't know where he gets his source from.

Is there any way to include a Kendo React script with a script tag?

Solution

  • This was posted by Progress Telerik admin Vasil here:

    Hello,

    The correct files in this case are the JS in the CDN folders. The 'string' is undefined error comes from missing 'prop-types'.

    Let me put here some runnable html page of the Calendar that just loads the required scripts. https://jsbin.com/sicaquqofi/3/edit?html,output

    Here is the code:

    <!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  <link rel="stylesheet" href="https://www.unpkg.com/@progress/kendo-theme-material@latest/dist/all.css">
  <script type="text/javascript" src="https://www.unpkg.com/prop-types@15.7.2/prop-types.min.js"></script>
  <script type="text/javascript" src="https://www.unpkg.com/@progress/kendo-react-intl/dist/cdn/js/kendo-react-intl.js"></script>
  <script type="text/javascript" src="https://www.unpkg.com/@progress/kendo-react-dateinputs/dist/cdn/js/kendo-react-dateinputs.js"></script>
  <script type="text/javascript" src="https://www.unpkg.com/react-transition-group@2.5.3/dist/react-transition-group.js"></script>
  <script type="text/javascript" src="https://www.unpkg.com/react-dom@16.8.2/umd/react-dom-server.browser.production.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      ReactDOM.render(
        <div>
           <KendoReactDateinputs.Calendar />
        </div>,
        document.getElementById('root')
      );
  </script>


  </body></html>

    We ship kendo-react-all package. That includes all other packages. https://unpkg.com/@progress/kendo-react-all@2.8.0/dist/cdn/js/kendo-react-all.js But in this case you will need to add additional scripts for the kendo-data-query and kendo-drawing. Because they are required by the pdf/excel export, that are included into the all package.

    Here is an example with kendo-react-all cdn script loaded. https://jsbin.com/cetejepamu/1/edit?html,output

    <!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script  src="https://www.unpkg.com/react-dom@16.8.2/umd/react-dom-server.browser.production.min.js"></script>
  <script src="https://www.unpkg.com/react-transition-group@2.5.3/dist/react-transition-group.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  <script src="https://www.unpkg.com/prop-types@15.7.2/prop-types.min.js"></script>

  <link rel="stylesheet" href="https://www.unpkg.com/@progress/kendo-theme-material@latest/dist/all.css">
  <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@progress/kendo-drawing@1.5.10/dist/cdn/js/kendo-drawing.js">


      </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

      ReactDOM.render(
        <div>
        <KendoReactAll.Grid data = {[{a:'1' , b:2},{a:'3' , b:4}]} />
        <br />
        <KendoReactAll.Calendar />

        </div>,
        document.getElementById('root')
      );
  </script>


  </body></html>

    Regards,
    Vasil
    Progress Telerik

    In particular, note the addition of the namespace before the component name (e.g. KendoReactAll.Calendar).