Questions on KendoReact Forum

1 answer

247 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

107 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?

DropDownList

answered on 19 Sep 2023

1 answer

99 views

How to enable users to smoothly select data points when the line chart data is close.

Hi,
I am using kendo React Line chart in my project. When the line-chart data is close, the points will overlap, and the tooltip also will affect the user's selection of data. Do you have any good suggestions to solve this situation?
What I am currently thinking of is to filter the data by clicking on the legend, so that I can select points.

Looking forward to your reply, thanks in advance！

Y65b36 (forked) - StackBlitz

Regards,
Sunny Hu

Charts

General Discussions

answered on 19 Sep 2023

1 answer

260 views

How do I implement an SCSS variable change?

Where do the SCSS files get integrated into my app?

TabStrip

answered on 18 Sep 2023

1 answer

164 views

How to customise the minimize and restore icon of the dialog window?

Hi, i need to replace the minimise and restore icon. I tried using minimizeButton and restoreButton prop. but it seems the functionality doesnt work anymore. Is there a way to just change the icon without disrupting the functionality? Thanks in advance!

Here's the component.

https://www.telerik.com/kendo-react-ui/components/dialogs/window/

Dialog

Window

answered on 18 Sep 2023

1 answer

162 views

React Grid within Modal, select multiple rows and save

I am trying to implement the following and wondered if there is any documentation / examples for this:

On a page display a grid for "selected products".
When you click "add" you are shown a modal with another grid (data is products).
This grid has a checkbox column (https://www.telerik.com/kendo-react-ui/components/grid/selection/)
You can select one or more products and click save
The "selected products" grid within the page updates to show the additional selected products.

I'm wondering if there are examples of a grid integrated within a form modal. i.e. the form isn't editing the original data that is shown on the page, instead it is loading available products but I need to know what is selected to show this within the page. There are 2 data sources - the products that have been selected and the available products.

Form

Grid

Popup

answered on 18 Sep 2023

5 answers

566 views

Next.js Error Message

I've used your basic instructions to set up a Data Grid. However, I get an error when I add KendoReact's <Grid> component.

How do I get rid of this error?

Warning: Prop `style` did not match. Server: "border-width:0" Client: "null"
    at div
    at div
    at Header (webpack-internal:///(app-pages-browser)/./node_modules/@progress/kendo-react-grid/dist/es/header/Header.js:47:47)
    at div
    at Grid (webpack-internal:///(app-pages-browser)/./node_modules/@progress/kendo-react-grid/dist/es/Grid.js:154:28)
    at Home (webpack-internal:///(app-pages-browser)/./app/page.tsx:19:72)
    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)

Grid

answered on 18 Sep 2023

1 answer

179 views

Does Master-Detail Grids support exporting Excel containing subtables?

Hi,
I am using kendo React-Master-Detail Grids in my project. However, when using the export Excel function, only the main table is exported, and there are no subtables. Do we support exporting Excel containing subtables, and have the same hierarchical relationship as the table when previewing Excel?

Looking forward to your reply, thanks in advance！

R22hph (forked) - StackBlitz

Regards,
Sunny Hu

Excel Export

General Discussions

Grid

answered on 18 Sep 2023

2 answers

97 views

Editor - allow user to view an image in a lightbox or similar

Hi, I'm currently struggling with a feature request and wondering whether anyone has any suggestions for a good way to implement it.

We make use of the Editor control and allow users to insert images. Images appear as a thumbnail by setting the width on their inline style attribute.

Users would like some way of temporarily viewing the image, my thoughts are to perhaps have a CSS hover state that shows a small button which would display the full size image in a lightbox. (Might have to configure the Editor to not make use of iframe?)

Any suggestions would be greatly appreciated! Thanks.

Editor

answered on 15 Sep 2023

1 answer

302 views

Fill grid using flexbox with the rest of the space

In the following code, there is a div that contains two child divs. The first child div has a fixed height, and the bottom div contains the grid, and should fill the remaining space. With other components this approach works by using flexbox and the flex property, but the grid will ignore the flex: 1 and just overlays on the first child div.

What am I doing wrong?

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Grid, GridColumn, GridDataStateChangeEvent} from '@progress/kendo-react-grid';
import { DataResult, process, State } from '@progress/kendo-data-query';
import orders from './orders.json';
import { Order } from './interfaces';
const App = () => {
const [dataState, setDataState] = React.useState<State>({
skip: 0,
take: 20,
sort: [
{ field: 'orderDate', dir: 'desc' }
],
group: [
{ field: 'customerID' }
]
})
const [dataResult, setDataResult] = React.useState<DataResult>(process(orders, dataState))
const dataStateChange = (event: GridDataStateChangeEvent) => {
setDataResult(process(orders, event.dataState));
setDataState(event.dataState);
}
return (
<div style={{display: 'flex', flexDirection: 'column', height: '100%'}} >
<div style={{height: '60px', backgroundColor: 'blue'}}></div>
<div style={{flex: '1', height: '100%'}}>
<Grid
style={{ height: '100%' }}
sortable={true}
filterable={true}
groupable={true}
reorderable={true}
pageable={{ buttonCount: 4, pageSizes: true }}
data={dataResult}
{...dataState}
onDataStateChange={dataStateChange}
>
<GridColumn field="customerID" width="200px" />
<GridColumn field="orderDate" filter="date" format="{0:D}" width="300px" />
<GridColumn field="shipName" width="280px" />
<GridColumn field="freight" filter="numeric" width="200px" />
<GridColumn field="shippedDate" filter="date" format="{0:D}" width="300px" />
<GridColumn field="employeeID" filter="numeric" width="200px" />
<GridColumn locked={true} field="orderID" filterable={false} title="ID" width="90px" />
</Grid>
</div>
</div>
);
}
ReactDOM.render(<App />, document.querySelector('my-app'));

Grid

answered on 15 Sep 2023