Last Updated: 31 Mar 2022 09:50 by ADMIN

There is an inconsistency with the DateRange picker in the way element focus is set when closing the date selection popup by mouse vs keyboard. When using the mouse to close the date range selection popup, element focus becomes lost/reset.

You can simulate this from the example page

Steps to simulate good behavior (this works correctly):

* click the 'from' input text element (causes the popup to open and the text input to have focus)
* press 'escape' to close the popup (the popup is closed, and the 'from' input element retains focus)
* press 'tab' (focus moves to the 'to' text input element)

Steps to simulate behavior that could be improved:

* click or tab into the 'from' input element (causes the popup to open and the text input to have focus)
* click (with the mouse) outside the popup to close it (the popup is closed, and focus appears to be lost.)
* press 'tab' (focus moves to the 'from' input element again because we are back at the beginning of the tab order list)

This input can lead you into a tab order loop if you mix pressing 'tab' to advance focus, and using the mouse to click to close the date selection popup.
Feature request: when clicking to close the popup, element focus should be retained in the 'from' or 'to' text input; whichever had focus before the popup close, the same as pressing 'escape' to close the popup.

Last Updated: 07 Jan 2022 12:22 by ADMIN

Hi there, 
Im use chart component, and  sometimes the tooltip on grid disappear, i dont know why, and if i put the same code on the telerik this bug doesnt happen, here is an exemplo with the same data 

import * as React from 'react'
import * as ReactDOM from 'react-dom'

import {
} from '@progress/kendo-react-charts';

import 'hammerjs';

	const valueAxis = [
			name: "",
			format: "{0:n1}",
			font: "10px Roboto",

const seriesValues = [
			type: "bar",
			toolTipFormat: "{0:n2}",
			title: "Teste 1",
			spacing: 1,
      data: [27869.8616],
			type: "bar",
			toolTipFormat: "{0:n2}",
			title: "Teste 2",
			spacing: 1,
      data: [13277.95],
			type: "bar",
			toolTipFormat: "{0:n2}",
			title: "Teste 3",
			spacing: 1,
      data: [95164.9968],
			type: "bar",
			toolTipFormat: "{0:n2}",
			title: "Teste 4",
			spacing: 1,
      data: [115579.184],
			type: "bar",
			toolTipFormat: "{0:n2}",
			title: "Teste 4",
			spacing: 1,
      data: [null],
			type: "bar",
			toolTipFormat: "{0:n2}",
			title: "Teste 4",
			spacing: 1,
      data: [616.7145289747288],

const ChartContainer = () => (
    {, idx) => (
          visible: e.visible !== undefined ? e.visible : true,
          format: e.format,
          rotation: "auto",
          font: e.font,
      {, idx) => (
            font: '10px',
            format: "{0:n2}"


  <ChartContainer />,


I inspected the page and realized this, that div is the tooltip and thats working normally, k-animation-container-show class, top and left properties on style;

and this one, is the tooltip that doest appear in the screen, does not have all class and style, just doesnt show up, 

However, the component inside that div was rendered, as can you see

Im using this version



Last Updated: 15 Oct 2021 05:18 by ADMIN


  1. Create a DateTimePicker.
  2. Use its value prop to programmatically control the value the control uses.
  3. Add clickable Button (or other means) to programmatically set the value to an invalid date (i.e. something like new Date("invalid!").
  4. Click the Button.  The date displayed becomes "NaN/NaN/NaN 12:NaN PM".  I suppose this is reasonable.
  5. Now, click the calendar popup icon on the right-hand side of the component.


Displays a calendar popup, perhaps defaulting to the current date & time.


Throws an exception visible in the JavaScript console.  Replaces the UI with an error message.


import * as React from 'react';
import * as ReactDOM from 'react-dom';

import {
} from '@progress/kendo-react-dateinputs';
import { Button } from '@progress/kendo-react-buttons';

const App = () => {
  const [date, setDate] = React.useState(new Date());

  const handleChange = (event: DateTimePickerChangeEvent) => {

  const handleClick = () => {
    setDate(new Date('invaild!'));

  return (
      <div className="example-wrapper">
          (use Alt+<code>↓</code> to open the date-time selector, <code>←</code>{' '}
          and <code>→</code> to navigate, <code>↑</code> to increment and{' '}
          <code>↓</code> to decrement the value)
        <DateTimePicker onChange={handleChange} value={date} />
      <Button onClick={handleClick}>
        Click me, then the calendar, to break the DateTimePicker.

ReactDOM.render(<App />, document.querySelector('my-app'));
Important note: This POC code uses version 4.9.0 of kendo-react-buttons.  I do not know what that translates to in terms of the "version" dropdown.  I can't tell if "2021.1.119" is applicable here.
Last Updated: 26 Aug 2021 10:44 by ADMIN

Hi Team, 

I have found an issue in the Grid Component that I think needs some attention, see below.,

## Current behavior
My GridColumns are not styling correctly when i hide/show them based on an edit state (for example). Some that have no width restrictions will the shortened then not lengthed.


## Current Version

KendoReact 4.8.0


## Expected behavior
If I hide/show a GridColumn, its width should not affect other GridColumns, only the Grid overall.


## Minimal reproduction of the problem with instructions

1. View how age is the only column visible with a width attr
2. Click "Switch Mode" and notice how 'Id' is not added, but a width of 80 is now applied to the 'lastname' column, the same width as age
3. Click "Switch Mode" back to view, and see how id is removed and a width of 60 is applied to the 'firstname' column.


## Investigation:
Some investigation in the DOPM revealed that the issue is centred around the <colgroup> of the Grid's <table>:
- step 2 does the following to the <col>s in the <colgroup>
  - add a new col to the beginning with a width, for the Id column
  - add a new col to the end with a width, for the Age column
  - DOES NOT clear the width of the col group that used to be the age column

- step 3
 - Simply removes the last <col> in the group. Does not affect hte attributes of the remaining <col>s


I hope this was informative and can be resolved soon.

Kind Regards,

Last Updated: 06 Aug 2021 10:23 by ADMIN
  1. Open the using valid credentials.
  2. open any related article.
  3. Navigate to 'Reply' button and invoke it.
  4. Navigate to 'ordered list' button and invoke it.
  5. Navigate to the edit region and type some ordered list items.
  6. Now, Navigate to the ordered list items and listen to Narrator announcement.

Actual Result:

On navigating to ordered list items with arrow keys, Narrator is only announcing first letters of the text and while navigating with 'caps-arrow' keys, Narrator is only announcing position details of the list items.

Note: this issue is not observed with nvda

Nvda version: 2020.2


On navigating to ordered list items with 'arrow keys' or using 'caps-arrow' keys, Narrator should announce the whole text of the list item including position details.

User Impact 
Knowing how many items are in a list is extremely useful to assistive technology users as they can know if they should attempt to skip the list, navigate to the end, help them recall placement of certain items, or orient themselves within the list.  

Last Updated: 27 Apr 2021 10:44 by ADMIN
Created by: Aske Hippe
Comments: 1
Type: Bug Report

The navigation sidebar smooth scroll animation doesn't work for the Calendar component.

Here is a codesandbox that showcases the issue:

Thanks in advance for fixing this :-)


Last Updated: 27 Apr 2021 10:42 by ADMIN
Created by: Aske Hippe
Comments: 1
Type: Bug Report

Hi there!

I've written this component for a custom message input box for the Chat in Conversational UI for React:

import { ChatMessageBoxProps } from '@progress/kendo-react-conversational-ui'
import { FC } from 'react'

const CustomChatMessageBox: FC<ChatMessageBoxProps> = (props) => {
  return (
				className="h-full w-full text-base md:text-sm focus:outline-none"

export default CustomChatMessageBox

I'm supplying this component to the `messageBox` prop of the Chat component. However, sending the message doesn't work; neither by pressing enter or pressing the send button. If I replace the input with props.messageInput, it works.

Any help in fixing this will be greatly appreciated!

Thank in advance :-)

Last Updated: 27 Apr 2021 10:07 by ADMIN

The width of the Kendo React DatePicker can become small due to the container width.

In such case, consider the following use case

Users select the date part (year) and start incrementing it by the "up" key. The year date part is selected, but is partially visible,

and the users do not see the date part that they are currently modifying, while they can fully see the other date parts that are not currently in focus.


The DateInput needs a horizontal scrolling to ensure that a focused date part is fully visible to the users in case if the width of the component is narrow.


Please check the case here 

Last Updated: 27 Apr 2021 09:38 by ADMIN
Last Updated: 27 Apr 2021 07:42 by ADMIN
Created by: Andy
Comments: 1
Type: Bug Report

DateTimePicker opens above or below the link to open it, however when it's in the middle of a page, it will choose to open below and sometimes require scrolling to see all the buttons.

Would be better, if it were to open offscreen, it should be "pinned" to the bottom edge.  Same for right/left/top borders of the screen.

Certain containers also make it impossible to scroll down to see the buttons, so that creates a real problem. The above proposal would fix this.



using fairly vanilla implementation of the component:

      defaultValue={new Date(ActivationDate.toString())}

Last Updated: 24 Feb 2021 12:13 by ADMIN

Defined a date rang. But it allows to enter a date larger than a max date of the range. Both via calendar and manually.

const minDate = new Date(1, 1, 1);
const maxDate = new Date(9999, 12, 31);

          return (
              <DatePicker value = {this.state.value}

Last Updated: 20 Oct 2020 10:36 by ADMIN
Created by: Imported User
Comments: 0
Type: Feature Request
Currently, using npm install --save @progress/kendo-theme-material will get the standard Material Design theme for use across the React Components, but why is Material Black not available this way? (npm install --save @progress/kendo-theme-materialBlack)
Last Updated: 20 Oct 2020 10:32 by ADMIN
                    style={{ height: '400px', width: '500px' }}
                    <Column field="ProductID" title="ID" width="45px" locked />
                    <Column field="ProductName" title="Name" width="250px" />
                    <Column field="Category.CategoryName" title="CategoryName" />
                    <Column field="UnitPrice" title="Price" width="90px" />
                    <Column field="UnitsInStock" title="In stock" width="90px" />
                    <Column field="UnitsOnOrder" title="On order" width="90px" />
                    <Column field="Discontinued" width="120px" locked={true} />
                    <Column field="QuantityPerUnit" title="Additional details" width="250px" />
Last Updated: 20 Oct 2020 10:29 by ADMIN


There was an error calling “ chart.surface.redraw() ” 


  onRender = (args,mapValues,stackedOrderBy) => {              
        const chart =;      

        const valueAxis = chart.findAxisByName("valueAxis");
        const categoryAxis = chart.findAxisByName("categoryAxis");

        if (!chart) return;        

           let x= 1;
            if( stackedOrderBy!="Ascending")

            let axis = categoryAxis.options;

            axis.categories = axis.categories.sort(function (a, b) {
                if (mapValues[a] < mapValues[b]) {
                return -1*x;
                if (mapValues[a] > mapValues[b]) {
                return 1*x;

                return 0;


Last Updated: 21 Jul 2020 10:24 by ADMIN
Created by: FIIG Securities
Comments: 3
Type: Bug Report

There seems to be bug in the React Grid around date formatting inconsistencies:

Current behavior
When entering a date format of {0:dd/MM/yyyy} for a ColumnData prop, when in edit mode a calendar picker shows the date format as US date of MM/dd/yyyy.Expected behavior
The date should show as dd/MM/yyyy per the requested date format.Minimal reproduction of the problem with instructions
Create a Kendo grid with one column with following ColumnData:
const settlementDate: ColumnData = {
field: 'settlementDate',
title: 'Setlement Date',
format: '{0:dd/MM/yyyy}',
filterable: true,
filter: 'date',
editor: 'date'
Note that the date is displayed as MM/dd/yyyy
Change the format to "dd/MM/yyyy"
Note that when in view mode the date is displayed as "dd/MM/yyyy".
What is the motivation or use case for changing the behavior?
Currently I have to create a custom date cell for every instance of using a date field in my grid which is less than ideal.Environment
Package versions:
@progress/kendo-base-component-react-wrapper@2019.2.606 deduped
@progress/kendo-ui@2019.3.1113Browser:Chrome (desktop) version 78.0.3904.108
Platform: Windows

Other information:
It appears that there is an incompatibility as to what a text display field requires as opposed to what a date picker requires. For text display it requires a format of '{0:dd/MM/yyyy}' whereas the datepicker requires a format of "dd/MM/yyyy".

Last Updated: 03 Jul 2020 06:00 by ADMIN

I am trying to lock first column in Grid, when I used the instructions in Kendo React documentation I tried the same but as you see in screenshots it's not working.

Last Updated: 25 Feb 2020 09:19 by ADMIN

When using the tab strip, it'd be nice if there were an event that fired before the tab changed so that we could abort a tab chat. For example, if a tab has some input fields that allow a user to change some setting but they change the tab without hitting save or something. It'd be nice if I could pop up a modal and ask them to save before changing tab.

The function could just return true or false to allow the tab change, etc.

Last Updated: 24 Dec 2019 08:07 by ADMIN

In the case of multiple columns headers, the column width of the KendoReact  TreeList  is invalid



const columns = [
   { field: 'name', title: 'Name', width: 300, expandable: true }
    { title: 'Employee Details', width: 600, children: [
        { field: 'position', title: 'Position', width: 500 },
        { field: 'fullTime', title: 'Full Time', width: 100 }
    ] }
Last Updated: 24 Dec 2019 08:03 by ADMIN
When can I release the Spreadsheet in Kendo UI for React,not Wrapper
Last Updated: 21 Nov 2019 06:08 by ADMIN
Created by: Ruslan
Comments: 2
Type: Feature Request



From the last conversation through the webinar

jQuery Filter looks cool! What about Kendo React Filter?


Right now we do not have a KendoReact Filter component, but feel free to drop us a line in our feedback portal and we will consider implementing it.

1 2