Describe the bug
The selectionChange & headerselectionchange events of the Native Grid component are unexpectedly triggered when filtering data in the component.

• The issue is not replicable on Chrome and Safari.

• A possible workaround for the bug is demonstrated in this StackBlitz example

To Reproduce

1. Open this StackBlitz project in Firefox
2. Enter random text in the filter input of some of the fields
3. See the following two errors in the console:

and

Expected behavior
No JS errors should appear when filtering the Grid component, no matter the browser that is used.

Describe the bug
The following warning appears in the browser's console when using the Native Grid in Nuxt context:

To Reproduce

1. Open this example
2. Check the browser's console

Expected behavior
No warnings or errors should appear in the console

Describe the bug
When we have a Grid that has a display: none CSS rule defined for it, switching to display: block makes the pager of the Native Grid be rendered in responsive mode as if the Grid is displayed on a small device.

Possible workaround:

• Set the pager's responsive property to false

To Reproduce

1. Open this project
2. Click on the button

Expected behavior
The Grid should appear on the screen and its pager should look like this:

while it is rendered like this:

Describe the bug
The Native Grid looks differently when tested in development and production builds. Everything is OK in the development build and once the project is built for production, the Grid borders are missing.

To Reproduce

1. Download the Nuxt 3 Getting Started demo
2. Install the npm packages (npm i)
3. Run "npm run dev" and open the URL from the console. See the correct Grid look
4. Run "npm run build"
5. Run "npm run preview" and open the URL from the console. The Grid's borders are missing

Expected behavior
All styles should be available in the Native Grid, once it is built for production

Screenshots
Dev build:

Production build:

Describe the bug
The column virtualization functionality doesn't work when the Grid is configured to work in RTL direction.

To Reproduce

1. Open this StackBlitz example
2. No data is visualized inside the Grid
3. If we remove the :dir="'rtl'" configuration the Grid data is correctly displayed

Expected behavior
The Grid's column virtualization should work with both LTR and RTL configurations.

Describe the bug

When exporting the Kendo UI for Vue Native Grid data to a PDF file and the paper-size property is set to true, if there are locked columns inside the Grid, these columns are exported as empty columns.

• Workaround - a possible workaround is demonstrated in this StackBlitz example

To Reproduce

1. Open this StackBlitz example
2. Press the button above the Grid and save the exported file
3. Open the saved file and see how the locked columns have been exported

Expected behavior
All Grid columns should be correctly visualized in the exported PDF file, no matter if they are locked or unlocked.

Screenshots

Additional context
If we set the paper-size to a pre-defined value like 'A4', the issue is not replicable

Describe the bug
The value of the data-grid-row-index attribute of the different Native Grid rows is always -1, no matter the scenario in which the component is used.

To Reproduce

1. Open this StackBlitz example
2. Inspect a random Grid row and see its attributes

Expected behavior
The different rows inside the Grid should have different values for the data-grid-row-index attribute.

Describe the bug
When the Grid's resizable property is set to true, the following test fails:

import { describe, it, expect } from "vitest";
import App from "../App.vue";
import { render } from "@testing-library/vue";

describe("App.vue", () => {
  it("renders apps", async () => {
    render(App);
  });
});

• The issue is not replicable if in Draggable.js file the:

import KendoDraggable from '@progress/kendo-draggable';

is changed with:

import { Draggable as KendoDraggable } from '@progress/kendo-draggable';

With this error:

To Reproduce

1. Open this project
2. Run 'npm install'
3. Run 'npm run test:unit'

Expected behavior
The test should pass as it used to pass in version 3.5.0, for example.

Describe the bug
When activating the keyboard navigation inside the Native Grid and there are custom cells in this Grid, the navigation between the cells(in a specific scenario) is slow.

Scenario: In a Grid whose cells are all custom, focus a random cell in the first column. Then press and hold the right keyboard arrow. The focused cell starts moving to the right and then freezes until the last Grid column is reached.

Here is a video demonstrating the described scenario: https://user-images.githubusercontent.com/41293735/202707680-1964d01e-dbd3-4a35-93c4-1dbcfd45e887.mp4

• The issue is replicable on Chrome and Chromium-based browsers, on Windows 10.
• Testing the scenario on Firefox(Windows 10), the issue cannot be reproduced.

To Reproduce
Steps to reproduce the behavior:

1. Open this StackBlitz example on Windows and Chrome/Chromium-based browser
2. Focus a cell in the first column of the Grid
3. Press and hold the right keyboard arrow

Expected behavior
The movement of focus inside the Grid should be smooth and visible

Describe the bug
When expanding/collapsing grouped data in the Grid re-renders all Grid rows while only the collapsed ones should be re-rendered.

To Reproduce

1. Open this CodeSandbox
2. Collapse a group
3. Open the browser's console and see that row-render has been called 1000 times

Expected behavior
The row-render method should be called for the rows that hold the collapsed data, not for all Grid rows.

https://stackblitz.com/edit/mzrap6-afgvuk?file=src%2Fmain.vue

reorder the second column
result the innderHTML is NOT visible

Expected behavior
result the innderHTML is visible

workaround: use inner array instead of innerHTML - https://stackblitz.com/edit/mzrap6-y35krb?file=src%2Fmain.vue

Describe the bug
When having a scenario of Native Grid with a paging functionality, the pageChange event is being triggered when there is an interaction with the UI of the Pager.

When the user selects the number of rows per page, by choosing this value from a DropDownList, the object available in the event handler of the pageChange event has a value for its event property.

When the pageChange event is triggered by a change in the pages (1, 2, 3, etc.) the mentioned above event property has a value of undefined inside the event handler.

To Reproduce

1. Open this StackBlitz example
2. Change the number of items per page to 20.
3. Change the Grid page by using the page numbers
4. Check the browser's console

Expected behavior
The event prop should be defined no matter which element is triggering the pageChange event.

Describe the bug
When we use the Native Grid with a sortable configuration set to "{ mode: 'multiple' }" and we have a ColumnMenu, once the sorting functionality of the column menu is used, the sorting is reset.

To Reproduce

1. Open this StackBlitz example
2. Apply sort to the Name and Unit Price columns by clicking on each column header.
   
3. Select the column menu of the Discounted column and click the sort Ascending or Descending button.
   
4. Notice that the previous nested sort applied in the above steps is cleared and only the Discontinued column has an applied sorting.

Expected behavior

The sorting shouldn't be reset no matter which Grid sorting functionality is used. In the above example, the sorting of the Discontinued column should be added to the complex sorting.

Describe the bug
In scenarios when we dynamically add data to the beginning of the Grid, the component re-renders elements whose re-rendering can be skipped.

To Reproduce

1. Open this StackBlitz example
2. Click on the "add row to beginning" button

Expected behavior
The onUpdated method should not be called when adding a new row to the beginning of the Grid. Instead, if you open the browser's console, the result is that "updating..." is logged three times.

Describe the bug
If you try to group the data in a Grid by a column that has a value of "null", the browser hangs, and an error appears in the console.

To Reproduce

1. Open this StackBlitz example
2. Group the Grid by "Unit Price" field

Expected behavior
The data should be grouped according to the values inside the UnitPrice column. A column with an empty header should appear for the group with a "null" value.

Screenshots

Workaround

Convert the "null" values to empty string with a code like this:
this.products.forEach((o) => { o.UnitPrice = o.UnitPrice === null ? '' : o.UnitPrice; });
Here is a modified example in which the above code is added to the getData method.

Describe the bug
When you use the filterGroupByField method, if there are more than 2 filtered items, the method returns null. If the filtered items are one or two, the method works correctly.

To Reproduce

1. Open this StackBlitz example
2. Open Browser's console(F12)
3. Click on the "ProductName" column menu and select 3 or more checkboxes
4. See the output in the console which is "null"

Expected behavior
The result returned from the filterGroupByField method should be with a structure similar to the below one, no matter how many checkboxes have been selected in the column menu.

I'm submitting a...

• Bug report

Current behavior

When a named slot template is used in the Grid, the PDF export functionality will not export the cells that have an applied template.

In the linked below example, after exporting the Grid to PDF, the header cell of the "UnitPrice" column is empty.
If you remove the headerCell: 'headerTemplate' configuration and export the Grid to PDF, everything is exported correctly.

Expected behavior

All Grid cells should be exported to PDF no matter if they have a template applied to their definition.

Minimal reproduction of the problem with instructions

1. Open this project.
2. Click on the "Export vie PDF component" button
3. Check the exported file