The KendoReact `Upload` component displays a "file validation message" when an upload/save attempt fails, as can be seen in the following screenshot.

This message is provided by the `getFileValidationMessage()` method of the `UploadListSingleItem` class and is triggered when the passed parameter, `isUploadFailed` is `true`.

`isUploadFailed` is determined by the method `getFileStatus()` provided by the local-to-the-Upload-component utils file. This method is returning `isUploadFailed` as true only when the compared file status is set to `UploadFileStatus.UploadFailed`.

This is wonderful when uploading/saving - and it's great to show the user that something failed during the attempted upload/save.

I request similar functionality when performing file removal so we could similarly alert the user that the attempted removal of the file failed. Something similar to the below:

Add a disabled property to ListBox and ListboxToolbar.

Listbox

• onItemClick should be disabled.
• onHover should be turned off.

ListBoxToolbar

• All tool-buttons should be disabled.
• onToolClick should be disabled.

I want the kendo tooltip should show on trend line points and when I move from that point it should not visible. it is visible when I am in the chart area and it hides when I leave the chart area, but I want it should hide when I leave the line point.

Hi, I am Lavanya

I am using kendo UI  past few days the react-coffee warehouse is very useful to learn . But the finance application is in typescript so unable to learn the whole application. so kindly give any sample application in js or jsx .if possible. 

thanks

Hi, I am Lavanya!

in my dropdown list, there are horizontal layouts I need to change to the vertical dropdown list

and also I have attached bar data in that I need to make a dropdown filter of the month how can I use that

Current Behaviour

When I lock columns In data grid with resizable columns - for example 1st and 3th and resize the 1st one - after we scroll horizontally the 3th column goes on top of the 1st column. This happens when we haven't set a width prop.

Expected Behaviour

Resized columns not overflowing on each other when scrolling horizontally and don't have width prop.

MInimal Reproduction

I'm providing a reproduction from Kendo React code examples.
https://stackblitz.com/edit/react-xvxy59?file=app%2Fmain.jsx

I have attached files, in which there is an app bar content there is a dropdown in the dropdown there are four elements, in that I need four drawer container on the left side as I attached by clicking the single dropdown, how can I attach 4 drawer container in a single project 

Thank you

Currently the React DateRangePicker component shows its calendar popup any time either of the date text inputs are focused.

It would be nice to have more control over this behavior buy providing a prop to customize what actions open the popup.

Our use case is that currently the DateRangePicker (as of v5.11.0) cannot be used to make a 508 accessibility compliant site (reference support ticket 1597095  : which IMO is a bug, but trying to also find a workaround that we can roll out quickly) due to the way the popup breaks tab order in the browser. If keyboard users could tab into the Start/End inputs without the popup opening, then they could type in a date and tab to the next control (currently they cannot because the popup breaks tab order). A mouse user clicking into the input would be fine to see the popup. So having a prop to specify the auto-open should happen in click, not on focus, with a keyboard shortcut to open the popup if they want it (which already exists as alt+down), would be an easy workaround to get us back into 508 compliance.

I could imagine such a pop to control auto-open of the calendar popup to take one of 3 values; 'focus' (same behavior as current) 'click' (open on click, but not on keyboard focus) 'none' (no auto open. user can press alt+down to open).

Hi,

If you use kendo-theme-bootstrap for most Kendo React inputs, it results in bootstrap styling being applied to the input e.g. https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/ or https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/. With the Bootstrap theme selected the DatePicker and Combobox have blue shadows on focus.

This is not true for the DropDrownList: https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdownlist/. The border on focus does not match Bootstrap styling.

Kind regards,

David

Hi,

Not sure what the preferred way to report a problem is. I have posted it on GitHub as well:
https://github.com/telerik/kendo-react/issues/1519

Could someone help me out with this issue?

Thank you in advance.

Request to have the sliderbar have different colors. It is for user experince, knowing that the slider is going either to the sucess or fail.

Currently, there is a following signature of function "rowRender" passed to React Grid:

rowRender?: (row: React.ReactElement<HTMLTableRowElement>, props: GridRowProps) => React.ReactNode;

I managed to access something which I assume represents this index somehow by using "row._owner.index" although I'm not completely sure if that is always identical to the index of the row being rendered.

It would be very helpful if an index of a rendered row could be accessed as follows:

rowRender?: (row: React.ReactElement<HTMLTableRowElement>, props: GridRowProps, index: number) => React.ReactNode;

hi,

I have attached the file there is a pie chart the labels are outside the pie chart, so I need the labels inside the pie chart ,

also in the bullet chart, I am unable to rid of the labels and title.  

thank you

If the datagrid inside popup is wider than max screen width, then there is no scrollbar to scroll it horizontally, which means user cannot see the whole datagrid.

When I tried to somehow hack it and set max width of 100vw for the datagrid, then it partially worked - the content could be scrolled horizontally, but the header remained static; position of header cells didn't match positions of scrolled body cells, which would be confusing for the user.

How to reproduce:

1. Open this link: the componet preview

2. Set screen width to 500px.

3. Open the datagrid using the input arrow button.

Result:

The datagrid is truncated horizontally.

Expected:

The datagrid can be scrolled horizontally..

We would like to use Kendo React to build a micro frontend UI but we did not found any relevant information that this is currently supported.

The main issue we are facing is how it isolate Kendo theme styling between different micro frontends.

Let's say we have 2 micro frontends A and B:

- A is using Kendo v6.

- B is using Kendo v7 (or some other future/past version).

Both of them will include their global Kendo styles which will collide.

After some investigation, we came up with 2 possible approaches:

1. Isolating micro frontends using shadow DOM. This is the most common technique but unfortunately not supported by Kendo React yet.
2. Prepend custom class to all Kendo CSS selectors (for example ".microfronend-a .k-button" instead of just ".k-button").

We have experimented with the second approach and it seems like a way to go. It also required to append all popups to root DOM node of a micro frontend which can be done easily using PopupPropsContext.

But adding a class to all Kendo CSS selector is technically not a trivial task. It would be nice if Kendo supported this out of the box, for example by providing some SCSS configuration variable.

Given the simple example:

const RatingContainer = () => {
  const [ratingValue, setRatingValue] = useState(0);

  const clearRating = () => {
    setRatingValue(0);
  }

  const onRatingChange = (event) => {
    setRatingValue(event.value);
  }

  return <div>
    <Rating 
      value={ratingValue}
      onChange={onRatingChange}
    />
    <Button
      onClick={clearRating}
    >
      Clear
    </Button>
  </div>
}

export default RatingContainer;

The Rating component behaves as expected when updating `ratingValue` through the Rating component. However, when I want to clear the rating value with the 'Clear' button to update the `ratingValue`, the number of stars displayed doesn't update reflect the value of `ratingValue`.

Here is a subsection of my package.json file.

   "@progress/kendo-data-query": "^1.6.0",
    "@progress/kendo-drawing": "^1.17.5",
    "@progress/kendo-licensing": "^1.3.0",
    "@progress/kendo-react-animation": "^5.13.0",
    "@progress/kendo-react-buttons": "^5.13.0",
    "@progress/kendo-react-charts": "^5.13.0",
    "@progress/kendo-react-common": "^5.13.0",
    "@progress/kendo-react-data-tools": "^5.13.0",
    "@progress/kendo-react-dateinputs": "^5.13.0",
    "@progress/kendo-react-dialogs": "^5.13.0",
    "@progress/kendo-react-dropdowns": "^5.13.0",
    "@progress/kendo-react-editor": "^5.13.0",
    "@progress/kendo-react-excel-export": "^5.13.0",
    "@progress/kendo-react-form": "^5.13.0",
    "@progress/kendo-react-grid": "^5.13.0",
    "@progress/kendo-react-indicators": "^5.13.0",
    "@progress/kendo-react-inputs": "^5.13.0",
    "@progress/kendo-react-intl": "^5.13.0",
    "@progress/kendo-react-labels": "^5.13.0",
    "@progress/kendo-react-layout": "^5.13.0",
    "@progress/kendo-react-listview": "^5.13.0",
    "@progress/kendo-react-notification": "^5.13.0",
    "@progress/kendo-react-pdf": "^5.13.0",
    "@progress/kendo-react-progressbars": "^5.13.0",
    "@progress/kendo-react-tooltip": "^5.13.0",
    "@progress/kendo-react-treelist": "^5.13.0",
    "@progress/kendo-react-treeview": "^5.13.0",
    "@progress/kendo-react-upload": "^5.13.0",
    "@progress/kendo-svg-icons": "1.4.2",
    "@progress/kendo-theme-bootstrap": "^5.2.0",