Hello,

I have a React project, which uses "react-styleguidist": "13.0.0" to show various examples of the components, while kendo react grid 4.8.0 has been used. Using this version, the column resizer works as expected in the documentation page which contains several examples of Grid component.

I am trying to upgrade Kendo React Grid and all its related packages to version 5.1.0. This is the latest version possible to use, without upgrading also the project to React 18.

All functionalities seem to work as expected with version 5.1.0, except of column-resizer. It only works correctly in the 1st Grid example of the documentation page. In all other examples except of the 1st one, when I try to drag the column-resizer the column resizes correctly, but it also scrolls to the 1st grid example of the documentation page.

Do you have any suggestions on what could be the root of the problem?

Thank you.

Hi.

Is there any way to use JsonSchema when creating a Form with the KendoReact Form component? Maybe something along the lines of react-jsonschema-form? If not, are there any plans to integrate this in the future or any ideas how this could be implemented using the existing KendoReact components?

In the end, we would like to be able to build our forms dynamically based on jsonSchema information. That is the main goal of this question.

Thanks,

Greetings,

Bernd

as follow img: how should i fix it

Here is my code, and it crashed. 

import {
  AgendaView,
  DayView,
  MonthView,
  Scheduler,
  TimelineView,
  WeekView,
} from '@progress/kendo-react-scheduler';
import * as React from 'react';
import { useState } from 'react';
import { useQuery } from 'react-query';
import { useAppContext } from '../../AppContext';
import { getCalendarEvents } from './getCalendarEvents';

const workDayStart = '09:00';
const workDayEnd = '18:00';
export function Calendar() {
  const { accessToken } = useAppContext();
  const [isMonthView, setIsMonthView] = useState(false);
  const [selectedDate, setSelectedDate] = useState(new Date());

  const { data: events } = useQuery({
    queryKey: ['getCalendarEvents', { selectedDate, isMonthView, accessToken }],
    queryFn: getCalendarEvents,
    initialData: [],
    refetchOnWindowFocus: false,
  });

  const onDateChange = (e) => {
    setSelectedDate(e.value);
    console.log(e.value);
  };
  const onViewChange = (e) => {
    if (e.value === 'month') {
      setIsMonthView(true);
    } else {
      setIsMonthView(false);
    }
  };

  return (
    <Scheduler data={events} onDateChange={onDateChange} onViewChange={onViewChange}>
      <WeekView title='Week' workDayStart={workDayStart} workDayEnd={workDayEnd} />
      <AgendaView />
      <DayView workDayStart={workDayStart} workDayEnd={workDayEnd} />
      <TimelineView workDayStart={workDayStart} workDayEnd={workDayEnd} />
      <MonthView />
    </Scheduler>
  );
}

Hi support team,

I am using React Scheduler. I was trying to delete event from Scheduler. I used onDataChange event as example in website. But When I delete, deleted array is empty and updated array returned with useless data. Please guide me how to fix it.

i followed the example provided in the docs to replicate inline editing for my scenario.

However after clicking on edit button , for every keystroke the input loses focus.

I observed that After removing the below parameter code works fine:

dataItemKey={product id}

Hi,

I am looking for guidance on the correct way to provide an empty option in a DropDownList bound to a collection of objects. It appears to work if you just use a 'null' defaultItem:

defaultItem={null}

which adds an empty item to the top of the list and returns a null value onChange. However, the documentation suggests that this property is supposed to be a placeholder and that the defaultItem property type must match the data type. Is there a better approach to adding an empty item to the list?

Kind regards,

David