Completed
Last Updated: 19 Nov 2020 07:30 by ADMIN

The Accessibility Support page for Kendo UI for Vue Native Components (https://www.telerik.com/kendo-vue-ui/components/accessibility/accessibility-compliance/) incorrectly implies that the Vue Native grid has keyboard navigation support. The page seems to be referring to native components as seen by the breadcrumb and the introduction text.

All of the items in the list except for the grid are linked to the Vue Native component. The "grid" item is linked to the Vue Grid Wrapper (https://www.telerik.com/kendo-vue-ui/components/grid-wrapper/keyboard-navigation/).

I believe there's already a (unplanned) feature request out there to add keyboard navigation features to the native grid, but in the meantime, please remove the grid from this page as it does not currently support full keyboard navigation.

 

Unplanned
Last Updated: 16 Nov 2020 16:34 by ADMIN

I'm submitting a Bug report

Current behavior

<chart :title-text="'Gross domestic product growth /GDP annual %/'" 
        :legend-position="'bottom'"
        :series-defaults-type="'area'"
        :category-axis-categories="categoryAxisData"
        :category-axis-major-grid-lines-visible="false"
        :category-axis-labels-rotation="'auto'"
        :value-axis-labels-format="'{0}%'"
        :value-axis-line-visible="false"
        :value-axis-axis-crossing-value="-10"
        :tooltip-visible="true"
        :tooltip-format="'{0}%'"
        :tooltip-template="tooltipTemplate"
        :theme="'sass'">
    <chart-series-item :name="'India'"
                        :data="indiaData"
                        :line-style="'smooth'">
    </chart-series-item>
    <chart-series-item :name="'World'"
                        :data="worldData"
                        :line-style="'smooth'">
    </chart-series-item>
    <chart-series-item :name="'Haiti'"
                        :data="haitiData"
                        :line-style="'smooth'">
    </chart-series-item>
</chart>

When using the ChartSeriesItem tags to define the data in the Chart component the following error appears in the console once the Vue project is started.
image

Expected behavior

<chart-series-item :name="'India'"
                        :data="indiaData"
                        :line-style="'smooth'">
    </chart-series-item>
    <chart-series-item :name="'World'"
                        :data="worldData"
                        :line-style="'smooth'">
    </chart-series-item>
    <chart-series-item :name="'Haiti'"
                        :data="haitiData"
                        :line-style="'smooth'">
    </chart-series-item>

Using a definition like the above, we should be able to define Chart's data with no issues.

Minimal reproduction of the problem with instructions

  1. Open this project
  2. In the console run "npm install"
  3. In the console run "npm run serve"
  4. Open the URL of the project and see the browser's console
Unplanned
Last Updated: 06 Nov 2020 14:08 by ccacdi

I'm submitting a bug report

Current behavior

When the DatePicker popup calendar is opened on a device with iOS 14.1, once the navigation arrow is clicked, the pop immediately closes

Expected behavior

Tapping on the navigation arrow should change the current calendar view and remain the popup opened.

Minimal reproduction of the problem with instructions

  1. Open this demo on a mobile device with iOS 14.1
  2. Open the calendar of the DatePicker and navigate it with the navigation arrows
Unplanned
Last Updated: 06 Nov 2020 11:38 by Alex

I'm submitting a bug report

Current behavior

In a Native Grid that has a multicolumn header which is locked, when the Grid is scrolled horizontally, the upper(shared) part of the multicolumn header is moving based on the scrolling direction.

Expected behavior

When the multicolumn header is locked it should not move along with the horizontal scrolling inside the Grid

Minimal reproduction of the problem with instructions

  1. Open this example
  2. Scroll the Grid horizontally
Declined
Last Updated: 30 Oct 2020 05:52 by ADMIN
Created by: Armaan
Comments: 1
Category:
Type: Bug Report
2

In Kendo UI Grid for jQuery we have the following:

"editable": {

    "createAt": "bottom"

}

 

How it can be done in Kendo Grid for Vue.JS ?

----------------------------------------------------------------------------------------------------------------------------------

Bug report

In Grid(Wrapper) in UI for Vue, the editable-create-at is not changing Grid's "add new row" behavior when it is set to "bottom".

Reproduction of the problem

  1. Open this Stackblitz and run it
  2. Press the "Add new record" button and see that the new record is being added to at the top of the Grid

A workaround that could be applied is to use :editable="{createAt:'bottom'}" instead of :editable-create-at="bottom"

Current behavior

The new rows are being added to the bottom of the Grid with :editable-create-at="bottom"configuration applied.

Expected/desired behavior

When :editable-create-at="bottom" is applied the new records in the Grid should be added to its bottom

Environment

  • Kendo UI version: 2019.2.621
  • jQuery version: x.y
  • Browser: [all]
Won't Fix
Last Updated: 06 Oct 2020 05:44 by ADMIN
Created by: devdutt
Comments: 1
Category: Grid
Type: Bug Report
0

Hi Team,

I'm using the export excel feature in the grid. When I'm trying to download data less record( < 3k) it's working fine, but this becomes problematic when I'm trying to download huge data (more than 10k) my browser hangs and after some time browser crash. Do let me know any solution regarding this issue.

Won't Fix
Last Updated: 29 Sep 2020 13:31 by ADMIN
Created by: lingfeng
Comments: 1
Category: Kendo UI® for Vue
Type: Bug Report
0
Won't Fix
Last Updated: 29 Sep 2020 07:23 by ADMIN

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

Completed
Last Updated: 25 Sep 2020 00:03 by Zoran
Created by: Zoran
Comments: 3
Category: Kendo UI® for Vue
Type: Bug Report
1

Stackblitz example.

The Spreadsheet options are logged in the console in the mounted function. Note that pdf.proxyURL and excel.proxyURL have no values.

Completed
Last Updated: 24 Sep 2020 08:50 by ADMIN

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.

Completed
Last Updated: 24 Sep 2020 08:08 by ADMIN

Steps to reproduce:

(latest version of vue, vue CLI, node etc. installed globally)

  • vue create test-project
  • cd test-project
  • npm install --save @progress/kendo-ui
  • npm install --save @progress/kendo-theme-default
  • npm install --save @progress/kendo-dateinputs-vue-wrapper
  • added Calendar component to App.vue (see https://www.telerik.com/kendo-vue-ui/getting-started/)
  • changed the name "kendo-calendar" in HTML template to "Calendar", otherwise I get build errors
  • npm run serve --> browse to localhost:8080 --> error in console:

Uncaught ReferenceError: $ is not defined
    at eval (webpack-internal:///./node_modules/@progress/kendo-ui/js/pdf-viewer/pager.js:85)
    at Object.eval (webpack-internal:///./node_modules/@progress/kendo-ui/js/pdf-viewer/pager.js:292)
    at eval (webpack-internal:///./node_modules/@progress/kendo-ui/js/pdf-viewer/pager.js:74)
    at Object.1472 (webpack-internal:///./node_modules/@progress/kendo-ui/js/pdf-viewer/pager.js:75)
    at __webpack_require__ (webpack-internal:///./node_modules/@progress/kendo-ui/js/pdf-viewer/pager.js:21)
    at Object.0 (webpack-internal:///./node_modules/@progress/kendo-ui/js/pdf-viewer/pager.js:49)
    at __webpack_require__ (webpack-internal:///./node_modules/@progress/kendo-ui/js/pdf-viewer/pager.js:21)
    at eval (webpack-internal:///./node_modules/@progress/kendo-ui/js/pdf-viewer/pager.js:41)
    at eval (webpack-internal:///./node_modules/@progress/kendo-ui/js/pdf-viewer/pager.js:44)
    at Object../node_modules/@progress/kendo-ui/js/pdf-viewer/pager.js (app.js:3624)

I could reproduce the error using different Kendo UI for vue components like Buttons etc. (following the getting-started page for the button component). The default vue project template uses Babel and Webpack. Is there a configuration missing for Kendo UI?

I already checked:

Unplanned
Last Updated: 24 Sep 2020 08:01 by ADMIN

I am using Kendo Vue Wrapper Grid that is editable. I am using the propery 

:editable-create-at="bottom"

but the new rows are always added at the top.

There is another open issue related to this.

https://github.com/telerik/kendo-ui-core/issues/5198

 

Please provide a fix.

 

Completed
Last Updated: 24 Sep 2020 07:59 by ADMIN
Created by: o11an
Comments: 1
Category: Kendo UI® for Vue
Type: Bug Report
0
Just wanted to let you know that the CDN for Kendo Vue native grid suddenly stopped working today, about 1 hour ago. I hade to change @latest in the url to @0.3.4 (it automatically changed to 0.3.5 otherwise, and there's nothing there) to get my dev environment up and running again.
Won't Fix
Last Updated: 24 Sep 2020 07:58 by ADMIN
Created by: sangwon
Comments: 2
Category: Kendo UI® for Vue
Type: Bug Report
0
How can i set visible for custom command?
Completed
Last Updated: 24 Sep 2020 07:50 by ADMIN

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

Duplicated
Last Updated: 24 Sep 2020 07:43 by ADMIN

I am using Keno Grid in my VueJS project. I need to show spinner while loading data into grid. I followed the link https://stackblitz.com/edit/zr8vbd-xk73ps?file=index.html . This display the spinner until data loaded into Vue. How ever when there is no data to display I would like to display No records found message.

My Grid looks like this.  

<Grid :data-items="pageViewModels"
:pageable="true"
:columns="gridData.columns"
:skip="gridData.skip"
:take="gridData.take"
:total="gridData.total"
@pagechange="onPageChange"
@rowclick="onRowClick">
<GridNoRecords>
<div class="k-loading-mask margin-top-100">
<span class='k-loading-text'>
</span>
<div class='k-loading-image'/>
<div class='k-loading-color'/>
</div>
</GridNoRecords>
Declined
Last Updated: 23 Jun 2020 02:57 by icq
Created by: icq
Comments: 4
Category: Kendo UI® for Vue
Type: Bug Report
0

I have a kendo wrapper grid with local datasource pointing to vue state.
There is a button "Update" which will update the state so that the grid will be updated as well and it works.

But, if I firstly click the button "Test" (just only a same value assignment to state) and then click "Update", strangely it does not work so the grid has no change.
I finally found out the reason is that after clicked "Test" then "Update", the vue state updated BUT the kendo grid datasource won't (out of sync unexpectedly)
So the temp solution is I have to manually assign the state to the datasource so that the grid will be updated.

Repo: https://stackblitz.com/edit/dqsbeo

My question is why, after clicked 'Test', the kendo grid datasource became cached and out of sync with the vue state?
If I don't click 'Test', they do sync always.
Problem occur only when "same value assignment" to the state. If "different value assignment", no problem.

 

<div id="vueapp">
    <kendo-datasource ref="dsDS" :data="localDataSource"></kendo-datasource>
    <kendo-grid :data-source-ref="'dsDS'">
        <kendo-grid-column :field="'ProductID'"
                           :title="'ID'"
                           :width="40"></kendo-grid-column>
        <kendo-grid-column :field="'ProductName'"></kendo-grid-column>
        <kendo-grid-column :field="'UnitPrice'"
                           :title="'Unit Price'"
                           :width="120"
                           :format="'{0:c}'"></kendo-grid-column>
        <kendo-grid-column :field="'UnitsInStock'"
                           :title="'Units In Stock'"
                           :width="120"></kendo-grid-column>
        <kendo-grid-column :field="'Discontinued'" :width="120"></kendo-grid-column>
    </kendo-grid>
    <input type="button" value="Test" @click="test" />
    <input type="button" value="Update" @click="update" />
</div>

new Vue({
    el: '#vueapp',
    data: {
        localDataSource: [{
                "ProductID": 1,
                "ProductName": "Chai",
                "UnitPrice": 18,
                "UnitsInStock": 39,
                "Discontinued": false,
            },
            {
                "ProductID": 2,
                "ProductName": "Chang",
                "UnitPrice": 17,
                "UnitsInStock": 40,
                "Discontinued": false,
            },
            {
                "ProductID": 3,
                "ProductName": "Aniseed Syrup",
                "UnitPrice": 10,
                "UnitsInStock": 13,
                "Discontinued": false,
            }
        ]
    },
    methods: {
      test: function(e) {
        this.localDataSource = JSON.parse(JSON.stringify(this.localDataSource)); //same value assignment
        console.log('test');
      },
      update: function(e) {
        this.localDataSource.splice(0, 1, this.localDataSource[1]); //replace the first object with second object
      },
    }
})


Completed
Last Updated: 02 Apr 2020 15:52 by ADMIN
Created by: Steven
Comments: 3
Category: Kendo UI® for Vue
Type: Bug Report
0

Type in the Currency field in the example page here https://www.telerik.com/kendo-vue-ui/components/inputs/numerictextbox/formats/

 

After typing in the third digit, caret position moves to the 2nd digit instead of the first or last digit.

Typing in more digits causes the caret to move a position up occasionally.

 

Caret needs to be consistent on its positioning, either staying in the far left, or to the right before the decimal.

Preferably, this should be a prop to configure.

 

Also, tabbing out of the field when there are more than 2 decimal places will not format on leave.

Completed
Last Updated: 19 Mar 2020 14:24 by ADMIN

I'm submitting a...

  • Bug report

Current behavior

When defining a custom cell template by defining a new Vue component few Vue warnings appear in the console. Here are the errors:

  • [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "dataItem"
  • [Vue warn]: $listeners is read-only.

Expected behavior

There should be any errors in the console when defining a cell template using a Vue component.

Minimal reproduction of the problem with instructions

  1. Open this Dojo example
  2. Sort the Grid by any column
  3. See the browser's console

Environment

Package versions: kendo-vue-grid 0.3.7 loaded via CDN

Completed
Last Updated: 29 Jan 2020 07:45 by ADMIN

Bug report

Vue Grid wrapper column template with router-link does not work correctly

Reproduction of the problem

https://codesandbox.io/s/vue-dynamic-components-t54dq

Current behavior

js errors

Expected/desired behavior

the router links work correctly

Environment

1 2