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
To Reproduce
Steps to reproduce the behavior:
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
Expected behavior
The row-render method should be called for the rows that hold the collapsed data, not for all Grid rows.
In the jQuery version of the Grid, the columnMenu can be configured to show/hide the different column menu options.
Here is an example of how the sortable prop can be configured in a way the sorting options will be hidden in the column menu.
Please provide the same configurations options for the column menu in the Native Grid
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
The native Grid allows you to lock selected columns inside it. When we have locked columns, these are constantly visible inside the Grid, while the unlocked columns can be horizontally scrolled to see their content.
The width of the area in which the unlocked columns can be scrolled depends on a combination of the following:
Having the above, there are some scenarios in which the area where the unlocked columns are displayed can be covered by locked columns or its size can become so small that the Grid data cannot be read.
Some examples of how the area that displays the unlocked column can become invisible or minified in size are:
The current Feature request is about a property that defines the minimum width of the area in which the unlocked columns are scrolled. It could be a property like minUnlockedColumnsVisibleAreaWidth. Having this property defined, it should have a bigger priority over the defined column widths. This means that if there is not enough space to display the different locked columns with their pre-defined widths, the locked columns should be resized in a way the minimum visible area for the unlocked columns has enough width to display data.
The column menu in the Wrapper Grid has the functionality to lock/unlock a selected column.
Can you add this feature to the Native Grid?
Currently, the Native Grid Columns have the minResizableWidth property available in the API,
Can you provide a maxResizableWidth property that will do the same thing for the Grid's width but will limit its maximum width?
Currently, the Native Grid implementation doesn't provide an option for the implementation of the scenario from the following screenshot.
The thing that can be currently customized in the grouping toolbar of the Native Grid is only its text.
Please provide an option by which we can define a custom template for the grouping toolbar.
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
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
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
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.
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.
The field for improvement: The expand/collapse is slow if we have a big number of items in the group which is expanded/collapsedDescribe 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
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.
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
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.
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.
All Grid cells should be exported to PDF no matter if they have a template applied to their definition.
It will be very helpful if there is an example that demonstrates how we can copy and paste data from Excel to Kendo UI for Vue Native Grid.