Telerik Forums
KendoReact Forum
1 answer
834 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

Dear KendoReact Support Team,

I am experiencing an issue with the loading indicator on my KendoReact Grid, where it occasionally persists even after the data has successfully loaded from an API. This behavior is inconsistent, occurring on some screens of my application but not on others.

Here are the details of my setup:

  • KendoReact Grid Version: @progress/kendo-react-grid@4.8.0

  • Other KendoReact Packages:

    • @progress/kendo-react-excel-export@5.16.1

    • @progress/kendo-react-pdf@5.9.0

    • @progress/kendo-theme-default@4.41.1

  • React Version: react@18.3.1, react-dom@18.3.1

  • Build Tool: Vite (^6.0.2)

  • Authentication: Auth0 (@auth0/auth0-react@2.2.4)

  • State Management: Redux Toolkit (@reduxjs/toolkit@2.4.0), React Redux (react-redux@9.1.2)

  • Date/Time Handling: Moment.js (moment@2.30.1)

Description of the Issue:

I have implemented a Higher-Order Component (withState) that wraps the KendoReact Grid. This HOC manages the data fetching (fetchData function), data state (pagination, sorting, filtering), and a local isLoading state.

My application currently controls a custom loading panel using this.state.isLoading. However, even when this.state.isLoading correctly transitions to false after a successful API response, the KendoReact Grid's own default loading indicator sometimes remains visible on certain pages. On other pages using the exact same withState HOC, the loading indicator disappears as expected.

I am not explicitly passing the loading prop to the KendoReact Grid component as part of its props currently, relying on its default behavior. My fetchData function correctly sets isLoading to true before the API call and to false in both the try (success) and catch (error) blocks.

Steps I have already taken/considered:

  • Confirmed that this.state.isLoading is being set to false correctly upon API success/failure via console logs.

  • Verified that API calls are completing successfully (HTTP 200 OK) on problematic screens.

  • Checked for JavaScript errors in the browser console after the API response.

  • Noted the version mismatch between @progress/kendo-react-grid@4.8.0 and other KendoReact 5.x.x packages, though I am unsure if this is directly contributing to this specific loading issue.

Expected Behavior: The KendoReact Grid's loading indicator should disappear promptly once the data fetch is complete and this.state.isLoading is set to false.

Request:

Could you please provide guidance on why the KendoReact Grid's default loader might persist despite the data being loaded and my internal loading state being reset? Are there specific scenarios or configurations related to version 4.8.0 that could cause this? Any recommendations for further debugging or best practices for controlling the grid's loading state in such a setup would be greatly appreciated.

Thank you for your time and assistance.

Sincerely,
Anduri

Yanko
Telerik team
 answered on 16 Jul 2025
0 answers
6 views
I would like to be able to set a custom template for the tasks on the Gantt component but am not able to figure out how to do that. I have seen examples (both here and elsewhere online) how to handle it using the Telerik UI for JQuery library but not for KendoReact. Any assistance with this is appreciated.
David
Top achievements
Rank 1
Iron
 asked on 15 Jul 2025
0 answers
4 views

Hi all,

I've been working with Kendo Form for a while and I'm now trying to add some custom behavior or styling to all my form fields. For example, I might want to consistently wrap them with extra logic, validation hints, or a custom layout.

Here’s a simplified case using a `Checkbox`:

<Field component={Checkbox} name="acceptTerms" />

To achieve the desired behavior, I’ve tried creating a `MyCustomCheckbox` component (see here). That works fine — but I don’t want to have to create `MyCustomInput`, `MyCustomDropdown`, `MyCustomDatePicker`, etc. for every component I use.

Is there a way to apply the same wrapper or logic at a more general level, so that I can just write:

<Field component={Input} name="email" />
<Field component={Checkbox} name="acceptTerms" />

…and have both get wrapped or enhanced in the same way — without duplicating the logic in multiple custom components?

Any tips or patterns would be greatly appreciated!

Thanks,
Grant

Grant
Top achievements
Rank 3
Iron
Iron
Iron
 asked on 15 Jul 2025
1 answer
12 views

I'm using the KendoReact Gantt component in my project and would like to customize the default "Add Task" button in the toolbar. I have a couple of requirements I need help with:

  1. Customizing the "Add Task" button

    • I’d like to change the label of the button.

  2. Customizing the dropdown menu (that appears when an item is selected and "Add Task" is clicked)

    • When an item is selected in the Gantt chart and the "Add Task" button is clicked, a menu appears with options like "Add Above", "Add Below", etc.

    • I'd like to modify or extend this menu — either by changing the labels, hiding certain options, or adding new ones.

I've reviewed the official documentation but couldn’t find clear guidance on customizing this behavior.

Could you please let me know:

  • The recommended way to customize the toolbar button and its menu

  • Any hooks or props that allow for this level of control

Any example or code reference would be greatly appreciated!

Thanks in advance!

Yanko
Telerik team
 answered on 10 Jul 2025
1 answer
8 views

I built this to show you what I'm talking about. Instead of the Grid expand to fill the Tab, instead the Tab expands to accommodate the Grid.

If you comment out line 22 and uncomment 23, you'll see that the Grid expand to fill the view and then a scrollbar for the Grid (not the entire view) will show up. But if you uncomment line 22 and comment out line 23, you'll see the opposite happening.

The same behavior can be observed by commenting/uncommenting lines 62 and 63.

https://codesandbox.io/p/sandbox/black-morning-kx4vpv

 

Thanks.

Yanko
Telerik team
 answered on 09 Jul 2025
1 answer
7 views
I fully understand I can use my own images, but still the regular API sample pages are well done, with multiple files per sample, as needed.  But when you use the building-blocks, I am forced to reconstruct stuff.   It is disappointing, but still someone did not have the time to include them.  

So one of the reasons I purchased a license was access to the 'Page Templates/Building Blocks', but even the profile dropdown is different as shown below.

Seems like 'Building Blocks' was a cool idea, but lacked funding or something.


Building Block Page under Landing examples... 


Regular telerik profile
Vessy
Telerik team
 answered on 08 Jul 2025
1 answer
12 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>
Vessy
Telerik team
 answered on 07 Jul 2025
1 answer
12 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!

Yanko
Telerik team
 answered on 07 Jul 2025
0 answers
10 views
I found older examples using pre React 18  and but they are not working for me.
Dave
Top achievements
Rank 1
 asked on 03 Jul 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
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
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?