Telerik Forums
KendoReact Forum
9 answers
498 views

Hi all

I am trying to select all contents of the NumericTextBox when the control gets focus.

I have tried this in the regular way with an onfocus event and in the event event.target.select()

But this does not seem to actually highlight and select the contents. I have googled around and others seem to have this issue but the only examples I can find are for the jquery tools.

 

Stefan
Telerik team
 answered on 27 Nov 2020
1 answer
218 views

Kendo UI React Wrapper Spreadsheet has the following warning and will stop working with React 17 (which is out now, and I'm planning to upgrade to once a couple other dependencies update to it as well).

 

react_devtools_backend.js:2430 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Can this be updated or a native React spreadsheet be implemented?

Stefan
Telerik team
 answered on 26 Nov 2020
1 answer
226 views

Hi,

we can have a lot of messages and attachments in our chat history. Is there a virtual scroll option or do you have any advice how to do this without loading every message at the beginning but enable access to the whole chat history? 

Stefan
Telerik team
 answered on 26 Nov 2020
1 answer
363 views

Hi,

Could you please provide an example of how to dynamically set the major units of the value axis of a bar chart? I have tried using the onRender method but this ignores changes to options and blows up if you trigger a chart redraw.

If it helps, what I am trying to achieve is to stop the major units from having decimal places i.e. I would like to set a minimum major unit for the value axis. The data I am showing can only ever be whole numbers but if the chart has small or no values then the axis major units and max have decimal places as per the attached screenshot.

Stefan
Telerik team
 answered on 25 Nov 2020
1 answer
106 views
I have a Kendo grid appearing in a modal. The modal opens by clicking on a button that sets the state of a map region on a map, which passes a parameter to the kendo grid on which map region data to display. This works fine on the first opening of the modal. If I click on a different map region and click on the modal, the grid displays the data fine. However, if I close the grid and try to reopen the grid with the same data, Ex: Click on Modal with Region X selected. Close the modal. Reclick the open modal button. Now the grid displays no data.
Stefan
Telerik team
 answered on 25 Nov 2020
2 answers
126 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
326 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
781 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.0K+ 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
81 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
Narrow your results
Selected tags
Tags
+? more
Top users last month
Henri
Top achievements
Rank 2
Iron
Iron
Iron
SUNIL
Top achievements
Rank 2
Iron
Iron
Iron
David
Top achievements
Rank 1
Jackson
Top achievements
Rank 1
Iron
Iron
Tim
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Henri
Top achievements
Rank 2
Iron
Iron
Iron
SUNIL
Top achievements
Rank 2
Iron
Iron
Iron
David
Top achievements
Rank 1
Jackson
Top achievements
Rank 1
Iron
Iron
Tim
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?