Hi, Keyboard navigation using "page down" and "page up keys" doesn't work.

Here is a stackblitz where the problem can be reproduced: https://stackblitz.com/edit/react-q9n5fe?file=app%2Fmain.tsx
Reproduction steps:

1. Click inside the grid
2. Press "Page down" or "Page up" - doesn't work

It only works when:

1. Click outside of the grid
2. click on vertical scroll bar without selecting any grid cell.
3. Press"Page down" or "Page up" - it works.

Best Regards

Hubert

Hi Team,

For MenuItem target="_blank" feature is not there. Please enable the same. which will be helpful as menu is the face of app.

Regards,

Revanth

Hi,

I would like to be able to specify a Grid Column template for the data without having to replicate the entire cell and its properties. Please see below for justification:

Consider the following example of KendoReact Grid Cell customisation: https://www.telerik.com/kendo-react-ui/components/grid/styling/#toc-adding-custom-cells

Following this approach results in the loss of a lot of properties from the grid cell compared with 'default' cells e.g.

<td colspan="1" class="" role="gridcell" aria-colindex="1" aria-selected="false" data-grid-col-index="0">Chai</td>
<td style="background-color: rgba(55, 180, 0, 0.32);">18 <span class="k-icon k-i-sort-asc-sm"></span></td>

These properties are important for many reasons including accessibility. There is another example of KendoReact Grid Cell customisation that preserves these properties here: https://www.telerik.com/kendo-react-ui/components/grid/cells/#toc-customization

e.g.

<td colspan="1" class="" role="gridcell" aria-colindex="4" aria-selected="false" data-grid-col-index="3">39</td>
<td colspan="1" role="gridcell" aria-colindex="5" aria-selected="false" data-grid-col-index="4" style="color: red;">false</td>

However, there is a considerable amount of code required to achieve this:

const CustomCell = (props) => {
  const field = props.field || "";
  const value = props.dataItem[field];
  const navigationAttributes = useTableKeyboardNavigation(props.id);
  return (
    <td
      style={{
        color: value ? props.myProp[0].color : props.myProp[1].color,
      }}
      colSpan={props.colSpan}
      role={"gridcell"}
      aria-colindex={props.ariaColumnIndex}
      aria-selected={props.isSelected}
      {...{
        [GRID_COL_INDEX_ATTRIBUTE]: props.columnIndex,
      }}
      {...navigationAttributes}
    >
      {value === null ? "" : props.dataItem[field].toString()}
    </td>
  );
};

I would like to be able to define a template for a cell without having to specify these properties every time.

Kind regards,

David

Hello,

We are encountering an issue with duplicate entries in our Kendo Grid with drag & drop functionality. When the grid is scrolled, clicking on any of the header cells multiple times results in the first entry being duplicated. This problem occurs on the example provided on your website as well: Kendo React Grid Row Reordering

Reproduction Steps:

1. Scroll down within the grid.
2. Click on any header cell multiple times.
3. Scroll back to the top of the grid.

You will notice that the first entry is duplicated multiple times. It appears that the reorder logic is being triggered when a header cell is pressed.

We are using version 6.1.0. Please refer to the attached video for a visual representation of the issue.

Thank you for your assistance.

Hi 

Please build a React component for TreeMap similar to https://demos.telerik.com/aspnet-ajax/treemap/overview/defaultcs.aspx

Can you give us support on how we can get the information about the selections, and keep it updated at all times? Thank you,

The KendoReact Spreadsheet component has been released.

There are a few features that are missing compared to the jQuery version, and filtering rows based on column filters is one of them. 

Until this feature is added (along with context menus), we won't be able to use the Spreadsheet component for what we need to build, so we will have to continue wrapping the jQuery component. The object provided by the spreadsheet ref can filter programatically based on the (undocumented in KendoReact's docs) `range.filter()` method, but this would take a lot of time to implement what the jQuery version already has.

How to get a selected object for AutoComplete's onChange(...)?

<AutoComplete data={[{id:10, name:"test"}]} textField="name"/>

Environment (OS, Application, Versions):

OS Version: 22H2 (OS Build 25352.1)
Edge Dev: Version 121.0.2277.112 (Official build) (64-bit)

Repro Steps:

   1. Open https://codepen.io/oneID/pen/LYaGREP and turn on NVDA.
   2.Navigate to Populate grid and activate it using enter key.
   3.Navigate to Expand button under domain in export to excel table.
   4.Verify if the accessible name and role for the expand button is correct or not.

Actual Results:

Accessible name for the 'expand' button is not correct, Expand button is defined as link.

Expected Results:

Accessible name of 'expand' button should be sufficient for screen reader user. Accessible name should contain value available in domain as well.

Role should be defined as 'Button' as its behaving as button.

This is a bug on your documentation website.

Go to https://www.telerik.com/kendo-react-ui/components/grid/ for example to see that the side panel on the left is empty in an Edge browser. It flickers then it disappears.

It works fin in Chrome and Firefox. 

In the kendo-react-data-tools component, we want to introduce the Autocomplete behavior in Fields.
For example, in the https://www.telerik.com/kendo-react-ui/components/datatools/ link, only 3 fields ( like Name, Price and Discontinued ) were used.

In our application, we have more than 100 fields and the user has to scroll all the way down to pick the required field for applying the filter.

In Excel, you can group / ungroup rows AND columns.  This is particularly useful for income statement reports.  It would be great if Spreadsheet component can support the rendering of groups created in Excel and also allow groups to be created with the component.