Set up a TimePicker with a `min` and `max`. For example

            min={new Date(0, 0, 0, 0, 0)}
            max={new Date(0, 0, 0, 5, 0)}

Click on the text input to focus the 'hours' portion.

Roll the mouse scrollwheel up/down to change the hours.

You can 'scroll' past 5:00 and set the time to anything above the max.

You can also use the keyboard to enter any number outside the min/max.

Is this the expected behavior? Do we always have to add our own validation to check the min/max ourselves?

Hello,

Please allow the Form component to submit even if it's not marked as modified internally. I am trying to use the Form within a Stepper workflow, and the Form can have default values based on what they submitted in the previous Step. If they return to the Step with the Form on it, though, and those initial values are not changed while displaying the Form, then the Form internally is not marked as modified, therefor the submit event never fires.

It'd be nice if we could have a boolean to tell the Form if we care to block submission based on modified or not.

Thank you

Hi Team,

I am facing one challenge to create a Calendar view with multiple date selection with multiple colors.

Please suggest and share class component references to achieve the same.

Please refer attached video or do let me know if you have any questions.

Thanks.

Hello

I'm using the menu component version 4.13

I'd like to change the style of the active menu item but could not find any examples. Here's one of my menu items

i'm following your example to do the routing

I'm using react router dom.

Do you have an example for how to change the css of the active menu item?

Thank you.

Fabian

Hello Support Team,

We are migrating our ASP MVC application to React JS and need your help in scheduler time-line view. In ASP MVC you provided the functionality to render the custom template for Resource Title or we can say for the user name. But we are unable to implement the same functionality in react js, and this is the important module of our application. Our application client strictly say he needs 100% same application as it is in ASP MVC version.

We request you to please add this feature to the Scheduler in the coming updates & this would be useful to the other users also.

Thank You.

A horizontal scroller or scroll list?  A list of items or chips can be scrolled through horizontally, either by using arrow buttons or drag.

This is a common way of accessing a long list of items on a phone - by swiping left or right on the list with your finger.

There are a couple of horizontal scroller controls available for react - but they are not complete, buggy and not supported.

Hey,

It would be great if the 'allDaySlot' property on the Scheduler component could be added to the Reactjs version. We would like to hide the all day slot on our scheduler but currently this isn't possible.

Kind regards,

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 https://www.telerik.com/kendo-react-ui/components/dateinputs/daterangepicker/

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.

I use a Datepicker with 'he' loclae. It works fine, but the week's days are displayed from left to right instead of right to left as expected.
I tried to add className = 'k-rtl' but it did not help.
Is there a way to change that?

Here is a demonstration of the problem:

https://stackblitz.com/edit/react-vkzwzo?file=app%2Fmain.jsx

Hi Team,

While navigating using keyboard tab key focus is not moving to multiple controls such as Bar graphs and legends in kendo React Charts.

Screen reader should narrate proper name, role and value for the controls.

NVDA Focus is not moving to the bar graphs and legends and it is not narrating proper value for the bar graphs and legends.

which includes following components

• Chart
• ChartArea,
• ChartSeries
• ChartSeriesItem
• ChartCategoryAxis
• ChartCategoryAxisItem
• ChartValueAxis
• ChartValueAxisItem
• ChartLegend
• ChartTooltip
• ChartSeriesItemTooltip

Can you please suggest if any,

Thanks & Regards,

Sairoopa.Ch

Hi,

The Telerik example for Inline Editing with Custom Editors uses a dropdown list with reference data hardcoded into the custom dropdown cell. This isn't a realistic scenario for for production code with dynamic reference data. If you pass the reference data for the dropdown to the custom cell then the dropdown loses focus every time you change the selected value. This can be seen by shifting the localizedData in the Telerik example referenced earlier from myDropDownCell.tsx to main and passing it as a parameter: https://stackblitz.com/edit/react-9ycz1i?file=app/main.tsx

Is there a workaround for this issue?

Kind regards,

David

Hi,

I'm using GridColumnMenuCheckboxFilter in column that holds dates, but the dates shown within the GridColumnMenuCheckboxFilter are not formatted.

Is there a way to format the dates like dd/mm/yyyy?

Here is an axample: https://stackblitz.com/edit/react-4cxw2e?file=app/main.jsx

Thank you!

Hello

Currently, the KendoReact Grid can only select all columns as shown in this demo:

https://www.telerik.com/kendo-react-ui/components/grid/selection/#toc-customizing-the-selection

We wish to be able to select only specific columns programmatically. 

Hi,

I am using Kendo react richtext editor and insert image plugin as it is shown in this page

https://www.telerik.com/kendo-react-ui/components/editor/images/

I am able to insert/upload image, but not able to resize image after adding it, similar to MS word.

After inserting image it should be resizable, so that user can easily resize the image as required.

Please let me know how can I achieve image resizing through mouse in above example.

Thanks
Vikram E

Is the Chunk upload for file is not there for react. I Could find the chunk upload option for Jquery and Angular but not for react.

Is it not available yet/ when can we expect that?

The Kendo Form component internally uses a FormContext which is ued by FormElement and Field. However this Context is not exported in @progress/kendo-react-form

Please export this context. It would really help with the usability of the Form component for complex forms. There are things in the FormContext that are not available in the formRenderProps.

Alternatively, put everything from the context into the FormRenderProps. These don't seem like they needed to be 2 different objects.

Specifically with the Context you can see what fields have been `touched`, `visited` and `modified`. But with the render props you only get a boolean if any field has been touched, visited or modified; not the names of the fields.

A few suggestions for the React Grid (as of v5.0.1) to help devs conform to accessibility compliance...

1) Standard HTML tables can contains a <caption> element, which screenreaders will use as the descriptive name of the table. Kendo Grid does not appear to have any way to name the table.

2) Related to number 1, other ways to assign a descriptive name to a table may be to include a `title`, `aria-label` or `aria-describedby` attributes, but none of these work on <Grid>. They are not rendered into the HTML if passed as props.

3) Allow GridCell and other Cell components to take `children` to render. The current documentation generally advises us to override the `cell={}` prop on a GridColumn for custom cell rendering. What is not listed in the docs is that doing what seems like the obvious thing:

<GridColumn cell={() => <td>myContent</td>} />

actually breaks accessibility. At a minimum the cell MUST get the attributes

            role={'gridcell'}
            aria-colindex={props.ariaColumnIndex}

to have the table actually be represented correctly in most screen readers. The Kendo <GridCell> component would normally add these, but only renders the field from the dataItem. It can only render custom data if the `render` prop is set, in which case it yet again does not render the `<td role= aria-colindex=` portions on it's own.

What I'm getting at is, everyone who ever wanted to render a custom cell in Keno Grid always had to make their own cell component that added at least the `role` and `aria-colindex` attributes, and if they didn't, they probably unknowingly broke accessibility.

Kendo could make this clearer in the docs (including the accessibility page for the Grid), and could easily alter GridCell to render `children` if they are passed. Then we could do:

<GridColumn cell={<GridCell><button>yay</button></GridCell>} />

and have the rendered HTML:

<td colSpan="1" style="" class="" role="gridcell" aria-colindex="1" aria-selected="false"><button>yay</button></td>

I think in GridCell this would be as easy as changing:

        defaultRendering = (
          <td
            colSpan={props.colSpan}
            style={props.style}
            className={className}
            role={'gridcell'}
            aria-colindex={props.ariaColumnIndex}
            aria-selected={props.isSelected}
            {...{[GRID_COL_INDEX_ATTRIBUTE]: props.columnIndex}}
            {...navigationAttributes}
          >
            {dataAsString}
          </td>

        defaultRendering = (
          <td
            colSpan={props.colSpan}
            style={props.style}
            className={className}
            role={'gridcell'}
            aria-colindex={props.ariaColumnIndex}
            aria-selected={props.isSelected}
            {...{[GRID_COL_INDEX_ATTRIBUTE]: props.columnIndex}}
            {...navigationAttributes}
          >
            {children || dataAsString}
          </td>