Set the default width of the MultiColumnComboBox columns based on the input width.

In order to position the Popup of the MultiColumnComboBox correctly, we need each column to have fixed width.

Currently, we are setting the default width to 200px for each column that has not width set from the options.

We can add a second option to take the width of the input, subtract the width of the columns with fixed width and divide the remaining space between the other columns.

Hello team,

We work on a product that features a large set of input components that are based on the Kendo inputs and dropdowns. We have custom designs that require us to customize the Popups of comboboxes, multi-selects, color pickers, etc with specific layout and styling, open/close animations, blur handling and keyboard interactions (e.g. closing on Esc). This is done fairly easy with the Date Input components (DatePicker, DateTimePicker, DateRangePicker, TimePicker) as they expose such property:

popup?: React.ComponentType<PopupProps>;

However most other controls that use a Popup internally expose just PopupSettings that is not enough for us even with the "appendTo" option.

We would be happy to see a similar ability (as in Date Inputs) to inject the Popup component in:

• Components in the "@progress/kendo-react-dropdowns" package.
  Most of them simply reuse the same ListContainer component that renders the Popup.
• ColorPicker in the "@progress/kendo-react-inputs" package.

I guess that customizing the popup in the DropDownButton, FloatingActionButton and SplitButton would also be nice to have but for those CSS styling does good enough job for us.

Regards

Hello,

The Form component does not allow me to submit unless I modify the initial values. We have a Form that is provided with initial values that may not need to be modified by the user first - the data is all valid and acceptable. The user, currently, would need to purposefully modify one of the Field values in order to get the Form to realize that it can be submitted.

I'm aware of the submit click event but that event does not perform any validation.

I believe there needs to be some middle area where the Form can be provided initial values and be allowed to submit without having to modify the form first.

I have created a code sample showing the scenario below ...

https://stackblitz.com/edit/react-wf5veh-reyjj3?file=app/main.jsx

Thank you

Currently, the TabStrip has a built-in Fade animation.

We provide a property to allow setting different types of animations like Slide, Push etc.

We currently use grouping in the Kendo Grid, however the groups are always sorted alphabetically by the name of the group.

In our case, we want the groups to be sorted another way: an order value that corresponds to the group name.

To do this, it would be good if we could specify a comparison function, and have it take a object we provide (a map between the group name and order value).

We currently work around this by prepending a character to the group name to have it sort correctly (see screenshot). As you can see, it's not very appealing.

We are using @progress/kendo-react-grid@4.6.0

Hi there, 

I would like know how can we customize the TimePicker of the DateTime picker?

We can perform the customization of calendar as guided by the link below.

https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/custom-rendering/#toc-customizing-the-calendar

My question is how can I customize the Time Picker of the Datetime Picker since I can't find the time picker relevant props from the DateTimePickerProps?

Thank you!

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