We are currently on implementing a component for data grids using the Kendo React Grid and virtual scrolling.
The problem is that the "page down" and "page up" is not working correctly, because of the virtualization (We already contacted the support for it).
Here is a stackblitz where the problem can be reproduced: https://stackblitz.com/edit/react-rapzu9?file=app/main.tsx
Reproduction steps:
1. Click inside the grid
2. Press "Page down" - Page changes, but focus goes to the header cell
3. Press "Page down" again - Nothing happens

Another problem which maybe has the same source is navigating with the arrow keys.
Reproduction steps:
1. Scroll somewhere deeper down
2. Use arrow up to scroll up again
3. At some point it scrolls not up anymore but the focus also changes into the header cell - Not okay

In my opinion its a bug, at least for the arrow keys. If you disagree please open a feature request for it, this functionality will be needed by out customers.

Best regards

Yui

Looking at the JSDoc for for `toDataSourceRequestString` and `toDataSourceRequest`, they both appear to have JSDoc above them, showing the parameter as:

 * @param {DataRequestState} state - The state that will be serialized.

Should this actually have `@param {DataSourceRequestState}`?

Hi,

The KendoReact NumericTextBox responds to mousewheel events when in focus. It is very easy to focus on the textbox, type in a value, scroll up or down and inadvertently change the value just entered. This behaviour can be seen clearly on any of the Telerik example pages e.g. https://www.telerik.com/kendo-react-ui/components/inputs/numerictextbox/predefined-step/

I think this behaviour should be disabled by default if spinners are set to default, but otherwise I would like a property to disable it. The normal event handlers which could be used to disable this behaviour are not available on the NumericTextBoxProps.

Kind regards,

David

Currently, the Scheduler events are always placed between the beginning and the end of a slot, no matter if the event actually starts or ends at the slot times. So if an event for example starts at 10:10, the event is placed at the 10:00 slot line and not a little further down below, or if it ends at 11:50 the event end is placed at the 12:00 slot line. I'm talking here especially about the WeekView and the DayView.

This is not accurate enough for some events. Like for example in MS Outlook, if a event doesn't start at the full hour, the graphical representation shows it according to the start time and not at the full hour (see screenshots). We would like to request to make it possible to place events on the Scheduler so that the graphical representation of the event reflects the actual start and and time.

While I was able to calculate a margin for the event start to move it to a more accurate position, it was not possible to also set the height of the event to a calculated positition because the Scheduler doesn't allow this. According your support (see here), an event always has to end at a full slot time and can't be placed somewhere else. Calculating these things on our own brings a whole lot of other problems though (like placing overlapping events correctly, etc.) so that it would be great if the Scheduler had a setting to allow exact positioning according to times.

Hello Team,

We have got this requirement to open date range picker using a single button input. Is there any way I can achieve this. I can see there is endDateInput and startDateInput available but it still renders 2 different inputs. But we want single button to control whole thing.

Thanks,

Gaurav

I'd like to turn off even/odd row highlighting for the Grid and use cell border instead.

I can do it by learning kendo css classes and override particular properties for certain classes but... I have many different vendors for different components and it's so a pitty to learn all the css classes hell...

It'd be supper cool to have something like turnOffAlternation/alternatingRows and showCellBorder/showBorders  attributes on the Grid.

Hello,

I am using React Multiselect in my project. I need every item in the multiselect component selectable with checkboxes and multiselect itself filterable. It would be very nice if you add this features to Multiselect component as built in. There is a workaround which I share links below for this but we need to do all this stuff manually.

1. Checkboxes:

• https://stackblitz.com/edit/kendo-react-multiselect-checkboxes-moavl9?file=app%2Fmain.jsx

2. Filterable

• https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/filtering/#toc-basic-configuration

Thanks

Issue #1

Given:

Controlled TextaArea componenet with autoSize and rows properties.

const App = () => {
  const [state, setState] = useState();

  return (
    <TextArea
      value={state}
      onChange={(e) => setState(e.value)}
      autoSize={true}
      rows={2}
    />
  );
};

When:

Add couple text lines to extend TextArea size and remove these empty lines in any way.

Then:

Content from TextArea field is removed but TextArea height stays the same, doesn't come back to it's initial value. It's different comparing to example from your docs where example contains uncontrolled component.

Issue #2

Given:

Controlled TextaArea componenet with autoSize and rows properties.

const App = () => {
  const [state, setState] = useState();

  return (
    <TextArea
      value={state}
      onChange={(e) => setState(e.value)}
      autoSize={true}
      rows={4}
    />
  );
};

and styles like these

.k-textarea textarea {
  border: 1px solid blue;
}

When:

Start typing anything

Then:

Height of textarea component is decreasing

Example on stack blitz

Issue #1

Given:

Controlled TextaArea componenet with autoSize and rows properties.

const App = () => {
  const [state, setState] = useState();

  return (
    <TextArea
      value={state}
      onChange={(e) => setState(e.value)}
      autoSize={true}
      rows={2}
    />
  );
};

When:

Add couple text lines to extend TextArea size and remove these empty lines in any way

Then:

Content from TextArea field is removed but TextArea height stays the same, doesn't come back to it's initial value. It's different comparing to example from your docs where example contains uncontrolled component.

Issue #2

Given:

Controlled TextaArea componenet with autoSize and rows properties.

const App = () => {
  const [state, setState] = useState();

  return (
    <TextArea
      value={state}
      onChange={(e) => setState(e.value)}
      autoSize={true}
      rows={4}
    />
  );
};

and styles like these

.k-textarea textarea {
  border: 1px solid blue;
}

When:

Start typing anything

Then:

Height of textarea component is decreasing

We'd like the sorting to be correct and not based on the browser settings.

From support ticket:

We've noticed that our grid is not sorting correctly in our local language (Swedish). I've added LocalizationProvider and IntlProvider around it. The translation works fine.

In Swedish it would be sorted: A, B, Å

It's common in software that A and Å is sorted next to eachother but this is wrong.

I've tried using locale "sv" (language) and "se" (country) but neither sorts it correctly.

Reply on support ticket

We are internally using the built-in JavaScript method localeCompare to compare the values:


    if (a.localeCompare) {
        return a.localeCompare(b);
    }
That means that we will compare the data based on the current browser locale. Still, the result can vary based on the machine. In cases, like this one, we can recommend using server filtering the ensure that the results are specific to the Swedish culture regardless of where this is loaded.

Another option can be to log a feature request that will take the culture parameters from the IntlProvider and pass it as a second parameter to the localeCompare function.

Imaging a GridColumn field that is a simple object {name:"My Item", value: 123}. It would be great to be able to define properties of the object as what to display without having to build a custom renderer.

displayField/displayFunction as a callback function with the fieldName of the columns and the dataItem of the row as parameters

const nameDisplay = (field, dataItem) => {

   return "some value"

}

...

<GridColumn field={"name"} displayFunction={nameDisplay}

we have X(cross) for combo box but it is not coming for datetime picker 

Hi,

we are currently using the Kendo jQuery PivotGrid in our application. We have already migrated some controls to React in our application and would like to switch the PivotGrid to React as the next control.

In the jQuery PivotGrid there is the possibility to export the configured PivotGrid to Excel. You can see the feature here: saveasexcel

Is this functionality also available with the React PivotGrid? And can you show us an example how to use this feature to export the pivot grid data to excel?

If this functionality doesn't exist yet, when can we expect it? Are there already plans for this or can you already vote for it somewhere?

Regards,

Oliver

We are migrating our legacy application which uses Telerik for Silverlight to react application with KendoReact controls. I am converting one screen which uses RadTreeView which gives us Drag and Drop with Reordering feature. Now, in KendoReact, TreeList control does not provide both the features. 

Here is what we get when we start dragging item in Silverlight control:

I am expecting the same behavior in KendoReact: TreeList as we have to achieve the same behavior in our react application. This link has some discussion with support team.

Thanks,

here is a quick repro: https://stackblitz.com/edit/react-dfwz3q?file=package.json

in package.json just switch @progress/kendo-react-grid from 4.10.0 back to 4.9.0 and the column menu renders.

bug still present up through 4.11, 4.12, and @latest 4.13