Telerik Forums
KendoReact Forum
1 answer
370 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
369 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
582 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
177 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
186 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
472 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
1.0K+ 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.2K+ 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
183 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.3K+ 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
Narrow your results
Selected tags
Tags
General Discussions
Grid
Wrappers for React
Charts
Scheduler
Filter 
DropDownList
Form
Styling / Themes
DatePicker
Editor
TreeList
Styling
PDF Processing
ComboBox
Excel Export
Dialog
Input
TreeView
Upload
Drawer
Button
Drag and Drop
MultiSelect
Tooltip
Accessibility
NumericTextBox
Checkbox
Menu
Gantt
DateTimePicker
PDF Viewer
Popup
Window
AutoComplete
DateInput
Sortable
Data Query
Licensing
TabStrip
Drawing
Calendar
Pager 
Labels 
Localization
TimePicker
GridLayout
FontIcon
Animation
PanelBar
TaskBoard
PivotGrid
Card
DropDownButton
Conversational UI 
DateRangePicker
Splitter
Badge 
Security
Slider
Spreadsheet
ContextMenu
MultiViewCalendar
Stepper
MultiColumnComboBox
MultiSelectTree
TextBox
AppBar
File Saver
ListView
MaskedTextBox
RadioButton
Switch
TextArea
Toolbar
DropDownTree
TileLayout
Map
Avatar
Date Math
Gauge
RadioGroup
RangeSlider
Rating
Loader
ExpansionPanel
SvgIcon
Typography
ProgressBar
ScrollView
Popover
StockChart
RadialGauge
Server Components
AIPrompt
Page Templates / Building Blocks
AI Coding Assistant
Chat
ColorGradient
ColorPalette
ColorPicker
Notification
Ripple
Skeleton
ButtonGroup
Chip
ChipList
FloatingActionButton
SplitButton
ActionSheet
Barcode
QR Code
FlatColorPicker
Signature
BottomNavigation
BreadCrumb
StackLayout
Timeline
ListBox
ChunkProgressBar
Sparkline
FileManager
ArcGauge
CircularGauge
LinearGauge
ExternalDropZone
OrgChart
Sankey
VS Code Extension
InlineAIPrompt
SpeechToTextButton
Chart Wizard
Agentic UI Generator
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Hiba
Top achievements
Rank 1
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Hiba
Top achievements
Rank 1
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?