or
5 answers
127 views
Hello,
I can't try ReactKendo DataGrid component for my project (Tests before buy)
With others components like PanelBar, Calendar, etc.. :
I tried this code directly on my index.js
import React from 'react';
import ReactDOM from 'react-dom'
import { Grid, GridColumn } from "@progress/kendo-react-grid";
ReactDOM.render(
<div>
<Grid style={{ height: "400px" }}>
<GridColumn field="ProductID" title="ID" width="40px" />
<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>
</div>,
document.getElementById('my-app'));
my index.html :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<base href="%PUBLIC_URL%/" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
<script src="https://unpkg.com/@progress/kendo-date-math@dev/dist/cdn/js/kendo-date-math.js"></script>
<script src="https://unpkg.com/@progress/kendo-drawing@latest/dist/cdn/js/kendo-drawing.js"></script>
<script src="https://unpkg.com/@progress/kendo-react-intl@latest/dist/cdn/js/kendo-react-intl.js"></script>
<script src="https://unpkg.com/@progress/kendo-react-all@latest/dist/cdn/js/kendo-react-all.js"></script>
<title>MyTest</title>
</head>
<body>
<div id="my-app">
</div>
</body>
</html>
For compilation on VS2019 Pro 16.9.3 with node 14.17 (npm 6.14.13) :
I activated trial version of KendoReact for 30 days today via npx command line !
On Chrome and on Firefox browser, I have this error message :
my package.json :
My Packages Nuget list :
Very simple strangely !!!
And I have the same issue on VS Code last version too !!!!
Do you can help me to resolve this issue please ?
I need test this component before my order of ReactKendo !!!!
Thank you
1 answer
177 views
Hi,
Is it possible to add line marker to the legend, so that if we choose rectangle for marker style we get a little rectangle in the legend?
I can alter the text and color by customizing "labels" prop but it still shows just line, no matter what marker type is selected.
Regards,
Vladimir
1 answer
261 views
This is a very straightforward question, and I'm sure the answer is as well, but I can't seem to figure it out. I want to be able to draw a simple shape, in this case, a circle. Here is what I did:
RenderSurface.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Surface } from '@progress/kendo-drawing';
import drawCircle from './DrawCircle';
class RenderSurface extends React.Component {
surface;
componentDidMount() {
drawCircle(this.createSurface());
}
createSurface = () => {
const element = ReactDOM.findDOMNode(this);
this.surface = Surface.create(element);
return this.surface;
}
render() {
return (<div id="surface" />);
}
}
export default RenderSurface;
DrawCircle.jsx
import { geometry } from '@progress/kendo-drawing';
const { Circle } = geometry;
export default function drawCircle(surface) {
const circle = new Circle([100, 100], 80, {
stroke: { color: "red", width: 1 },
color: "rgb(255, 0, 0)",
});
surface.draw(circle);
}
App.js
import '@progress/kendo-theme-default/dist/all.css';
import './App.scss';
import React from 'react';
import RenderSurface from './components/RenderSurface';
function App() {
return (
<div className="App">
<RenderSurface/>
</div>
);
}
export default App;When I run this, I get the following error:
TypeError: _node_map__WEBPACK_IMPORTED_MODULE_4__.default[srcElement.nodeType] is not a constructor
I though it might have to do with bad import, but whatever I tried, it's always this error. What am I doing wrong?
Stefan
Telerik team
answered
on
30 Apr 2021
