Telerik Forums
KendoReact Forum
1 answer
428 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
1 answer
137 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?
Konstantin Dikov
Telerik team
 answered on 10 Oct 2022
1 answer
145 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
212 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.8K+ 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
91 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
1 answer
150 views

I am using a vertical timeline Scheduler and I am trying to figure something out. Is it possible to have additional columns for the resource to display other information (status, shift start, shift end, etc.)? If so, is it possible to sort by those columns? I am trying to do this with the Scheduler component, maybe a different component (Gantt) would be better for something like this?

I have attached a screenshot of what I have done so far with the scheduler. The columns would be between my name and the midnight time column.


Thanks in advance!
-Will

Filip
Telerik team
 answered on 30 Sep 2022
1 answer
110 views
Fails to pass Accessibility Insights for Web's Tab Stops automated test
DropDownList cannot be selected to option by keyboard
SplitButton can't open list via keyboard
MultiSelect cannot select or delete options via keyboard

Konstantin Dikov
Telerik team
 answered on 30 Sep 2022
1 answer
87 views

this is my code:

<MultiSelect label='T-shirt size' data={sports} onChange={onChange} value={value} />

 

Is there any way to fix this issue?

Vessy
Telerik team
 answered on 28 Sep 2022
1 answer
106 views

Hi , does kendo react grid supports grouping functionality also with OData services apart from sorting, filtering and pagination?

 

Konstantin Dikov
Telerik team
 answered on 28 Sep 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?