Currently, the onLabel and offLabel properties can only be set to string values. There should be an option that allows setting icons for the Switch component.

Environment (OS, Application, Versions)

Repro Steps

1. Open URL: Column Menu - Kendo React (telerik.com)
2. Navigate to context menu controls available on column headers of Basic usage table.
3. Verify if context menu is accessible using keyboard.

Actual Results

The 'context menu' controls available on the column headers under the basic usage table are not accessible using the keyboard.

Expected Results

The 'context menu' controls available on the column headers under the basic usage table should be accessible using the keyboard.

I would like to add two tables side by side in Telerik Editor two tables side-by-side like I would in google docs for ex:

Hi, when using the Kendo React Typography component like following:

<Typograpy.h1></Typograpy.h1>

compiler gives the following warning:

Imported JSX component h6 must be in PascalCase or SCREAMING_SNAKE_CASE                                                                       react/jsx-pascal-case

The React ComboBox and Autocomplete do not support the valueRender prop, so a selected value cannot have a custom display. The DropDownList does however - they should all be consistent in this.

DropDownList reference:
React Dropdowns Library & DropDownList Component - Custom Rendering - KendoReact Docs & Demos (telerik.com)

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

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

is that possible to change the background line (grid )

how can I change the color of the grid or invisible in the kendo UI chart

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

in the kendo UI react chart I need the average line, max line, and min line targeting some value   

Please suggest which features to use with respect to the above requirements, if available.

Hi,

Can We have an admin Dashboard for KendoReact? which has some ready components Like NavBar on top and Left, Dark and Light mode, RTL, and LTR Layouts and Forms with all input Components

I Have More projects in this React MUI Admin Dashboard and now it's very hard for me to use the KendoReact Components here.

if we Have KendoReact Admin Dashboard like that it will be easy to use KendoReact components there.

Thanks

Is It Possible to Add Persian Datetime format In Datetime Picker

Thanks

React v18 has been released.

It appears that KendoReact only supports up to v17 (dependency conflicts if you try to use v18).

Can you please add support for React v18?

Thanks!

Currently, the Scheduler events are always placed between the beginning and the end of a slot, no matter if the event actually starts or ends at the slot times. So if an event for example starts at 10:10, the event is placed at the 10:00 slot line and not a little further down below, or if it ends at 11:50 the event end is placed at the 12:00 slot line. I'm talking here especially about the WeekView and the DayView.

This is not accurate enough for some events. Like for example in MS Outlook, if a event doesn't start at the full hour, the graphical representation shows it according to the start time and not at the full hour (see screenshots). We would like to request to make it possible to place events on the Scheduler so that the graphical representation of the event reflects the actual start and and time.

While I was able to calculate a margin for the event start to move it to a more accurate position, it was not possible to also set the height of the event to a calculated positition because the Scheduler doesn't allow this. According your support (see here), an event always has to end at a full slot time and can't be placed somewhere else. Calculating these things on our own brings a whole lot of other problems though (like placing overlapping events correctly, etc.) so that it would be great if the Scheduler had a setting to allow exact positioning according to times.

Currently there is no Autoscroll feature for the treelist...so when I want to drag and drop an item somewhere outside of the viewed area its klunky have to drop then scrool then drag and drop again etc.

Would really like to be able to autoscroll through the treelist

Hi,

I would like to be able to specify a Grid Column template for the data without having to replicate the entire cell and its properties. Please see below for justification:

Consider the following example of KendoReact Grid Cell customisation: https://www.telerik.com/kendo-react-ui/components/grid/styling/#toc-adding-custom-cells

Following this approach results in the loss of a lot of properties from the grid cell compared with 'default' cells e.g.

<td colspan="1" class="" role="gridcell" aria-colindex="1" aria-selected="false" data-grid-col-index="0">Chai</td>
<td style="background-color: rgba(55, 180, 0, 0.32);">18 <span class="k-icon k-i-sort-asc-sm"></span></td>

These properties are important for many reasons including accessibility. There is another example of KendoReact Grid Cell customisation that preserves these properties here: https://www.telerik.com/kendo-react-ui/components/grid/cells/#toc-customization

e.g.

<td colspan="1" class="" role="gridcell" aria-colindex="4" aria-selected="false" data-grid-col-index="3">39</td>
<td colspan="1" role="gridcell" aria-colindex="5" aria-selected="false" data-grid-col-index="4" style="color: red;">false</td>

However, there is a considerable amount of code required to achieve this:

const CustomCell = (props) => {
  const field = props.field || "";
  const value = props.dataItem[field];
  const navigationAttributes = useTableKeyboardNavigation(props.id);
  return (
    <td
      style={{
        color: value ? props.myProp[0].color : props.myProp[1].color,
      }}
      colSpan={props.colSpan}
      role={"gridcell"}
      aria-colindex={props.ariaColumnIndex}
      aria-selected={props.isSelected}
      {...{
        [GRID_COL_INDEX_ATTRIBUTE]: props.columnIndex,
      }}
      {...navigationAttributes}
    >
      {value === null ? "" : props.dataItem[field].toString()}
    </td>
  );
};

I would like to be able to define a template for a cell without having to specify these properties every time.

Kind regards,

David

The Tooltip component has a className property. Providing a class name there does not seem to apply the class to the DOM element. See my below code and attached screenshot ...

            <div className="col">
              <label className="d-block">Name</label>
              <Input value={name} required={true} onChange={handleNameChange} />
              <Tooltip className="d-inline">
                <i className="k-icon k-i-info" title="The name of the Taxonomy" />
              </Tooltip>
            </div>