or
1 answer
64 views
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！
Regards,
Sunny Hu
Konstantin Dikov
Telerik team
answered
on
19 Sep 2023
1 answer
104 views
Where do the SCSS files get integrated into my app?
Vessy
Telerik team
answered
on
18 Sep 2023
1 answer
91 views
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/
1 answer
93 views
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.
5 answers
443 views
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)
Wissam
Telerik team
answered
on
18 Sep 2023
1 answer
104 views
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?
Sunny Hu
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！
Regards,
Sunny Hu
Hu
Top achievements
Rank 1
Iron
Iron
Iron
Rank 1
Iron
Iron
Iron
answered
on
18 Sep 2023
2 answers
57 views
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.
Filip
Telerik team
answered
on
15 Sep 2023
1 answer
181 views
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'));
Wissam
Telerik team
answered
on
15 Sep 2023
1 answer
44 views
Hi KendoReact team.
I have a problem with a filter cell. As soon as I move the table, the filter modal remains in its place and loses the reference to its column.
We use the KendoGrid in the version "@progress/kendo-react-grid": "5.0.1"
Is there an approach to prevent this behavior? Thank you for the effort and the possible approach.
Screen Capture of issue
1 answer
50 views
We're building a new app using Fluent design principles. We're looking for the best way to implement a panel (https://developer.microsoft.com/en-us/fluentui#/controls/web/panel) in KendoReact. Is there anything in KendoReact that can do something similar? At the moment we're looking at customizing the telerik Window control.
Wissam
Telerik team
answered
on
14 Sep 2023
