Telerik Forums
KendoReact Forum
0 answers
176 views

Hi. I'm trying to changing milliseconds part.

But, it's perfect only to display milliseconds part.

In other words, milliseconds part cannot be changed using mouse wheel or keyboard.

In addtion. cannot make milliseconds part be focused.

(date,hour,minute and second are working)

 

the format props of DateTimepicker is "yyyy-MM-dd HH:mm:ss .SSS"

the defaultValue and value props also is correct. Because displaying milliseconds is perfect.

 

 

@progress/kend-react-dateinputs: ^5.7.0

 

Pease. let me resolve this problem.

 

thanks.

 

 

 

n/a
Top achievements
Rank 1
 updated question on 17 Oct 2022
1 answer
173 views
I want users to be able to view PDFs on my website like Kendo UI for jQuery has (https://docs.telerik.com/kendo-ui/controls/PDF/PDFViewer/overview). Is this available in KendoReact? 
Konstantin Dikov
Telerik team
 answered on 16 Oct 2022
1 answer
283 views

Hi,

How to expand all nodes by default in treeList in react?

Can anyone give example how to achieve this?

Konstantin Dikov
Telerik team
 answered on 16 Oct 2022
1 answer
335 views

Hello.

I have some problems with popover. I also saw the demo.

1. If I use the default position (top) and anchor, the element (popover) is displayed lower than anchor by the full height. Use positionMode fixed didn't help.

2. I also need to use appendTo. If position is top, collision does not work properly.

3. If I use position bottom, the popover appears correctly, but the collision doesn't work at all.

Is there an example somewhere of a complex use of popover with appnedTo, anchor and collision? Are there any special css/js settings required? Because we use popover in a rather complex html structure.

 

Thanks.

Konstantin Dikov
Telerik team
 answered on 16 Oct 2022
1 answer
176 views

Hi Team, 

As my title says, Im trying to change style props of a drag/resize item, specifically the background color. My use case is that when an event is dragged or resized into an invalid time slot, I want the drag/resize item to become red.

After messing around with the SchedulerItem and SchedulerEditItem, the best I can do is to change both the SchedulerItem and DragItem colors if the slot is invalid, see my CustomItem, but I only want the dragItem to change. I tried setting the style on the dragItem in both the ScheduleItem and ScheduleEditItem with no success.

I see in the docs there is a SchedulerDrag component, but I cannot find how/where its used.

Side Note: If I log the output of `useSchedulerEditItemDragItemContext()` it logs an array with 3 elements, [dragItem, setDragItem, ???]  what the second function, because I cannot it an any docs

Thanks,
Grant

 

Konstantin Dikov
Telerik team
 answered on 15 Oct 2022
1 answer
157 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
123 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
151 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

 

https://stackblitz.com/edit/react-bbc32g?file=app%2Fmain.tsx

 

 

n/a
Top achievements
Rank 1
Iron
Iron
 asked on 13 Oct 2022
1 answer
112 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
391 views
Hello,
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
Narrow your results
Selected tags
Tags
+? more
Top users last month
Ambisoft
Top achievements
Rank 2
Iron
Pascal
Top achievements
Rank 2
Iron
Matthew
Top achievements
Rank 1
Sergii
Top achievements
Rank 1
Iron
Iron
Andrey
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Ambisoft
Top achievements
Rank 2
Iron
Pascal
Top achievements
Rank 2
Iron
Matthew
Top achievements
Rank 1
Sergii
Top achievements
Rank 1
Iron
Iron
Andrey
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?