Telerik Forums
KendoReact Forum
2 answers
156 views

Hello, I have a grid that I'm trying to make it accesible,  however, for the columnMenu (GridColumn prop) it seems that is not possible, I couldn't find a way to open it, when I press enter in the keyboard it's sorting the table, but apparently there is not way to activate the menu with the keyboard. I'm attaching some images for reference. Also, when I open the menu (clicking in the button) the buttons inside GridColumnMenuSort (sort ascending and sort descending) component are not accesible, it's going directly to the filter options inside GridColumnMenuFilter component when I press Tab. I'm not sure if I'm doing something wrong or if this is a bug, could you help me please?

 

Brad
Top achievements
Rank 1
 answered on 24 Nov 2020
3 answers
407 views

Hi, 

We are trying to make grid with dynamic data where number of column will not be constant and it may be vary and columns name too. Could you please let us know how to implement this type scenario. 

And also please let me know how can we add a dropdown which will show the data types of that column in dynamic columnheader. ? 

Nikolay
Telerik team
 answered on 24 Nov 2020
6 answers
890 views

Hi there,

  I know that this is a big topic, but I will ask/comment anyway. Others might benefit as well.

  The selection logic that kendogrid uses is not performant enough.

  On every selection basically everything is re-rendered:

  - All rows.  (GridRow)

  - All cells for all rows. (GridCell)

 - The header 

- The toolbar

  This works well enough when there are a few records - 10-20-50.

  With more records the performance degrades too much. 

  To improve performance:

   -  I used React.memo for the cells

 

However, the rows (GridRow),header,toolbar are still re-rendered. When I have 100-200 and more records that's too much.

 

  You provide virtual scrolling, but it has the following disadvantages:

  1. You have to have a fixed row height. For my application this is too restrictive. I need to have variable row height.

  2. You cannot use paging with virtual scrolling. (I might be able to hack a custom paging solution or do not use paging. But even then the fixed row height is too restrictive)

 

I am going in the direction of using something like react-visible, to detect which rows are off-canvas and avoid rendering them.

Do you have any other suggestions?

Do you plan on optimizing the grid performance? I can wait a few months for a better solution coming from you.

How can I override the GridRow component for the grid? There is a hook rowRender (or renderRow, don't remember). I tried returning a ReactNode from it, but it didn't work (the app crashes)? Can you please provide an example how can I do that?

 

 

 

Stefan
Telerik team
 answered on 20 Nov 2020
1 answer
1.1K+ views

Hi, 

As my title says, "How can I create a Kendo Form that checks its content and then auto-submits when the its complete?"

I thought I could use the form validator to check the fields and then execute a submit if they are all valid, but then that executes every time a form element changes, and I dont want to submit before the user is done even typing their name.

Its like I need an onBlur of the form, the only equivalent is to run a check onBlur of each field. I've been messing around with trying to send the form to the blur function to check each field, but I haven't had success.

Is there a better way?

Thanks,
Grant

Vladimir Iliev
Telerik team
 answered on 20 Nov 2020
3 answers
138 views

Hi, 

As my title says, Im trying to get the processed data from a ReactGrid, in jQuery it would be the equivilent of the grid view, ie the data hat is visible to the user after when its filtered/sorted/paged/etc. How can I do this in React?

A simplified scenario of what Im trying to achive is as follows:
- I have a list of "Customers", a grid of "Orders", and a grid of "Agents" that place the orders.
- When I select a customer, the orders must be filtered by the selected customer, and the agents must be filtered by the which ones placed the filtered orders.

eg:
There are 5 Agents and 20 Orders. When a customer is selected, the list of orders is filtered down to 10 Orders, and 2 Agents. Because of the 10 orders for the selected customer, only 2 agents were involved in placing them.

I hope the above makes sense.

I have the list of "orders" filtering, but Im having trouble filtering the "agents" based on the results of the filtered orders.

Please advise.

Thanks,
Grant

PS. Im new to React, so please keep that in mind if your solution is quite technical. Thanks

Stefan
Telerik team
 answered on 18 Nov 2020
1 answer
1.2K+ views

Hi All

I am trying to disable the default keyboard inputs of up/down in the NumericTextBox. I cannot see any options from the api

Stefan
Telerik team
 answered on 18 Nov 2020
6 answers
1.2K+ views

Hi All

I am trying to set focus on a filter cell in a grid.

I have followed and successfully created a custom filter cell as per the following link:

https://www.telerik.com/kendo-react-ui/components/grid/filtering/

 

I am not sure however, how I can set focus on this cell, any assistance would be great, thanks.

 

Nick
Top achievements
Rank 1
Veteran
 answered on 17 Nov 2020
5 answers
5.1K+ views

 

We recently upgraded to Kendo React 4.0.0 and introduced kendo-ui-licence. 

I want to make sure that future developers do not deploy a release with an invalid license. Console outputs on the deployed application will not get noticed.

What is the best practice to do that?

I would say the build has to fail if there is an invalid license. The documentation says: "A post-install script in @progress/kendo-licensing will automatically activate the license during installation." What does "post-install script" mean? Is this automatically triggered when I run `npm install` on my project? And will it fail if the license became invalid? And what's the impact of having some kind of npm caching mechanism (i.e. https://samiprogramming.medium.com/cache-your-npm-install-on-azure-devops-b45ead758c00)? Would it make sense to call `npx kendo-ui-license activate` explicitly so that it fails when the license is no longer valid?

 

T. Tsonev
Telerik team
 answered on 17 Nov 2020
1 answer
452 views

Hello,

We are using KendoReact 3.17.

I've tried to write a test using Jest and Enzyme to check if NumericTextBox will fire onChange callback when I'll change input.

Unfortunately, I'm not able to fire onChange callback within test.

I've created sandbox environment with test here:

https://codesandbox.io/s/react-enzyme-sandbox-forked-mtiuz?file=/src/components/Hello.test.js

Maybe there is other way I can test NumericTextBox to achieve same result?

Best regards,

Arek

Stefan
Telerik team
 answered on 16 Nov 2020
1 answer
114 views
I am having one scenario where I need to update/edit column name by double clicking in the column name in the Grid then I can save the updated column name with its data types and icon itself, please find attachments for reference Please let me know how to implement this type of scenario with Kendo-react ? 
Stefan
Telerik team
 answered on 16 Nov 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?