Please allow the Switch component to accept a title prop so that the Tooltip component can be used with Switch. Switch doesn't really support long labels, or labels at all in some themes, so it would be nice to be able to use Tooltip component with Switch component.

Dear Support Team,

 I have numbers of kendo charts in my app, but I need to modify the boder-radius for the tooltip of my donut chart.

I've checked, with the browser, the existence of a couple of CSS classes I can work on, but they are generic and they work for all the charts in the app:

.k-sparkline-tooltip-wrapper>.k-popup, .k-chart-tooltip-wrapper>.k-popup (classes for the ChartTooltip component: for this I can ad an ID)

Inside this component the Kendo library creates a new component, which I can't configure any IDs on and owns the css class k-chart-tooltip k-chart-tooltip-inverse needed to override the border-radius property.

Is there a workaround or any other configuration to set the border radius for a tooltip of a single chart, without modify all other charts in my app?

Thank you

Kind regards

 

Navigating the items in the DropDownList by the first letter of the item is something that is supported by the KendoUI for jQuery DropDownList. 

In this demo, you can see the behavior for the Categories field. When Categories has focus, you can type "c" and it navigates to the first "c" category "Condiments". If you type "c" a second time, it navigates to "Confections".

https://demos.telerik.com/kendo-ui/dropdownlist/index

We have replaced some of our pages that used to use KendoUI for jQuery with React pages using Kendo React, and we are getting user complaints that this behavior is no longer supported for our drop downs.

I understand that we can use the "filter" functionality for the Kendo React DropDownList, but we would rather have the previous "first letter navigation" functionality supported by Kendo React.

Description of the problem

In the Grid component with infinite scrolling, when a user scrolls down, the grid will bounce them back up to the first row when loading the next couple of rows. We get this same behavior in our application so it doesn't seem to be a mistake in the demo. We've encountered this issue in both version 1.x and the most recent version of Kendo.

To reproduce:

• go to the demo for this component;
• slowly scroll down in the grid component.

Code, screenshots, etc

Since this is also broken in the docs, I don't think it's necessary to add screenshots or code.

It's annoying because:

1) Every time I go to a new page or refresh my browser it comes up bright yellow

2) It blocks the search bar which I use a lot

3) The seminar is over which just annoys me more

I'm OK if you want to tell me once like a privacy notice, but don't tell me every time my web page refreshes and overwrite part of the page.

Hi,

I was just running through the new features of KendoReact 2021 R2 and am very keen to start implementing.

One of my colleagues pointed out that there is an ellipses after each checkbox when using checkboxes under Grid Selection, see https://www.telerik.com/kendo-react-ui/components/grid/selection/#toc-customizing-the-selection). It sees this is the casein MS Edge and Chrome. I use Firefox, so didnt notice it.

Thanks for the new features, keep it up.

Regards,
Grant

Hi Team,

We are using Kendo react scheduler in one of our project. We need a custom marker in a scheduler control similar to current date time marker in a Timeline view. I have attached the image for reference.

Please let us know if there is any property available or any other ways to achieve this functionality. Also, how can we place it properly in a scheduler slot based on specific date and time like May 12, 2020 13:40.

Regards,

Abhinav

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 {
    Chart,
    ChartSeries,
    ChartSeriesItem,
    ChartCategoryAxis,
    ChartCategoryAxisItem,
    ChartTitle,
    ChartLegend,
    ChartTooltip,
    ChartValueAxis,
    ChartValueAxisItem
} 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 = () => (
  <Chart>
      <ChartTooltip
    shared={true}
    />
 <ChartValueAxis>
    {valueAxis.map((e, idx) => (
      <ChartValueAxisItem
        key={idx}
        name={name}
        labels={{
          visible: e.visible !== undefined ? e.visible : true,
          format: e.format,
          rotation: "auto",
          font: e.font,
        }}
      />
    ))}
  </ChartValueAxis>
    <ChartSeries>
      {seriesValues.map((item, idx) => (
        <ChartSeriesItem
          key={idx}
          type={item.type}
          data={item.data}
          name={item.name}
          spacing={item.spacing}
          labels={{
            font: '10px',
            format: "{0:n2}"
          }}

                />))}
    </ChartSeries>
  </Chart>
);

ReactDOM.render(
  <ChartContainer />,
    document.querySelector('my-app')
);

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

Can the Kendo UI Multiselect possibly select the "active" item when tab is pressed? It currently does this for the enter key.

We are building a Typescript Create React App application, and we would really like to be able to allow our users to type a partial entry and then allow tab to complete the selection and move on to the next input.

I tried to make it have this behavior but it became a fairly large mess and seems like it could be facilitated in the source code with less mess.

Even possibly just exposing access to more events would make it easier, like an onKeyDown, but that would still require some additional code to figure out what the current active item is.

Currently using these below, not sure what "Version" below in this form those belong to so I just guessed:

WHAT:
Add custom cell rendering option for MultiColumnComboBoxColumn. Just like the 'cell' in GridColumnProps.

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>

Please provide alphabet OrderedList tool.

Example:

a. apple

b. orange

c. banana

I am trying to create a radial gauge with gradient fill but I don't see any help regarding this. Please see the below image of what actually I am looking for. 

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:

<DateTimePicker
      defaultValue={new Date(ActivationDate.toString())}
      onChange={handleActivationChange}
      width={'8rem'}
 />