When entering a number with decimals in a Native NumericTextBox with a format it rounds up the number if you enter more decimals than the format allows. In this Stackblitz project you can see this behavior.

In the Wrapper NumericTextBox it is possible to add a round property with the value false which prevents the rounding of decimal numbers. Instead of rounding it truncates the number. By my knowledge and what I can find in the Vue documentation this property isn't available in the Native NumericTextBox.

Proposed solution
Add round property with related logic to the native component.

Steps to reproduce

1. Copy and paste the value 12.345
2. See that the value in the input becomes 12.35
3. See that :round="false" does nothing.

Describe the bug
When using the Auto-Resizing in combination with the Appearance size the Auto-Resizing isn't triggered again after the Appearance size has been changed. Because of this, the Native TextArea stays to 'big'. The Auto-Resizing is only triggered again when you change the value of the TextArea.

To Reproduce
Steps to reproduce the behavior:

1. Open this StackBlitz example
2. Fill in a value
3. Switch the 'Size' DropDownList value to 'Large'.
4. Switch the 'Size' DropDownlist value to 'small'.
5. Additional white space is visible below the value.
6. When changing the value the Auto-Resizing is triggered again.

Expected behavior
The TextArea should be resized automatically when changing its "size" appearance property, without the need to update the value of the component

Describe the bug
When working with the Wrapper DropDownList, if the component uses the v-model directive, there are some white spaces appearing in the popup of the component.

If the component doesn't use the v-model, the described behavior is not replicable.

To Reproduce

1. Open this StackBlitz example.
2. Select "Fish"
3. Select "Pizza"
4. Repeat steps 2 and 3 multiple times
5. See the white space in the popup

Expected behavior
No white space should appear in the popup of the DropDownList component.

Screenshots

The DatePicker, DateTimePicker, TimePicker, and DateRangePicker components don't provide open and close events that are triggered when the popup of a component is opened/closed. 

Describe the bug
The position of the DropDownList's popup is not updated when the popup is opened above the component and the data items in the popup are filtered.

To Reproduce

1. Open this StackBlitz example in a new tab
2. Resize the browser's window in a way the DropDownlist is at the bottom of the visible area and click on the component to expand its popup. Because there is no space below the DropDownList, its popup should pop above the component
3. In the search box in the popup write "sm"

Expected behavior
The bottom of the popup should be constantly stuck to the DropDownList and not staying at it initial position above the compoennt.

Screenshots

Describe the bug

When we have a multi-level nesting in the data loaded in the Native TreeView the parent nodes that are below level0 are not displayed correctly when set as expanded.

Sample TreeView structure
|-Level0
-|-Level1
--|-Level2
---|-Level3

• The issue is replicable when the "animate" prop of the component is set to "true". If "animate" is set to "false", the TreeView is displaying all its nodes as expected.
• The issue is replicable when the processTreeViewItems method is used. If the TreeView is directly bound to an array, the component is working correctly. See this example.

To Reproduce
Steps to reproduce the behavior:

1. Open this StackBlitz project
2. See nodes "Item1.2" and "Item2.3"

Expected behavior
The "Item1.2" and "Item2.3" nodes should be expanded and their child nodes should be displayed by default as in this example.

Screenshots

Describe the bug
When working with the DateRangePicker, if we want to change only the end date of the component, this is possible through the "end" input and not through a single calendar selection.

To Reproduce

1. Open this StackBlitz example
2. Select the END input. The Calendar will open
3. Click on a date in the Calendar
4. The selected date is being set to the "Start" value of the component.

Expected behavior
If the "End" input is focused, when we click on a date in the component's Calendar, only the "End" value should be changed.

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
When we have multiple TimePickers on a page and start expanding their popups, the popups that are already expanded are not automatically closing.

To Reproduce

1. Open this StackBlitz example
2. Click on the "clock" icon of a random TimePicker to open its popup
3. Repeat step 2 over other randomly selected TimePicker

Expected behavior
The visible popup of a TimepPicker should be automatically closed when we expand the popup of another TimePicker

Screenshots

When working with the Native ContextMenu there is no event that can identify when we've left the submenus of the main popup of the component. 

If a mouseleave or similar event is added to the submenus of the ContextMenu, it will be useful to handle the user's interaction with the component.

Describe the bug
If we try to manually enter a value in the 'Start' input of the DateRangePicker, the entered value is applied to its 'End' input.

To Reproduce

1. Open this StackBlitz example
2. In the "Start" input select the field that holds the '5' digit. Now we can edit the day of the month for the Start date
3. Enter 8 with the keyboard

Expected behavior
The value of the "Start" input should be updated to 9/8/2018. Instead, the value of the "End" input is being changed to "9/8/2018" and the "Start" day continues to be "9/5/2018".

Screenshots

Describe the bug
The Bar Chart component renders only one column no matter the number of series passed to it. The Bar Chart renders only the first seriesitem passed to it

To Reproduce

1. Open this Dojo example and run it

Expected behavior

There should be two columns rendered for each category as in this StackBlitz example.

In the DropDowns DataItems components we may want to render the id-s of the items and take it directly from the items.

 <div id="app">
            <kendo-dropdown
                :data-items="employees" :data-item-key="'id'" :text-field="'text'">
            </kendo-dropdown>
        </div>

        <script>
            const app = Vue.createApp({
                components: {
                    'kendo-dropdown': window.KendoVueDropdowns.DropDownList
                },
                data() {
                    return {
                        employees: [
                            { id: 182, text: "John" },
                            { id: 273, text: "James" },
                            { id: 325, text: "Jane" }
                        ]
                    }
                }
            });

            app.mount('#app');
        </script>

We have a window hidden with v show and a DatePicker in it.
When we open the DatePicker and try to hide the Window the popup of the DatePicker stays opened

example and steps in ticket - 1562574

workaround - delay the hiding of the Window with 200 ms to ahve a default hiding of the popup executed:

const toggleDialog = (e) => {
e.preventDefault();
setTimeout(() => {
if (visible.value) {
showPopup.value = false;
}
visible.value = !visible.value;
}, 200);
};

Describe the bug
The DateRangePicker doesn't display a correct time when the format prop is defined and the value of the component is set dynamically.

The bug is reproducing when the minutes in the copied value are a number bigger than 51.

To Reproduce

1. Open this project
2. Open the DateTimePicker popup and select random date + Time 01: 58
3. Focus on the DateTimePicker and press Ctrl + A
4. Copy the value of the first DateTimePicker
5. Focus on the second DateTimePicker and paste the copied value

Expected behavior
The value of the second DateTimePicker should be the same as the value of the first one.

Current behavior:
The minutes value in the second DateTimePicker is incorrect - it is 1:08 instead of 1:58

Screenshots

Describe the bug
When using a slot to define the columns in the Wrapper Grid, the result in Vue 2 and Vue 3 is different.

• In Vue 2, if we pass 2 columns to the slot, only these two columns are rendered in the component.
• In Vue 3, no matter how many columns we pass to the slot, the component renders all columns, based on the data in the datasource

To Reproduce
Check the two examples below:

• Vue 2 - https://codesandbox.io/s/jovial-hamilton-k6hfl7?file=/src/App.vue
• Vue 3 - https://codesandbox.io/s/empty-smoke-cnyz0t?file=/src/App.vue

The two examples use the same implementation but the number of columns rendered in each Grid is different

Expected behavior
The two examples should work the same way as in the Vue 2 application.

Screenshots
Vue 2:

Vue 3:

Describe the bug
In a scenario where we want to display a Date in the Chart category, the Native Chart doesn't work when we use the ISO Date format

If we take the same project and use Date data like:

• '2021-05-21' - everything is working correctly
• '2021-05-21T11:21:50Z' - the execution of the project is blocked

Here is a working example with the first data type.

To Reproduce

1. Open this example. It is the same as the working one provided above but with Date data in ISO format
2. Run the project

Expected behavior
The Native Chart should be working correctly both with the non-ISO and ISO formatted data.

In my project, I always use remote data because the data comes from a backend that aggregates data from several sources in the company and because I want to sort, filter, etc on the server to be able to do it on the entire dataset (and I cannot do it in the frontend because it's a lot of data).

In the Wrapper Grid, we can add a "Refresh" button to the pager of the component using the pageable-refresh property. 

Such property is not available in the Native Grid. As the Native Grid doesn't use the DataSource component, I can assume that the Refresh button cannot be fully functional out of the box but still we could be able to pass a method that will be triggered once the button is clicked. Then through this method, we can make an API call and update the data.

Scenario: Native Grid with Virtualization + Grouping.