Questions on KendoReact Forum

1 answer

80 views

withRouter is no longer used in version 6 of react router

I am trying to use drawer and panelbar but now some hooks are used, Could you provide some example for the Drawer or PanelBar components? please

Drawer

PanelBar

answered on 27 Sep 2023

1 answer

475 views

npx create-kendoreact-app error

Hi,

I wanted to try kendo for out new project, but bumped into an error on the very first step.

Run this :

npx create-kendoreact-app

got this error on mac:

Initialized a git repository.

Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: ***********.0.1.0
npm ERR! Found: @progress/kendo-svg-icons@1.9.0
npm ERR! node_modules/@progress/kendo-svg-icons
npm ERR! @progress/kendo-svg-icons@"^1.1.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @progress/kendo-svg-icons@"^2.0.0" from @progress/kendo-react-buttons@5.19.0
npm ERR! node_modules/@progress/kendo-react-buttons
npm ERR! @progress/kendo-react-buttons@"^5.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:

Am I missing something?

Button

answered on 27 Sep 2023

1 answer

54 views

Hello, this is really not a question, but it is actually a bug that I discovered and possibly fixed, so I would like this to be included in the documentation.

Hello, this is really not a question, but it is actually a bug that I discovered and possibly fixed, so I would like this to be included in the documentation. If you use the paging functionality of Kendo-react-grid component or even go to this page: https://www.telerik.com/kendo-react-ui/components/grid/paging/ and check the first example on the official docs page, you will notice that when you click on the dropdown and select "All" so that you can see all the possible records on the grid in that single page, you won't be able to. The grid will display "No records available". So I faced the same issue when implementing pagination on this project and as soon as I would click on "All" I won't be able to see any records. So I debugged this and found the problematic code.

const pageChange = (event) => {
    const targetEvent = event.syntheticEvent;
    const take =
      targetEvent.value === "All" ? products.length : event.page.take;
    if (targetEvent.value) {
      setPageSizeValue(targetEvent.value);
    }
    setPage({
      ...event.page,
      take,
    });
  };

Here in the second line, where const targetEvent has been initialised with event.syntheticEvent, I changed it to event.targetEvent and this started working for me. I am not sure if it will work for all the people out there or if it is even the best solution, so in the meantime I get an official update from kendo react team, I will call it as a "workaround". I am using Chrome in case it matters. I submitted this as a question because I didn't know how to submit this as a bug to the official kendo team. Hope it helps, thanks!

Grid

answered on 27 Sep 2023

1 answer

130 views

Tri-State checkbox in TreeList

Hi,

how to implement tri-state checkboxes in tree list. which should be fully checked, or fully unchecked or partially checked.

Thanks.

TreeList

answered on 25 Sep 2023

2 answers

64 views

FooterCell doesn't work in DataGrid at all.

Hi. I faced a problem with rendering footerCell . It worked for me in version 3.18.0 but after update it doesn't work in versions 5.16.0 - 5.18.0.

Also I found out that it doesn't work in any your DataGrid examples if I addngi footerCell functionality.

FooterCell looks like :

footerCell={props => (<td className='k-table-td' colSpan={props.colSpan} style={props.style} role={'gridcell'}>Total: </td>)}

or

footerCell={() => <td>Total:</td>}

In my solution and in all your examples it crashes DataGrid rendering.

I attached screenshot from my solution, but the same bihavior if I adding this lines of code in any your example of DataGrid demo site.

Is it bug, or what am I doing wrong?

Grid

answered on 22 Sep 2023

0 answers

55 views

Apply styles on PDF with k-pdf-export and other classes

Hello Telerik team,

Hey, I am trying to apply styles on the exported PDFs but not globally to all tags.

Suppose I have some `p` elements that should have styles A and some other that should have styles B.

The following will not work.

.k-pdf-export .class-a p {

  border: 1px dashed rgb(194, 23, 23);

}

.k-pdf-export .class-b p {

  border: 1px dashed #aaa;

}

The selectors will not work. Relevant example:

https://stackblitz.com/edit/react-zhmi5y?file=app%2Fstyles.css

So my questions are:

1. Are the other classes removed?

2. How can I achieve what I need?

3. If this is not supported as of now are there any plans to consider supporting it?

Thanks!

Grid

PDF Viewer

asked on 21 Sep 2023

0 answers

92 views

How to remove hours within a day in Scheduler week view?

I want my scheduler (in week mode) to have as many rows as there are users (Y-axis) and then each day of the week would form a cell for each user where the events would be shown. Currently, I'm struggling to understand how to change all day and hours to just a day containing all events regardless of the hours.
I've attached a picture for a better understanding of my goal

Scheduler

asked on 21 Sep 2023

1 answer

88 views

How to have a stacked bar chart represent time?

I have a stacked bar chart that I want to use to emulate changes in activity. Say the chart spans 30 minutes. I want the stacks to show when each category changed activity and for how long. For example, Zone 4 Cell 10 might be active for 5 minutes, inactive for 10 minutes and then active again for 15 minutes. Zone 4 Cell 20 might have a very different activity timeline. All activities are known (eg "active", shown below as green). An example is shown below.

Is there a way to achieve this with the basic stack chart library available in Kendo React? If so, how should the data be structured to be able to achieve this?

Charts

answered on 20 Sep 2023

1 answer

195 views

Avatar defaultProps Error

When I add an Avatar component:

```

```

I get this error:

```

hot-reloader-client.js:163 [Fast Refresh] rebuilding
app-index.js:31 Warning: Avatar: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
at Avatar (webpack-internal:///(app-pages-browser)/./node_modules/@progress/kendo-react-layout/dist/es/card/Avatar.js:23:84)
at NoSSR (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/shared/lib/lazy-dynamic/dynamic-no-ssr.js:29:11)
at Suspense
at LoadableComponent
at div
at eval (webpack-internal:///(app-pages-browser)/./node_modules/@progress/kendo-react-layout/dist/es/appbar/AppBarSection.js:48:26)
at div
at eval (webpack-internal:///(app-pages-browser)/./node_modules/@progress/kendo-react-layout/dist/es/appbar/AppBar.js:55:26)
at NoSSR (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/shared/lib/lazy-dynamic/dynamic-no-ssr.js:29:11)
at Suspense
at LoadableComponent
at Home (webpack-internal:///(app-pages-browser)/./app/page.tsx:57:64)
at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:240:11)
at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:337:11)
at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11)
at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:151:9)
at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:226:11)
at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:347:11)
at body
at html
at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:11)
at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:326:11)
at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:147:11)
at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:82:9)
at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11)
at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:417:13)
at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:123:11)
at RSCComponent
at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:139:11)
window.console.error @ app-index.js:31
console.error @ hydration-error-info.js:45
overrideMethod @ console.js:213
printWarning @ react-dom.development.js:94
error @ react-dom.development.js:68
validateFunctionComponentInDev @ react-dom.development.js:15848
mountLazyComponent @ react-dom.development.js:15616
beginWork$1 @ react-dom.development.js:17316
beginWork @ react-dom.development.js:25675
performUnitOfWork @ react-dom.development.js:24526
workLoopConcurrent @ react-dom.development.js:24512
renderRootConcurrent @ react-dom.development.js:24468
performConcurrentWorkOnRoot @ react-dom.development.js:23339
workLoop @ scheduler.development.js:261
flushWork @ scheduler.development.js:230
performWorkUntilDeadline @ scheduler.development.js:534
Show 1 more frame
Show less

```

How do I stop it?

Avatar

answered on 19 Sep 2023

1 answer

67 views

Dropdowntree's options box over the height

when option have too much, the option box have not auto hidden and over the farther component height, wispy-butterfly-v83vzx - CodeSandbox, have any props to set the atrr?