We need the Gird Filter in ASP.NET Core functionality for Vue

I want to use filterGroupByField to indicate that a column that has a GridColumnMenuCheckboxFilter.  Naturally, there can be more than 2 items selected.  If more than 2 items are selected, the filterGroupByField returns null.

See this example (select more than 2 product id's):

https://stackblitz.com/edit/i58xwv?file=src/main.vue

 

 

 

Add active class to the column menu icon once something in it is different from default

Currently we recommend using custom class on the header(https://www.telerik.com/kendo-vue-ui/components/grid/columns/column-menu/#toc-styling-the-column-menu-icon), yet not visualising that the menu is populated seems like a UI misleading issue when using the component so we should add it by default

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
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.

It would be beneficial if the Kendo UI for Vue ColumnMenu had an option to display the visible columns as it is in Kendo UI for Jquery, instead of creating a custom columnMenu:

https://demos.telerik.com/kendo-ui/grid/column-menu

Currently, if you double-click on the Grid resize handler the cell is not resized to auto-fit. It would be beneficial if auto-sizing was possible

There is an issue with white space that appears when you scroll a Grid with Groupable and Virtualization configurations switched on.
Reproduction:

1. Go to this article.
2. Scroll the Grid till the end of the scroller
3. See the white space.

Jumping issue:
When you scroll the linked above example there is a strange "jumping" of the rows.

• Bug report

Current behavior

https://stackblitz.com/edit/tynxxg-vckenw?file=src/main.vue

1. With the default code in the example, when first scrolling the skip is not accurate. If the grid is scrolled extremely slowly, you can see the skip is not incremented at first. If scrolling quickly, it is very jumpy.

2. The faster you attempt to scroll, the stranger the skip behavior becomes unlike with simply removing the grouping grid prop in the same example. I've been able to get into situations it in the provided StackBlitz by scrolling down and scrolling back up quickly where it hangs on row counts and where it will scroll past the 0 indexed row causing an empty grid, then scrolling down again with either jump with a large skip number or sometimes throw an error.

3. Possibly provide more flexibility to the scenario

Expected behavior

skip and cache are working correctly

Hello Team.

I appreciate grid's reorderable function work at Nuxt3(@kendo-vue-grid: 3.14.2).

But For some reason, this function doesn't work properly. so I report a bug.

I reproduce a stackblitz code.
https://stackblitz.com/edit/nuxt-starter-gmag5m

I implemented it like this,

After fetching(=GET) column data from the server, reorder the columns using kendo grid's reorderable function and save(=POST) it on the server.

I call columnExecute function, so server refetch(=GET) column data.

at /pages/index.vue, colums ref change rightly.

at /components/grid.vue, columnList ref change rightly.

But rendered kendo grid's column doesn't change.


please check this issue. 

 

Sincerely,
Eunbyul.

The current implementation of the Native Grid doesn't support the row reordering functionality when the Grid is configured to work in virtualization mode.

Please provide the row reordering functionality in a scenario with virtual scrolling.

Describe the bug
Resizable and reorderable true does not work in nuxt
https://stackblitz.com/edit/hy923e-fmrqsf?file=package.json
Try to resize or reorder

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
The @progress/kendo-vue-buttons is missing as peer to @progress/kendo-vue-grid package

In the current implementation of the GridColumnMenuCheckboxFilter component when its searchBox prop is set to true, the input that appears filters the component's values using the "startwith" filter operator. 

Providing a property that can define the filter operator of the searchBox inside the GridColumnMenuCheckboxFilter will be a very useful feature. 

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:

The current implementation of the Native Grid doesn't provide the option to access its messages and use them in custom scenarios like Column Menu templates. 

Providing the option to take the components' messages would be a nice to have feature.

  

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:

There are multiple smaller Kendo UI for Vue Native components used inside the Native Grid. In some scenarios, the fine-tuning of the smaller components is essential for the usage of the Grid. 

For example, the current implementation of the Grid doesn't provide an option to configure the formatting of the NumericTextBox displayed in the filter of its column menu. Now, to achieve the described functionality we have to use a custom column menu template.

Please add an option to control the configuration of the Native components used internally by the Grid.

Providing an Excel-like behavior inside the Native Grid will be a very nice feature for the component. The described behavior includes:

• Cells and rows selection like in Excel
• Editing like in Excel
• Keyboard navigation like in Excel