Goodmorning Progress,

We're working quite some time with Kendo for Vue and we are slowly migrating some old 'wrapper' grids to the new native grids. We know there are some limitations in it, because not everything is developed yet, but that wasn't a show stopper for us.

Or project uses quite a lot of data (like a google sheet) and we need it to be editable. So we implemented a native grid and a custom cell render with a VueComponent. This works perfect in case of a little amount of cells, but when there are more rows and columns it's giving us some performance issues.

First we tried virtual scrolling, but this feel 'honky-bonky' and is not even workable on a mac. Then we tried column-virtualization to minimize the rendered data, but also that didn't work. Columns aren't re-rendered when visible and its conflicting with our three locked start columns (visually data overlapping, numbers go through each other, etc).

Then our options are down to zero, so i started to investigate with some performance profiling what's happening. In our case we have 70 columns and 500 rows, this results in like 35k cells. Rendering isn't the big issue, until u start interact with the grid. Our RowClick-function sets one item in the data-items to 'inEdit' like the docs also showing. When this is happening the page freezes and i start wondering why. I found out that ALL the GridCell's (with a custom CellRender) are calling the updateRender-function. So 35k functions are called in some milliseconds and causes it to freeze. It takes around 30 sec's to get it a bit reactive, but you can understand its not workable anymore.

Our wrapper grids hadn't a single problem with handling these kids of data (no paging, no weird stuff, also custom renders for every cell)

Can you please provide me an answer why this is happening? It's possible to get access to our test-environment with the grids in action to visualize my problem a bit better. 

We have a payed license on a co-worker account (berend.haan@..).

Kind regards, 
Sander

I'm submitting a...

• Bug report

Current behavior

When there is a custom cell template applied to a column in the Grid(Native), using the grouping functionality breaks Grid's layout

Expected behavior

The Grid's layout shouldn't be affected if we apply a custom cell template

Minimal reproduction of the problem with instructions

1. Open this StackBlitz project
2. See that the values in the ProductName column are bolded, but Grid's layout is broken
3. Remove the cell template definition on line 54 by removing the cell property.
4. Run the project again and see how if we don't apply a cell template, Grid's layout is being displayed correctly

Environment

Package versions:

2019.2.621

Browser:
All

We are currently upgrading the vue-gid-wrapper to the better native-vue-grid. Unfortunately some features, like the keyboard naviagation, don't seem to be included yet.

I assume the features from the wrapper will all be included in the new native grid, but to be sure I'm requesting the feature (naviagation).

We are currently upgrading the vue-gid-wrapper to the better native-vue-grid. Unfortunately some features, like the minScreenWidth, don't seem to be included yet.

I assume the features from the wrapper will all be included in the new native grid, but to be sure I'm requesting the feature (minScreenWidth).

columns: [
        {
          field: 'variableName',
          title: 'fieldTitle',
          width: '125px',
          minScreenWidth: 1000
        },
        ...
      ]

Hi Kendo.

We're trying to replace Vue Grid Wrapper with the new Native Grid and most things works awesome. We only have one blocking feature that isn't inplemented yet.

So my question is when is the footer-logics comming for the native grid. We want to show aggregates in the fixed footer and it would be awesome it is like the 'headerCellRender' function defined on the grid. We know there is a gouping aggregate, but this isn't the thing we want.

Is there any idea when or even if it is comming to the native grid?

Kind regards,

Sander

Hello there,

I am looking for a loading spinner solution to use with Vue Native Grid. I could not find something on the docs.

Is there any way I can show some kind of loading indicator while loading the data?

I am not using data source from Kendo, just basic method to populate `:data-items="items"`

Thank you!

When using a grid with a selectable column and keyboard navigation enabled, it's not possible to select the last visible row. Instead of selecting the row, the grid just scrolls the item to the center of the grid.

I've attached a gif of the behavior and a sample project based on the grid demos.

onRowClick not there in Vue Grid