Kendo Splitter component `change` event is triggered from child components e.g. Input/Grid. I have multiple splitters defined, but only parent splitter has `onChange` event listener defined. When changing the text from child containing Kendo Input component which has no change event defined (doesn't really matter if it is), the event is propagated to Splitters `onChange` event and crashes Splitter pane handling. Added `onChange` listener to other Splitters as-well, they all are triggered. Clicking on Grid component checkboxes (is child to Splitter) to select the row will also trigger Splitters `onChange` event. Current workaround is to defined Splitters `@change` event as `@change.self` then the children's `change` events wont trigger it.
Hey there!
It would be great to add an option to the <Grid /> component that allows specifying a custom cell template specifically for the "select" column.
Looking at the documentation, there is an example that shows how to do something similar, but it overrides the complete CellRenderer for all columns.
Here is a minimum example of the API we could have:
<script lang="ts" setup>
import { Grid } from '@progress/kendo-vue-grid';
</script>
<template>
<Grid
selected-field="selectedField"
selected-cell="mySelectCell"
>
<template #mySelectCell="{ props }">
<!-- Checkbox or whatever you want -->
</template>
</Grid>
</template>
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
When the DatePicker component is configured to use custom DateInput, its popup is not closing when the user clicks outside the component.
To Reproduce
Expected behavior
The DatePicker's popup should close when the user clicks outside the component
Describe the bug
The Drag and Drop functionality of the ListBox doesn't work when one of its lists is empty.
To Reproduce
Expected behavior
The users should be able to drag and drop the ListBox items no matter if its lists are empty or not
Describe the bug
The DatePicker component behaves unexpectedly when it is part of an HTML form that has a Submit button. The things that happen are as follows:
To Reproduce
Scenario 1:
Scenario 2:
Expected behavior
When pressing Enter inside the HTML form, the form should be submitted and no DatePicker popups should open
The current implementation of the Native Dialog and Native Window doesn't provide the option to display the two components with an animation.
Providing the option to add animation to the Dialog and Window will be a nice feature for both components. This option can be added either through a direct property configuration or in a combination with the Animation component.
Describe the bug
Both the ComboBox and DropDownList don't work as expected when configured in a virtualization scenario. The issue is related to skip value available in the event handler of the "pagechange" event. When you scroll the virtualized list down and then start to scroll in back in the upside direction, the value available in the event.skip property is at first being changed to a number that is bigger than the current "skip" value.
The result is that if you are currently at element 5000 in the popup list, and decide to scroll in the upside direction, the list will display items with an ID bigger than 5000 and the scroll in the upside direction will start from this new position.
To Reproduce
Expected behavior
When scrolling the items in the ComboBox or DropDownList components, the lists should behave the same way no matter if they are configured in a virtualization or default scrolling mode. When the list is scrolled, its items should move up or down without jumping to records that are not in the same direction as the scrolling.
Screenshots
If applicable, add screenshots to help explain your problem.
Describe the bug
When the Native DropDownList is configured to work in a data virtualization mode, if the user scrolls to the last data page, then close and reopen the popup of the component, no data is visualized in the popup. If the empty popup is scrolled, then the missing data appears back.
To Reproduce
Expected behavior
The same data that is visible before the popup is closed, should be visible inside the DropDownList when it is opened on step 4 above.
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
https://codesandbox.io/p/sandbox/beautiful-tristan-5nvvfy?file=%2Fpackage.json
open the console and click the export button.
Expected behavior
No error in console
Describe the bug
The column virtualization functionality doesn't work when the Grid is configured to work in RTL direction.
To Reproduce
:dir="'rtl'"
configuration the Grid data is correctly displayedExpected behavior
The Grid's column virtualization should work with both LTR and RTL configurations.
Hello,
The StackLayout component is available in other Kendo UI suites like KendoReact for example but is still not provided for Vue. Can you add the StackLayout component to the Kendo UI for Vue Native suite?
Hello,
The GridLayout component is available in other Kendo UI suites like KendoReact for example but is still not provided for Vue. Can you add the GridLayout component to the Kendo UI for Vue Native suite?
Add ability to specify the tag which will be inserted when the Enter key is pressed (e.g., p, br, div, etc.).
Describe the bug
The Delete button doesn't work as expected in specific scenarios inside the Native NumericTextBox. The issue is related to the position of the text cursor.
To Reproduce
Expected behavior
The first element(the leftmost) after the dollar sign should be deleted. In general, when pressing the delete button, an element should be deleted from the NumericTextBox.
The current implementation of the Native Vue Grid doesn't provide an option to control the visibility of the column menu in each component column.
Providing a property that can control the visibility of the different column menus will be very useful in scenarios when we want to create a customized column menu that contains a component with a popup. With the current implementation of the component, if we for example add a DatePicker to the column menu, the opening of the DatePicker's calendar triggers the closing of the column menu. Having a prop that controls the visibility of the column menu we can easily handle the described scenario.
The ScrollView provides one of the fundamental UI experience blocks on mobile apps - would like to see a wrapper implemented for Kendo UI for Vue to add support for it.
In a scenario where we want to use the Drawer as a navigational component, the best solution from an accessibility perspective would be to add role="navigation" to the Drawer's items and role="main" to the Drawer's content.
The current implementation of the Drawer provides the option to define the discussed role for its content using the following code:
<DrawerContent role="main">
<router-view />
</DrawerContent>
In the current implementation of the Drawer, the only way we can define a role for its items is through a Javascript code like the following one.
document
.querySelector('.k-widget.k-drawer')
.setAttribute('role', 'navigation');
Providing a way to configure the role of the Drawer's items will be a useful feature for the component.
Describe the bug
The wrapper element of the Drawer's navigation items has a title attribute that should not be presented in the DOM
To Reproduce
Expected behavior
No tooltip/title should be presented in the DOM element of the Drawer's Items
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.
To Reproduce
Expected behavior
All Grid columns should be correctly visualized in the exported PDF file, no matter if they are locked or unlocked.
Additional context
If we set the paper-size to a pre-defined value like 'A4', the issue is not replicable