Telerik Forums
KendoReact Forum
1 answer
785 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
5 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:

<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 fine

  • CommonGridColumn – 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
7 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
12 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

Vessy
Telerik team
 answered on 14 Apr 2025
1 answer
13 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} />
Silviya
Telerik team
 answered on 11 Apr 2025
1 answer
16 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
1 answer
11 views
What options does KendoReact provide for implementing fluid (responsive) layouts using rem units? In case when we use component where we can use only px, instead of px we want exchange to rem.
Silviya
Telerik team
 answered on 08 Apr 2025
1 answer
12 views

Hi, 

My form is going to have controlled DatePicker component. However, I could not figure out why when I defined the onChange function on the DatePicker, the form submission excluded its value. 

https://codesandbox.io/p/sandbox/cool-hofstadter-2vj2s3?file=%2Fapp%2Fapp.jsx%3A18%2C7

From the code above, Test Date 1 and Test Date 2 components are almost the same, except, Test Date 2 component has line 63, which I set its 'value' and defined 'onChange' function separately. However, form submission will not recognize Test Date 2 value. 

From pictures above, if removing 'value' and 'onChange' on line 63, you will see Result on the left, otherwise, you will receive result on the right

Vessy
Telerik team
 answered on 27 Mar 2025
0 answers
19 views

Hi,
I'm trying to change the colors of Gantt tasks based on their status, but I couldn't find anything about it in the documentation.

Is it possible?

Also, can I render a baseline for each task?

Thanks!


 
Rafael
Top achievements
Rank 1
 asked on 24 Mar 2025
1 answer
12 views

Hi , Is there  a way to change or remove highligt color of selected rows in the grid. 

Example: This is default behaviour

Is there a way to display like this.

 

I tried to overwrite with css. But no luch. Even with transparent it is not working.

.k-selected {
    background-color: white !important;
}

 

 

Thanks

Srinivas Kolla

 

 

 

 

Vessy
Telerik team
 answered on 24 Mar 2025
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Iron
Krasimir
Top achievements
Rank 3
Iron
Iron
Iron
Shawn
Top achievements
Rank 1
Iron
Javier
Top achievements
Rank 1
Iron
Jean-François
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Iron
Krasimir
Top achievements
Rank 3
Iron
Iron
Iron
Shawn
Top achievements
Rank 1
Iron
Javier
Top achievements
Rank 1
Iron
Jean-François
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?