Telerik Forums
KendoReact Forum
1 answer
831 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
0 answers
3 views

I'm using latest v11 KendoReact packages and Tailwind v4 and Vite 7.

I saw this example 

Github (forked) - StackBlitz

And even though it does switch between themes, but I'm unable to get it to work with Tailwind. Seems like Kendo classes overwrite Tailwind's.

Also, Tailwind v4 docs states that we only put this in our .css file

@import "tailwindcss";

How do I get it to work in a way that if I do this

        <Button
          className="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white shadow hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none"
        >
          Next Theme
        </Button>
        <Button themeColor={"primary"}>Primary</Button>
        <Button disabled={true}>Disabled</Button>

The first button will have the Tailwind styling but the 2nd two will have the default Kendo styling?

Thanks!

Omar
Top achievements
Rank 1
 asked on 04 Jul 2025
1 answer
5 views
I found older examples using pre React 18  and but they are not working for me.
Vessy
Telerik team
 answered on 03 Jul 2025
0 answers
4 views

Hello, using Kendo Grid in my react TS app. Using ColumnMenu for filtering, sorting and column selection. This column menu popup closes when click anywhere on this. How can I prevent it closing? Below is my code. 

<ColumnMenuContext.Provider
          value={{ onColumnsChange, onAutoSize, columnsState, columns }}
        >
          <PopupPropsContext.Provider
            value={({ popupClass, ...props }) => {
              const newPopupClass = classNames(popupClass, {
                "k-column-menu-tabbed":
                  popupClass &&
                  popupClass?.toString().includes("k-column-menu"),
              });
              return { ...props, popupClass: newPopupClass };
            }}
          >
            <Grid
              data={data}
              {...dataState}
              onDataStateChange={dataStateChange}
              total={totalCount}
              filterOperators={CONSTANTS.filterOperators}
              sortable={true}
              pageable={{ buttonCount: 5, pageSizes: [10, 20, 50, 100] }}
              ref={gridRef}
              resizable
              className={loading ? "grid-blurred" : ""}
            >
              <GridNoRecords>
                <EmptyResultsGrid />
              </GridNoRecords>
              {columnsState.map((c) => (
                <Column key={c.id} {...c} width={setWidth(Number(c.width))} />
              ))}
            </Grid>
          </PopupPropsContext.Provider>
        </ColumnMenuContext.Provider>
kalyan
Top achievements
Rank 1
 updated question on 03 Jul 2025
1 answer
3 views
I am trying to use Kendo/React with a Next.js/tailwindcss project under development. It looks like I need to add "use client" in order to make it compile ... but it does not stylize. Simple components display, without any style or theme (plain vanilla). I am using the examples posted for Kendo/React without changes. How do I make this work?
Peter
Top achievements
Rank 1
Iron
 answered on 03 Jul 2025
2 answers
201 views

Hi.

I'm using a Drawer component but instead of using the svg-icons provided by the Kendo-UI I would like to use Font Awesome icons. Is that possible?

Thanks,

Greetings,

Bernd

Jyri
Top achievements
Rank 1
Iron
 updated answer on 02 Jul 2025
2 answers
17 views

I have built a component in stackblitz
https://stackblitz.com/edit/react-sjktqaua?file=app%2Fapp.tsx,app%2Fgd-products.ts

Notably it has both the props needed for ctrl+c functionality:

data={data}
        dataItemKey={DATA_ITEM_KEY}
        select={select}
        selectable={{
          enabled: true,
          mode: 'single',
          cell: true,
          drag: false,
        }}
        navigatable={true}
        clipboard={true}
        onClipboard={handleClipboard}
        onSelectionChange={onSelectionChange}

 

 

and a row override:

const CustomRow = (propsGridCustomRowProps=> {
    const available = !props.dataItem.Discontinued;
    const noBgr = { backgroundColor: '' };
    const customBgr = { backgroundColor: 'lavender'fontWeight: 'bold' };
    return (
      <tr {...props.trProps} style={available ? noBgr : customBgr}>
        {props.children}
      </tr>
    );
  };


rows={data: CustomRow }}


This breaks the ctrl+C event. It no longer fires when custom row is applied to the grid. Am I missing anything? I am passing trProps

Jonathon
Top achievements
Rank 1
Iron
 answered on 30 Jun 2025
0 answers
11 views

I want to create a custom Kendo Grid component in React so that if there's any future update (e.g., changes like cell to cells), we can make the change in just one place instead of updating it everywhere in the project.

Currently, I have tried creating a custom wrapper for the Grid and Column components, but it's causing rendering issues.

Can you guide me on the correct way to create a reusable custom Grid and Column component using Kendo React Grid that works reliably with all features (sorting, filtering, paging, custom cells, etc.)?

Ideally, we want a centralized Grid component where we can pass in props like columns, data, and events, and handle all common logic in one place.

Akhilesh
Top achievements
Rank 1
Iron
 asked on 23 Jun 2025
1 answer
14 views

Hi,

I am trying to make a page with the grid that gets data from a Flask REST API. The data received is paginated. From the grid I also want to allow the user to filter and sort the data, which should make a request to the backend API, to receive filtered, sorted, and paginated data.

I have previously done this in Telerik Blazor using the OnRead function. I overwrote the OnRead function to automatically make a request upon filter, sort, or page change . Looking through the Kendo React documentation, I can't figure how to use DataSource with a REST API, the documentation seems to use OData. Is there something like Telerik Blazor OnRead, which I can use in Kendo React, or do i need to use functions like OnPageChange, OnFilterChange, to bind this functionality with the API?

For example, this is the kind of data i get from the API:

{ "metadata": { "page": 1, "perPage": 50, "total": 120, "totalPages": 3 }, "assignments": [ { "createdAt": "2025-02-20T00:00:00", "updatedAt": "2025-06-11T11:23:26.913674" }

]

}

 

And with the request on page change, on filter, or on sort, I would want to get the page, filter, sort data, and put them into query parameters to pass to the endpoint. I have attached an example image of query params I have from Postman below. 

I would highly appreciate it if anyone can help me figure out implement this functionality, ideally using a function like Telerik Blazor OnRead.

Thanks!

Filip
Telerik team
 answered on 20 Jun 2025
0 answers
39 views
Hi!

I'm using a grid component with custom cells 11.0.0 version. I am providing a simplified version of the grid that I need. Namely: A grid with custom grid cells and header cells. 

1. The resizable of the custom header cell (ProductName) does not work.
2. The custom column cell (cells={{data: MyColumnCustomCell}}) completely redefines the custom grid cell (cells={{data: MyDataCustomCell}}). In the example, this is the ProductName column. But I need it to be inherited from the grid cell. In version 5.15.0, where the grid accepted cellRender, I could redefine the cells in cellRender, but the custom column cell was still inherited from cellRender. And the cell was still highlighted in bold without explicitly specifying the style in the column cell. How can this be done now?
The option to duplicate the style (fontWeight: bold ? 'bold' : 'inherit') in a custom column cell is not suitable for me due to the individual implementation of the grid.

https://stackblitz.com/edit/react-ag2bjt6h?file=app%2Fapp.tsx
Andrei
Top achievements
Rank 1
Iron
 updated question on 19 Jun 2025
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?