or
1 answer
148 views
Hello.
How to set the step in the slider so that the steps work even with drag and drop. When you click on the button, the values increase by [step], but not when you drag and drop.
Thanks.
Konstantin Dikov
Telerik team
answered
on
13 Oct 2022
1 answer
114 views
I am searching for a way to drag and drop events from outside the `Scheduler` context into the component (and potentially the other way around). How can I achieve that using KendoReact? I've stumbled upon this: Drag/Drop external item onto scheduler? in Kendo UI for jQuery | Telerik Forums, but it is based on jQuery and seems quite outdated.
Konstantin Dikov
Telerik team
answered
on
13 Oct 2022
0 answers
142 views
Why does the telerik.com react site only have input controls in the form?
Input controls are not always in the input form. Your example is too narrow.
I want to put a label inside the input form. It is a control type with an initial value linked.
Can you edit the source from the link below?
thank you
Input controls are not always in the input form. Your example is too narrow.
I want to put a label inside the input form. It is a control type with an initial value linked.
Can you edit the source from the link below?
thank you
https://stackblitz.com/edit/react-bbc32g?file=app%2Fmain.tsx
1 answer
104 views
I am in the process of upgrading React to v18 and KendoReact to v5 latest versions. The only issue I am having is with the PanelBar. We were using PanelBarUtils.mapItemsToComponents(items) and passing this to the children prop of the PanelBar. The current Kendo documentation says this is still valid, however it now results in a TypeScript error:
Type 'PanelBarItem[]' is not assignable to type 'ReactNode'.
Type 'PanelBarItem[]' is not assignable to type 'ReactFragment'.
The types returned by '[Symbol.iterator]().next(...)' are incompatible between these types.
Type 'IteratorResult<PanelBarItem, any>' is not assignable to type 'IteratorResult<ReactNode, any>'.
Type 'IteratorYieldResult<PanelBarItem>' is not assignable to type 'IteratorResult<ReactNode, any>'.
Type 'IteratorYieldResult<PanelBarItem>' is not assignable to type 'IteratorYieldResult<ReactNode>'.
Type 'PanelBarItem' is not assignable to type 'ReactNode'.
Type 'PanelBarItem' is missing the following properties from type 'ReactPortal': key, children, typets(2322)This can be observed in the demos for the PanelBar on the Kendo website, simply open the first Customisation demo in either CodeSandBox or StackBlitz and add @types/react as a dependency:
https://www.telerik.com/kendo-react-ui/components/layout/panelbar/customization/#toc-collections
Vessy
Telerik team
answered
on
11 Oct 2022
1 answer
370 views
Hello,
I have a problem to implement kendo material theme.
package.json:
webpack.config.js:
I have a problem to implement kendo material theme.
package.json:
"dependencies": {
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@fluentui/react": "^8.68.2",
"@fluentui/web-components": "^2.5.1",
"@mui/material": "^5.9.1",
"@pnp/common": "^2.13.0",
"@pnp/logging": "^3.3.2",
"@pnp/odata": "^2.13.0",
"@pnp/sp": "^3.3.2",
"@progress/kendo-data-query": "^1.6.0",
"@progress/kendo-drawing": "^1.17.1",
"@progress/kendo-licensing": "^1.2.2",
"@progress/kendo-react-animation": "^5.5.0",
"@progress/kendo-react-buttons": "^5.5.0",
"@progress/kendo-react-data-tools": "^5.5.0",
"@progress/kendo-react-dateinputs": "^5.5.0",
"@progress/kendo-react-dialogs": "^5.7.0",
"@progress/kendo-react-dropdowns": "^5.5.0",
"@progress/kendo-react-form": "^5.7.0",
"@progress/kendo-react-grid": "^5.5.0",
"@progress/kendo-react-inputs": "^5.5.0",
"@progress/kendo-react-intl": "^5.5.0",
"@progress/kendo-react-listbox": "^5.5.0",
"@progress/kendo-react-treeview": "^5.5.0",
"@progress/kendo-theme-material": "^5.6.0",
"antd": "^4.21.7",
"axios": "^0.27.2",
"bootstrap": "^4.3.1",
"concurrently": "^7.2.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"moment-timezone": "^0.5.34",
"node-sass": "^6.0.1",
"postcss-calc": "^8.2.4",
"react": "^18.2.0",
"react-bootstrap": "^2.4.0",
"react-dom": "^18.2.0",
"react-dual-listbox": "^2.2.0",
"react-router": "^6.3.0",
"react-router-dom": "^5.3.0",
"react-scripts": "3.1.1",
"redux": "^4.2.0",
"sp-pnp-js": "^3.0.10",
"sp-rest-proxy": "^3.3.3",
"style-loader": "^2.0.0",
"styled-components": "^4.3.2",
"uuid": "^8.3.2"
},
"devDependencies": {
"@babel/core": "^7.13.10",
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/preset-env": "^7.13.10",
"@babel/preset-react": "^7.12.13",
"babel-loader": "^8.2.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"body-parser": "1.19.0",
"css-loader": "^5.2.7",
"gulp-sass": "^5.1.0",
"html-webpack-plugin": "4.5.2",
"less": "^4.1.3",
"less-loader": "^5.0.0",
"postcss": "^8.4.16",
"postcss-loader": "^4.0.0",
"sass": "^1.55.0",
"sass-loader": "^10",
"webpack": "^4.39.1",
"webpack-cli": "^4",
"webpack-dev-server": "3.11.2"
},
webpack.config.js:
/// <binding BeforeBuild='Run - Development' />
/** @type {import('webpack').Configuration} */
const path = require("path");
const webpack = require("webpack"); // to access built-in plugins
const HtmlWebpackPlugin = require("html-webpack-plugin");
var config = {
// bundling mode
mode: "none",
watch: false,
devServer: {
contentBase: path.resolve(__dirname, "lib"),
},
// the app entry point is /src/index.js
entry: path.resolve(__dirname, "src", "index.js"),
output: {
// the output of the webpack build will be in /dist directory
path: path.resolve(__dirname, "lib"),
// the filename of the JS bundle will be bundle.js
filename: "index.js",
libraryTarget: "umd",
},
// file resolutions
resolve: {
extensions: [".js", ".css"],
},
// loaders
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: "babel-loader"
},
{
test: /\.css$/i,
use: ['css-loader', 'css-loader',
{
loader: 'postcss-loader',
options: {
precision: 10,
plugins: [
require('autoprefixer')(),
require('postcss-calc')()
]
}
},
// Compiles Sass to CSS
{
loader: 'sass-loader',
options: {
implementation: require('node-sass'),
// implementation: require('dart-sass'),
sassOptions: {
precision: 10,
// fiber: require('fibers')
}
}
}
],
},
{
test: /\.less$/i,
use: [
// compiles Less to CSS
"style-loader",
"css-loader",
"less-loader",
],
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
],
},
devtool: "source-map", //old value:none
plugins: [
new webpack.ProgressPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src", "index.html"),
}),
],
optimization: {
splitChunks: {
// include all types of chunks
chunks: "all",
},
},
};
module.exports = (env, argv) => {
if (argv.mode === "development") {
config.devtool = "source-map";
}
if (argv.mode === "production") {
config.devtool = "cheap-source-map";
}
return config;
};
Vessy
Telerik team
answered
on
10 Oct 2022
1 answer
110 views
Hello, I need a data grid with external form editing, sorting, grouping and filtering functions.
Please, do you have a template for such solution?
Please, do you have a template for such solution?
1 answer
115 views
Hello.
I am wondering if it is possible to have two series on a chart that are of different time frames.
For example, I have two data sets.
1. Has 365 data points (1 for each day)
2. Has 12 data points (1 for each month)
They are both over the same year
When I plot the chart, series 2 only aligns with the first 12 points on series 1. So it looks like 12 days instead of 12 months.
NOTE: I am able to use multiple ValueAxisItems to scale the Y values correctly for each, but the x axis does not scale correctly,
Hope this makes sense, Below is a visual representation.
Expected
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| | | | | |
Actual
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| | | | |
Vessy
Telerik team
answered
on
07 Oct 2022
1 answer
170 views
Hi,
is there a way to align the content of a Button? The content seems to be always horizontally centered but I need it to be left/start aligned.
Best regard,
Thomas
Vessy
Telerik team
answered
on
06 Oct 2022
1 answer
1.6K+ views
Hi, Subject says it all.
Why not support this functionality?
I want to use server date when [TODAY] button is clicked,
Konstantin Dikov
Telerik team
answered
on
06 Oct 2022
1 answer
67 views
Hi.
I have 2 Grid components sitting next to each other and I would like to sync the scrolling of both so that if I scroll with the one on top, the one on the bottom is scrolling too and vice versa.
I have setup an example here of what I tried so far without success:
https://stackblitz.com/edit/react-h86fcx-cfss5a?file=app%2Fmain.tsx
Any help would be appreciated.
Greetings,
Bernd
Konstantin Dikov
Telerik team
answered
on
06 Oct 2022
