or
1 answer
790 views
I'm migrating KendoUI for jQuery to React. In jQuery version of Kendo Grid was possible to set "values" property to columns with "id" values.
In React version of the kendo grid, the "values" property for the GridColumn component is not available. How can I make the same like in jQuery version?
Thanks a lot for an each help.
Wissam
Telerik team
answered
on
10 Aug 2022
1 answer
13 views
@progress/kendo-react-dateinputs v9.4.1
@progress/kendo-react-labels v9.4.1
When using TimePicker with a manually defined Label component as such:
<Label
id="time-picker-label"
editorId="time-picker"
...
>
TimePickerLabel
</Label>
<TimePicker
ariaLabelledBy="time-picker-label"
id="time-picker"
/>The generated HTML rendered to the DOM includes a span which has the ID attached to the TimePicker component, as well as the input control element which bears the same ID. This poses a screen-reader accessibility issue given that the label element's "for" value needs a unique ID.
Is this a known issue, and has it been resolved in a later version, or is there a plan to resolve this?
Yanko
Telerik team
answered
on
25 Apr 2025
1 answer
11 views
Hi,
The KendoReact Grid Grouping does not working on mobile.
When trying to group columns by dragging them with the mouse, it fails.
Kendo Version 6.0.2 is in use.
Please check.
Vessy
Telerik team
answered
on
23 Apr 2025
1 answer
11 views
Hi Kendo Team,
I’m working on creating a common reusable component for the Kendo React Grid in my project. I’ve built two components:
CustomGrid– a wrapper around the KendoGridcomponent where I pass the data and configuration.CustomGridColumn– a wrapper around the KendoGridColumncomponent.
When I use CustomGrid with the regular GridColumn inside it, everything works perfectly.
However, when I try to replace GridColumn with my CustomGridColumn component, the columns do not render at all – it's like they're not recognized by the grid. I'm passing all the necessary props and structure correctly, but it's still not working.
Could you please help me understand what might be causing this issue? Is there a special requirement for column components to be recognized by the Grid?
Thanks in advance for your help!
Vessy
Telerik team
answered
on
22 Apr 2025
0 answers
13 views
Is there a way to download the examples as an app? This way I can change the code on my machine and use an AI assistant against the code. Also be able to use the IDE's capability for code navigation and refactoring.
Tony
Top achievements
Rank 1
Rank 1
updated question
on
22 Apr 2025
1 answer
14 views
Hi Kendo Team,
I'm working on a React project where I want to create a common reusable component for the Kendo UI Grid so that if there are any changes in the grid properties or behavior, I only need to update them in one place—this way I avoid updating it across the entire project.
Here's an example of how I'm using the Grid:
data={orderBy(staffAuditData, sort).map((item) => ({
...item,
[SELECTED_FIELD]: selectedState[idGetter(item)],
}))}
checkboxElement
style={{
height: staffAuditData.length > 0 ? "100%" : "250px",
}}
dataItemKey={DATA_ITEM_KEY}
skip={page}
take={pageSize}
total={metaData.totalCount}
onPageChange={pageChange}
className="pagination-row-cus"
pageable={{
pageSizes: [10, 20, 30, 50, 100, 500],
}}
sort={sort}
sortable={true}
onSortChange={(e) => setSort(e.sort)}
filterOperators={filterOperators}
onDataStateChange={dataStateChange}
onHeaderSelectionChange={onHeaderSelectionChange}
>
<GridColumn title="Affected Staff" field="affectedStaffName" className="cursor-default" />
<GridColumn title="Affected By" field="affectedByStaffName" className="cursor-default" />
<GridColumn title="Section" field="affectedTable" className="cursor-default" />
<GridColumn title="Action" field="actionName" className="cursor-default" />
<GridColumn
title="Date & Time"
cell={(props) => {
let date = props.dataItem.utcDateCreated;
return (
<td className="cursor-default">
{moment.utc(date).local().format("M/D/YYYY")} at{" "}
{moment.utc(date).local().format("hh:mm A")}
</td>
);
}}
/>
</Grid>
import React, { useState } from "react";
import { Grid } from "@progress/kendo-react-grid";
const CommonGrid = ({ data, selectable = true, pageable = true, ...props }) => {
const [selectedID, setSelectedID] = useState(null);
const rowClick = (event) => {
setSelectedID(event.dataItem.id);
};
return (
<Grid
data={data.map((item) => ({ ...item, selected: item.id === selectedID }))}
//selectable={selectable}
pageable={pageable}
onRowClick={rowClick}
style={{ width: "100%" }}
{...props} // Pass any additional props (sorting, filtering, etc.)
></Grid>
);
};
export default CommonGrid;
import React from "react";
import { GridColumn } from "@progress/kendo-react-grid";
const CommonGridColumn = ({ field, title, width, ...props }) => {
return <GridColumn field={field} title={title} width={width} {...props} />;
}
export default CommonGridColumn;
So I created two common components:
CommonGridComponent– which handles the Grid wrapper and works fineCommonGridColumn– which I'm trying to use to handle columns dynamically
However, when I pass props to CommonGridColumn, the column doesn't show up in the grid. The same column works when used directly with GridColumn. Is there a recommended way to create a wrapper for GridColumn so it behaves correctly?
Any advice or example on how to build a custom reusable GridColumn component would be really helpful.
Thank you!
Stoyan
Telerik team
answered
on
18 Apr 2025
1 answer
12 views
I have a drawer design like this. I'm trying to create it, but I don't know how to design this kind of image. I am use Kendo react drawer
const CustomItem = (props: DrawerItemProps) => {
const { visible, ...others } = props;
let dataExpanded = props.expanded;
const arrowDir = dataExpanded ? chevronDownIcon : chevronRightIcon;
return visible === false ? null : (
<DrawerItem {...others}>
<SvgIcon icon={props.svgIcon} />
<span className={'k-item-text'}>{props.text}</span>
{dataExpanded !== undefined && (
<SvgIcon
icon={arrowDir}
style={{
marginLeft: 'auto',
}}
/>
)}
</DrawerItem>
);
};
Yanko
Telerik team
answered
on
17 Apr 2025
1 answer
18 views
Hello,
We are running end-to-end tests against the following components:
- Dialog: https://www.telerik.com/kendo-react-ui/components/dialogs/dialog
- Window: https://www.telerik.com/kendo-react-ui/components/dialogs/window
How do we set a `data-testid` for the following components?
`data-testid` seems to be ignored when giving it as props to the components.
Thank you in advance
1 answer
19 views
On both the Calendar and DatePicker component, the month of March is missing two days, the 30th and the 31st. They also do not show up on April "before" April 1st. Is there a configuration setting needed to get these dates to appear? We use ThemeBuilder to style these components - is it possible that ThemeBuilder could be interfering with the date display? We're using version 8.4.0.
Calendar component
Code:
<Calendar />
DatePicker component
Code:
<DatePicker width={400} />
Calendar component
Code:
<Calendar />
DatePicker component
Code:
<DatePicker width={400} />
Silviya
Telerik team
answered
on
11 Apr 2025
1 answer
24 views
I use the React Upload component. I used the simple synchronous version in my project without any problems. Due to the file size I need to switch to the async Version. But I am not able to "transpile" my project. I have the following error message during project build:
Attempted import error: 'UploadAsync' is not exported from '@progress/kendo-react-upload' (imported as 'UploadAsync').
Reference: https://www.telerik.com/kendo-react-ui/components/upload/api/uploadasyncprops
In code I have no errors - only during the build process.
Here are my packages:
"@progress/kendo-licensing": "^1.3.5",
"@progress/kendo-react-grid": "^10.1.0",
"@progress/kendo-react-listview": "^10.1.0",
"@progress/kendo-react-treeview": "^10.1.0",
"@progress/kendo-react-upload": "^10.1.0",
"@progress/kendo-svg-icons": "^4.0.0"
How can I use the async React Upload component?
Vessy
Telerik team
answered
on
10 Apr 2025
