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:

I have a dialog which includes a TabStrip with 2 tabs (see attached image dialog-1.png). "Above" this dialog I opened another dialog but then the tabs from the dialog "underneath" still shine through (see attached image dialog-2.png). I tried to give the top dialog a z-index of 99999 but it did not help like this:

<Dialog
                    title={t('program:datapoints')}
                    onClose={props.cancelForm}
                    width={'60%'}
                    height={'80%'}
                    style={{ zIndex: 99999 }}
                >

I have added this to my App.scss which I import into App.tsx:

$border-radius: 2px;
$primary-palette-name: lightgreen;
$secondary-palette-name: indigo;
$theme-type: light;
$adjust-contrast: false;
$primary: #bed00c;
$secondary: #026299;
@import '~@progress/kendo-theme-material/scss/all';

Hi,

We are using the Stepper as feedback to let a user know what stage of a process they are up to rather than an interactive element i.e. we have a Stepper with no onChange or onFocus, an array of items, and the value is set programatically when the user loads data.

const items: StepProps[] = [ ... ];
const currentStep = items.findIndex((i) => i.key === props.currentStep);

return <Stepper value={currentStep} items={items} />;

On initial page load the stepper renders correctly, however on page refresh if the step changes then the previous step icon is still focused (with a ring around the icon) and remains focused even if another step is clicked. Similar behaviour can be observed on the Display Modes demo on the telerik site https://www.telerik.com/kendo-react-ui/components/layout/stepper/display_modes/, if you remove the onChange handler for the Steps with icons Stepper and then change the value by clicking on a different stepper e.g. https://react-vbgv3y.stackblitz.io.

Please see attached for a screenshot. Is this intended behaviour? Is there any way to use the stepper without this focus behaviour given that in this use case it is for feedback only? Is there a different control that would be more suited for this purpose?

Kind regards,

David

Hello,
The list seems too long because I have too many elements. How can I add a scroll to it

Hi Team, 

How can I use the Drawer differently, other than to display a list of items, like a form or some other component?

I see how to remove the mini, and then I can control the expended prop with state, but how can i customize its content?

Thanks,
Grant