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.

Description:

When the NumericTextBox is set to "c0" format and has a value of 0 ($0), it doesn't capture the first digit entered.

Reproduction Steps:

1. Set the field value to 0 ($0)
2. Hit "Tab" to blur the field
3. Hit "Shift-Tab" to focus the field (field contents will be highlighted)
4. Enter "123"
5. Repeat steps 2 through 4

Browser:

Chrome -- Version 89.0.4389.114 (Official Build) (64-bit)

Expected Behavior:

• After step 4, field shows "$123"
• After step 5, field shows "$123"

Observed Behavior:

• After step 4, the field shows "$230"
• After step 5, the field (correctly) shows "$123"

Notes:

• This bug seems to occur when the field has a value of 0 ($0) before gaining focus
• This doesn't occur when the specified format is "c2" or "n0"

Code Snippet:

<NumericTextBox format="c0" />

Step by step instructions on how to reproduce the problem

Try entering a negative value in the filter column using the StackBlitz example here https://stackblitz.com/edit/react-dx7cna?file=app/main.jsx

This works using "ES" as locale (your example) https://stackblitz.com/run/?file=app/main.jsx

Github issue here https://github.com/telerik/kendo-react/issues/897

Description:

When typing into a React autocomplete with the "suggest" prop, the component does not always display the suggestion in the dropdown. It appears that in Chrome, only the very top of the suggestion is visible in the dropdown, while in Edge, it isn't at all.

Reproduction Steps:

1. Navigate to https://www.telerik.com/kendo-react-ui/components/dropdowns/autocomplete/suggestions/
2. Type "d" into the AutoComplete in Uncontrolled Mode example

Browser:

• Chrome -- Version 89.0.4389.114 (Official Build) (64-bit)
• Edge -- Version 89.0.774.68 (Official build) (64-bit)

Expected Behavior:

• The suggestion is fully visible in the dropdown

Observed Behavior:

• The suggestion is either not visible, or only partially visible

Screenshots:

Chrome:

Edge:

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'}
 />

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. 

Please provide alphabet OrderedList tool.

Example:

a. apple

b. orange

c. banana

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>

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

The width of the Kendo React DatePicker can become small due to the container width.

In such case, consider the following use case

Users select the date part (year) and start incrementing it by the "up" key. The year date part is selected, but is partially visible,

and the users do not see the date part that they are currently modifying, while they can fully see the other date parts that are not currently in focus.

The DateInput needs a horizontal scrolling to ensure that a focused date part is fully visible to the users in case if the width of the component is narrow.

Please check the case here

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

The className prop on the ChipList component is ignored in version 3.18.0. A simple addition of class strings does not appear in the compiled product, e.g.

  return (
    <ChipList
      className='flex-layout --wrap --end'
      data={chipData}
      onDataChange={onDataChange}
      chip={props => (
        <Chip removable removeIcon='k-i-close' {...props} />
      )}
    />
  )

I've looked through the transpiled source in node_modules, and it seems the className property passed to the React.createElement() function totally ignores the prop class names.

Hi,

I'm using the NumericTextBox to receive a value stored in a state, it has a percent "p3" format so it display numbers like this "0,000 %". When the state change, the value displayed in the NumericTextBox loses its format. If I click in the field and press space or any other key, the format comes back. The expected result was the NumericTextBox always keeping the format, what can be done in this situation?

NumericTextBox code

This is the textbox when I change the value direct in the field, it works fine

The state is shared between 2 NumericTextBox. if I change the value in the other textbox, it loses the format in this textbox

If I go in this textbox and just hit space, the format comes back

What can be done to keep the textbox format?

Thank you

I noticed that the value prop of the TextAreaChangeEvent is defined as string | number | string[].

When will this value be number or string[]?

Won't it always be string due to the fact that it's a text area input?

Hi,

I have Scheduler vertical timeline with an user group and more users I add the wider is every slot.  Example 2 users https://stackblitz.com/edit/react-dttghr?file=app%2Fmain.jsx . Example 4 users https://stackblitz.com/edit/react-dttghr-a3nor3 the slot is double in width in comparation with 2 users. Can I control this somehow?

Hello,

After taking a look at your example in the documentation here (which doesn't seem to be working) https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/selection/#using-selection-as-navigator 

I fixed the onSelectEnd function and got it working. However, the selection chart is reloading the data every time onSelectEnd changes this.state.min and this.state.max.

Here is the example:

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

As you can see, this makes for a clunky UI.

If this isn't a bug, do you have suggestions on how to fix this?

Thanks,

Orla

I am trying to lock first column in Grid, when I used the instructions in Kendo React documentation I tried the same but as you see in screenshots it's not working.

We need to customize our exported excel to contain some additional information to the top rows of the excel sheet.

On using 'filterable' option as true in ExcelExport React component, it's getting applied on the first row but we want those filters to come on header values present on the 2nd/nth row in case we have some additional information on the top rows.

<ExcelExport
                    data={data}
                    fileName="Products.xlsx"
                    ref={(exporter) => { this._exporter = exporter; }}
                    filterable={true}
                >

Please refer the attached snapshots for actual and expected results needed from customization.