Hello,

sometimes happens that a tag is very long and takes all the available width in the multiselect input box.

In such cases it's very difficult to find the right point to click in order to open the option list.

I'd like to add code to open the popup list when clicking on a tag.

I thought of  using the tagRender property to make the tag clickable, but then I don't know what is the most appropriate way to trigger the open event in the multiselect:

const tagRender = (tagData: TagData, li: React.ReactElement<HTMLLIElement, string | React.JSXElementConstructor<any>>) => 
        React.cloneElement(li, li.props,
            [<span key={sizes.indexOf(tagData.data[0])} className="custom-tag" onClick={() => {console.log('li:', li) /*do something to open the list*/}}>{sizes.indexOf(tagData.data[0])}</span>, li.props.children])

Thank you 

Kind regards

Example

Use keyboard arrows and set a time and date result: (Tue Dec 14 2021 01:01:00 GMT+0100 (sentraleuropeisk normaltid)).

Do the same thing but clear input field first, for example with CTRL-a + backspace or delete. Year is now 1980 (Tue Jan 01 1980 02:02:00 GMT+0100 (sentraleuropeisk normaltid))

I have a Grid component with a custom cell property. The input field for the cell is determined dynamically depending on a different field type input. So for example if the dataType is 'string" I display a simple input field, if it is 'enum' I display a NumericTextBox.

The grid and the determination of the input field can be seen here:

https://stackblitz.com/edit/react-ts-xapte3?file=index.tsx

This is NOT a working application because it is just too big to put here in its full glory... In the index.tsx from line 200 to 251 you see the implementation of the cell ("ValueCell") and in the file CustomInputFields you can find the ChannelTypeInput component. As the FieldRenderProps require a onFocus and onBlur handler, I tried to implement that myself but I guess this is not enough to handle them.

This works perfectly but the issue is that if I try to type into the Input or NumericTextBox, it loses focus after every character and I have to click into it again. How can I get rid of this behavior?

Another question is: The NumericTextBox also allows negative values. Can I somehow specify that only positive values can be added?

Hello,

I'm trying to convert a old application that is now using kendo react wrappers to pure KendoReact.

The issue I'm facing is that the selected values in my model are not objects, but are an array of primitive values.

Is there a way to specify a field to be used as value like it was with valuePrimitive in the old Kendo UI ?

My MultiSelect is declared as following:

<MultiSelect
	ref={listRef}
	data={dataSourceItems}
	dataItemKey={props.dataValueField}
	disabled={!props.enable}
	textField={props.dataTextField}
	value={uiContext.maStore[props.entityName] && uiContext.maStore[props.entityName][props.fieldName] && tsUtils.getSafeNumberArray(uiContext.maStore[props.entityName][props.fieldName].toJSON())}
	onChange={changeHandler}
	filter={props.filter}
/>

where maStore is a mobx-state-tree store, and dataSourceItems is a array of objects like:

[
{id: 100, code: "cod1", description: "description 1"},
...
]

and 

tsUtils.getSafeNumberArray(uiContext.maStore[props.entityName][props.fieldName].toJSON())

is an array of numbers

Thank you.

Kind regards

Hello Guys

Here I bring another question regarding to Date type on charts when displaying data.

I am supposed to have on X axis the fist and the last label for the dates, but despite of the last date is 2021-10-18T00:00:00+00:00, it is not being shown.

should dates have a special format or something?

Here is the code :

const data = [
  {
    date: '2021-08-02T00:00:00+00:00',
    score: 631,
  },
  {
    date: '2021-08-09T00:00:00+00:00',
    score: 624.25,
  },
  {
    date: '2021-08-23T00:00:00+00:00',
    score: 596.6,
  },
  {
    date: '2021-09-13T00:00:00+00:00',
    score: 505.666656,
  },
  {
    date: '2021-09-27T00:00:00+00:00',
    score: 417,
  },
  {
    date: '2021-10-04T00:00:00+00:00',
    score: 485.666656,
  },
  {
    date: '2021-10-18T00:00:00+00:00',
    score: 548,
  },
];

const ChartContainer = () => (
  <Chart>
    <ChartCategoryAxis>
      <ChartCategoryAxisItem
        majorGridLines={{ visible: false }}
        justified={true}
        categories={data.map((d) => d.date)}
        labels={{ rotation: 'auto', step: data.length - 1 }}
        type="date"
      />
    </ChartCategoryAxis>
    <ChartValueAxis>
      <ChartValueAxisItem
        majorGridLines={{
          visible: false,
        }}
        title={{
          text: 'Scaled Score',
        }}
      />
    </ChartValueAxis>

    <ChartSeries>
      <ChartSeriesItem
        type="line"
        data={data.map((d) => d.score)}
        missingValues="interpolate"
      />
      <ChartSeriesItem
        type="area"
        data={data.map((d) => d.score)}
        missingValues="interpolate"
        color="rgb(214 237 247)"
      />
    </ChartSeries>
  </Chart>
);

Stackblitz live demo

Thanks for your help

Hello,

I'm trying to get client side virtual scrolling working in a multiselect with kendo-dropdowns-react-wrapper.

I have a multiselect containing a list of items (people) belonging to a group. The datasource is changing dynamically, according to the group selection in another dropdown list.

The same person may belong to different groups, but the groups may contain different people.

When I change the group selection, if a person is selected which belongs to both groups, I'd like the related multiselect item to remain selected.

This expected behavoiur works well with virtualization disabled, but when I enable virtualization I experience a strange behaviour.

Despite I have implemented the valueMapper function (that is called correctly and returns the correct new index list), when changing the datasource, the selected indices are not updated and the new items corresponding to the old indices are selected.

What am I missing to get it work with virtualization?

Below are the stackblitz examples.

To reproduce the problem:

1. initially select "Clare Kline" and "Hamilton Holland" (the names are imaginary and created with a random generator) from the multiselect (records 1 and 3)
2. Switch from "group 1" to "group 2" in the dropdownlist
3. Verify that the multiselect selection has changed to "Hamilton Holland" only (who is the only person in common between the two groups): this works in non-virtualized version, while in the virtualized version "test2" and "test3" are selected.
4. Select "group 1" again in the dropdownlist
5. Verify that "Clare Kline" and "Hamilton Holland"  are selected again

Without virtual scrolling: https://stackblitz.com/edit/react-ts-fnfdar?file=index.tsx

With virtual scrolling; https://stackblitz.com/edit/react-ts-qb16wa?file=index.tsx

Hello,

I'm trying to create a stackblitz with a kendo-react-wrapper example showing a MultiSelect, but I get the following error:

Error in /turbo_modules/@progress/kendo-base-component-react-wrapper@2021.3.1112/dist/npm/index.js (47:32)
Cannot read properties of undefined (reading 'call')

Here is the code and the link to stackblitz: https://stackblitz.com/edit/react-ts-9tttzc?file=index.tsx

Thank you.

Kind regards

import { MultiSelect } from '@progress/kendo-dropdowns-react-wrapper';
import * as React from 'react';
import { useRef, useState } from 'react';
import { render } from 'react-dom';
import './style.css';

export const App = (props) => {
  const [value, setValue] = useState();

  const ds1 = [
    { id: '1', descr: 'test1' },
    { id: '2', descr: 'test2' },
    { id: '3', descr: 'test3' },
    { id: '4', descr: 'test4' },
  ];

  const listRef = useRef();

  const changeHandler = (e) => setValue(e.sender.value());

  const virtual = {
    itemHeight: 26,
    valueMapper: (options) => {
      const indices = [];
      const values = Array.isArray(options.value)
        ? options.value
        : [options.value];

      let ref = listRef.current as any;
      let widget;

      if (ref) {
        widget = ref.widgetInstance;
      }

      if (values && widget) {
        let index = 0;
        widget.dataSource.data().forEach((x) => {
          if (values.indxOf(x[props.dataValueField])) {
            indices.push(index);
          }

          index += 1;
        });
      }

      options.success(indices);
    },
  };

  return (
    <div>
      <p>
        <MultiSelect
          ref={listRef}
          dataSource={ds1}
          dataValueField={'id'}
          enable={true}
          dataTextField={'descr'}
          value={value}
          change={changeHandler}
          filter={'contains'}
          valuePrimitive={true}
          autoWidth={true}
          virtual={virtual}
        />
      </p>
    </div>
  );
};

render(<App />, document.getElementById('root'));

Hi,

Is it possible to use other components with FieldArray or de we have to use the Grid component?

I'm currently trying to use a custom component with FieldArray, but I'm having trouble binding the values to the form field. 

Dear Telerik Team,

I am currently playing around with react and found a strange behavior in one of your controls.
I am not sure if its my work station or something with your control.
In the forum I could not find a similar question.

Currently I am looking at your example:
https://www.telerik.com/kendo-react-ui/components/scheduler/views/timeline/#toc-grouping-by-resource

My Chrome is Zoomed to 75% and the TimelineView is set to Vertical-Mode.
When I use the arrow buttons to switch between days the min-height of one of the divs keeps getting bigger and bigger:

/* After Button spam */

After removing some of the classes it seems the k-resource-cell is manipulating the min-height but i did not find more clues right now.

Example from the UI itself:
Before:

and after: