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

Is it possible to configure Kendo React Grid to show the column menu like Kendo JQuery's classic look where the submenu is on left/right hand side?

https://demos.telerik.com/kendo-ui/grid/column-menu?_gl=1*x0zspa*_ga*OTMyNDUxNTM0LjE3MTA1NTIzMTg.*_ga_9JSNBCSF54*MTcxNTcxMzA5Ni4yNS4xLjE3MTU3MTM1MjMuNjAuMC4w*_gcl_au*Njk5MTQ3NTc2LjE3MTA1NTIzMTg.&_ga=2.15420211.444171052.1715713097-932451534.1710552318

 

Also see the attached screenshot.

 

Thanks,

Jie

Wissam
Telerik team
 answered on 16 May 2024
1 answer
14 views

Hi All:

When I use React Data Grid Component & Column Menu - KendoReact Docs & Demos (telerik.com), I set some columns, 

Step1: uncheck select all

2. input st at search box, only check test1, but test and test1 both changes to checked

3. clear search box, the two columns in the image below are checked.

you can test on below link, this is a very important function of our project, looking forward to your early reply. thank you

Eswnzm (forked) - StackBlitz

Konstantin Dikov
Telerik team
 answered on 10 May 2024
1 answer
10 views

Hello,

we are considering adopting KendoUI DataGrid for a legacy application rewrite and I was wondering if there's a way to implement filtering of the data by clicking on a specific value in a cell, like in the screenshot below (clicking on any date will filter the grid by that date):

Constraints are:

  • Data is remote, so not completely loaded in memory
  • Ideally I would like to avoid creating custom GridCells, but if it's the only way then it's OK.
  • We cannot deviate from this UI pattern as users find it particularly convenient.

Any link to specific docs or examples would be much appreciated!

I looked through the documentation and examples but it's not clear if it's something that is achievable without a massive customisation of the cell components. I also have zero experience with the library as I'm looking at it for the first time as we're considering our options for the UI library to use to rewrite the application, so apologies in advance if I missed anything obvious from the docs!

Thank you

Diego

Konstantin Dikov
Telerik team
 answered on 09 May 2024
1 answer
16 views
Hello! I am trying to get a Grid with Virtual Scrolling working where the data is fetched as needed, as opposed to all loaded in at once. I have not managed to get it working locally. All of the documentation I have been able to find has examples with all the data pre-loaded into the React state, which is not feasible in our use case. Would you be able to provide any examples on how this is expected to be done? I have been looking into `onPageChange` and `onDataStateChange` but cannot determine how they are intended to be used here. Is it expected that the new data is returned from these functions? Or is it expected that, once the data is fetched, the overall `data` variable passed into the grid is manipulated (sliced) to only pass in the expected rows given skip and take?
Filip
Telerik team
 answered on 26 Apr 2024
1 answer
14 views

Hello there. We have a grid using the process method to filter rows. We're currently using version 5.16.1, Typescript and wanted know if there was a way to dynamically hide (or show) the column menu filter icons in the header using an external button's onClick function?

In our project, we have columns that are using a custom header cell so filtering is not available on those specific columns. However, we just want to be able to click a button outside of the grid that can toggle the filter icons to show which columns are available to filter at the same time.

Would that be possible?

Konstantin Dikov
Telerik team
 answered on 26 Apr 2024
1 answer
13 views

I am using kendoreact tooltip to show  the error on hovering of cell in the grid. When i hover on the error, i wan to change the height, width, background-color & text color of the tooltip. Please help. i tried to customize using .k-tooltip class. But its not working.  Please help


Konstantin Dikov
Telerik team
 answered on 25 Apr 2024
1 answer
17 views
Hello, I am using a Kendo React DropDownList in a form, but I have an issue. I receive data in batches of 10 from the server-side due to pagination settings. How can I implement scrolling so that the dropdown can display the next 10 data entries when scrolled
Konstantin Dikov
Telerik team
 answered on 25 Apr 2024
1 answer
19 views

Hi!

I'm brand new to this framework and learning a lot so apologies if this is a silly question.

I have created a grid - it has a text column and a chip column that represents the status of the record. I implemented a context menu for the grid rows but it is not triggered on the chip column...just on the text column. How can I fix this?

Here is my code:


 <Grid
        className="custom-grid"
        data={people.slice(page.skip, page.take + page.skip)}
        skip={page.skip}
        take={page.take}
        total={people.length}
        scrollable="none"
        pageable={{
          buttonCount: 3,
          responsive: false,
          pageSizeValue: pageSizeValue,
        }}
        onPageChange={pageChange}
        onContextMenu={handleContextMenu}
      >
        <GridColumn field="PersonName" title="Full Name" />
        <GridColumn
          field="Status"
          title="Status"
          cell={(props) => (
            <ChipCell
              {...props}
              text={props.dataItem['Status']}
              className={props.dataItem['Color']}
            />
          )}
          width="12.5rem"
        />
      </Grid>
      <ContextMenu
        className="custom-context-menu"
        show={show}
        offset={offset.current}
        // onSelect={handleOnSelect}
        onClose={handleCloseMenu}
      >
        <MenuItem text="Option 1" />
        <MenuItem text="Option 2" />
      </ContextMenu>
    </div>

Konstantin Dikov
Telerik team
 answered on 24 Apr 2024
1 answer
8 views

Hello, I'm using Kendo Grid with select drag functionality in a tile layout that has reorderable function.

The problem now is that my tiles begin reordering with drag capabilities when I attempt to select several rows in my grid.

code : Q1u7xf (forked) - StackBlitz

you can see the video here.

https://www.loom.com/share/5ffbe26f35314f2882ec8285f523a067?sid=07a9286c-6e41-46aa-9e71-a64abc1d2558

According to the Kendo jQuery documentation, we may only rearrange the tiles in the header section.

Kendo UI for jQuery TileLayout Documentation - TileLayout reordering - Kendo UI for jQuery (telerik.com)

So, is it possible to rearrange tiles using just the header portion in ReactJS?

 

Konstantin Dikov
Telerik team
 answered on 23 Apr 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?