We are implementing the application level zooming.

When user changes the zoom level from "100%" to , say, "200%",

all the components on the web page rerender proportionally bigger.

And we need to zoom the DatePicker react component as well.

We tried to use unofficial "zoom" CSS style property

https://developer.mozilla.org/en-US/docs/Web/CSS/zoom

and "scale" CSS function, but that does not give a good solution.

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()

If that takes time, please advise an approach how we can achieve zooming of the DatePicker/DateInput react component.

So far only interested in zooming of the DateInput and calendar toggle button (not popup Calendar itself).

if (_this.element && document.activeElement === _this.element) {
                _this.element.setSelectionRange(selection.start, selection.end);
            }

@progress/kendo-react-dateinputs": "^4.3.0"

DatePicker and DateInput React components malfunction when rendered inside iFrame.

For example, key navigation between date parts is not working for the DateInput/DatePicker rendered inside iFrame.

When user clicks on the month part of the date, the month part does not get selected.

Same for day or year part.

The reason is a code similar to this in DateInput.js:

if (_this.element && document.activeElement === _this.element) {
                _this.element.setSelectionRange(selection.start, selection.end);
            }

if (document.activeElement !== _this.element) 

This code references the top level "document".

If the React component is rendered inside iFrame, we need to use the contentDocument of the iFrame to have this code working as expected.

Could replace "document" with "_this.element.ownerDocument" to make it work inside iFrame as well as in the top level window.

Now "document.activeElement" always returns the reference to the iFrame element rather than the expected date input element inside iFrame.

Hello support team,

Can you please provide an example in kendo react to upload > crop > save cropped image. My use case is that user should be able to choose, crop and save their profile photo.

Thank you.

Hello Telerik, I wanna ask you if you have any carousel component. A need slide some div elements. Thanks for your answer.

BR

Vladimír

Hi Support, 

Is there any org chat component or similar components in Kendo React that is similar to the Org Chart in this link https://demos.telerik.com/aspnet-ajax/orgchart/examples/overview/defaultcs.aspx?

Thanks & Regards,

Eason

1) Use this StackBlitz application: https://react-scwx3i.stackblitz.io - This is based on Telerik's own DatePicker React example.

2) Highlight the AM/PM section.

3) Try to change the AM/PM section via typing. It doesn't change. Note that other fields in the date/time picker are responsive to keyboard input.

Expectation is that the AM/PM section should respect at least "A" and "P" inputs.

Is there a TimeSpan picker control.   I need to pass in the Ticks and allow the user to change the Days, Hours, Minutes, etc...

When changing the popup setting "appendTo" to a different element that has a wider width then the input of the dropdown multiselect is not working properly.
The dropdown is attached to that element but the styling is not changing to that parent and is just taking the width of it initial parent.

Example can be found here:

https://stackblitz.com/edit/react-wwhosr-awnrdm?file=app/main.jsx

When using the standalone popup control this is working as it should and adjusting it's width based on the parent it's appended to.

Add an option to show a callout (arrow) element for the Chart tooltip.

Similar to the Tooltip component option:

https://www.telerik.com/kendo-react-ui/components/tooltip/api/TooltipProps/#toc-showcallout

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 (
		<>
			<input
				type="text"
				name="message"
				className="h-full w-full text-base md:text-sm focus:outline-none"
			/>
			{props.sendButton}
		</>
  )
}

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 :-)

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

Here is a codesandbox that showcases the issue: https://codesandbox.io/s/hopeful-river-sk4oc?fontsize=14&hidenavigation=1&theme=dark

Thanks in advance for fixing this :-)

Hello,

i am new to React and Kendo React UI.

I am reading the documentation for Gantt, and if i understand it correctly i can customize header column (headerCell?), but I dont know how. Is there any examle ?

I wound like to customize the column with dates.

Thank you, Matjaz Reberc

I would like to use my custom component as the chat input. Is it possible to add new prop to chat component? Similar to DatePicker's "dateInput" prop.

Hi,

How to set the default operator of a second date filter which is different from first,

I have attached the screenshot for two different operator i need in case of date filter.

Hi,

How to select the tree-list column like excel column selection ?

How can be copy selected column data with the another column  ?

please provide the reference link or example.

--

Is it possible to have a multirange support in the RangeSlider like the following (https://zillow.github.io/react-slider/):

It could be helpful to get multi range values using only one component. Easier for the developer to manage the data and for the user to select it.