I'm trying to manually add an item to my grid's datasource, and can't seem to get it to work, but I may just be missing something fundamental with Vue components.

My grid is located in a child Vue component template, where the datasource is given to it by the parent (it's an array of objects).  When it binds, it does display my two sample rows from the array, but can't get a new row to be added dynamically.

Grid:

                    <kendo-grid v-once ref="diagnosisCodes" :data-source="dataSource.DiagnosisCodes" :selectable="true" :scrollable="false">
                        <kendo-grid-column field="SequenceNumber" title="@Localizer["Sequence"]" :width="100"></kendo-grid-column>
                        <kendo-grid-column field="DiagnosisCode" title="@Localizer["Diagnosis Code"]" :width="140"></kendo-grid-column>
                        <kendo-grid-column field="Description" title="@Localizer["Description"]"></kendo-grid-column>
                        <kendo-grid-column :command="['destroy']" title="&nbsp;" :width="120"></kendo-grid-column>
                    </kendo-grid>

In a method of my child component, I'm basically trying to do this, just to see if I can get a new row to appear in the grid:

                    const dc = <Vue>this.$refs.diagnosisCodes;

                    const item: any = { SequenceNumber: 3, DiagnosisCode: "M225.7", Description: "Fingers crossed" };

                    dc.$props.dataSource.push(item);

The console error is attached, but the error is "[Vue warn]: Error in callback for watcher "dataSource": "TypeError: dataSource.fetch is not a function".  I'm new to using Kendo Vue, so if I'm doing this wrong, how can I dynamically add to my Vue grid datasource, in order to get new rows to appear?

I can't export my grid to Pdf. On console, this error shows up:

TypeError: allVue.extend is not a function
    at KendoDrawingAdapter.convertPageTemplateToHtml (KendoDrawingAdapter.js?cc56:50:1)
    at eval (core.js?4739:362:1)
    at eval (core.js?4739:466:1)
    at Array.forEach (<anonymous>)
    at doPageBreak (core.js?4739:465:1)
    at next (core.js?4739:1168:1)
    at whenImagesAreActuallyLoaded (core.js?4739:1164:1)
    at handlePageBreaks (core.js?4739:450:1)
    at eval (core.js?4739:308:1)
    at next (core.js?4739:1168:1)

Trying to replicate the issue, I forked this working example from kendo website (https://www.telerik.com/kendo-vue-ui/components/grid/pdf/) into StackBlitz and just changed the Vue package version to the latest v2 (https://stackblitz.com/edit/twqkkz?file=src%2Fmain.vue,package.json).

By just doing that the page has broken with the following error:

TypeError: (0 , vue_1.createTextVNode) is not a function
    at templateFn (main.vue:7:60)
    at Object.eval (main.vue:144:1)
    at eval (main.vue:170:4)
    at eval (main.vue:171:3)
    at eval (<anonymous>)
    at Qt (webcontainer.4131d213adf6116ed795350ac232389585e09527.js:15:30145)
    at webcontainer.4131d213adf6116ed795350ac232389585e09527.js:15:38799
    at U (webcontainer.4131d213adf6116ed795350ac232389585e09527.js:15:13565)
    at webcontainer.4131d213adf6116ed795350ac232389585e09527.js:15:13207
    at Object.eval (main.js:7:36)

So I'm not sure about what is happening, but it seems to be an incompatibility issue with Vue 2.

Dear Telerik Forum Admins,

Please find attached a screenshot of my current kendo-grid setup and DataSource.

I have implemented the excel functionality on my Vue Grid Wrapper, but the excel only contains the amount of records specified within the pageSize property of my DataSource. 

I found a similar issue on the Angular form mentioning the fetchData property on the Angular Grid, but it is not clear to me how this should be implemented within Vue.js.

Could you please assist me in being able to implement both functionalities?

Kind regards,

Natasha L

With Kendo-UI being more of a widget framework as opposed to a css framework, are there any recommended css frameworks out there that will suite kendo-ui? Looking for a material based css framework to handle layout/grid setup. Also looking for a Vue3 based framework, which unfortunately Vuetify is not at that level yet (still alpha).

I you have implements other css frameworks, were there any pitfalls/hurtles to get both frameworks working together? Issues like clashing themes/styles, build issues, etc.

As mentioned before, I predominantly need this css framework for the layout/grid setup, so technically I don't really need a 'full on' css framework as setups like simple grid or flexbox are probably all I need, buuuuuuut .... other css frameworks like Vuetify, Vue Material, Chakra, etc do have alot of other components that either aren't in kendo or are a bit more user friendly.

Hi, 

I can show the grouping aggregates of kendo grid and I also can add exportExcel into my project.

But I have no idea how can I combine it?

I had the problem that my excel file doesn't have the groupfooter "aggregates".

Also, the columns misalign, when I add this into the exportExcel methods.

group: this.rentGroup,

Here is the code:

https://stackblitz.com/edit/wzp8rg?file=src%2Fmain.vue

Thank you in advance.

Hello,

I use yours gantt wrapper, but I have problem with refresh or change datasource when some event happened. I check reactive changes at others wrapers i.e. grid and ther this is working fine. I try also manipulate yours exemples at sandbox and plnkr, but it always fails. 
I'd do something like that. 

How can i do this? I found some post and then was admin anserw that vue-wrappers from wersion 2018.2.xxx are reactived. I will be greatfull for working plnkr. 

Hi

Is it possible to switch to a card view in the grid component? If not, is it possible to keep the filter options from <kendo-grid> and then have a switch to change between the <kendo-grid-column>'s and another custom view?

Or maybe another suggestion?

Hi,

Here is the example.

https://stackblitz.com/edit/tobv8y?file=src%2Fmain.vue

The column "ProductID" is locked.

When I export PDF, this column doesn't show on PDF file. (As pic)

How can I export PDF with locked column?
Thank you!

hi,

I want to show my binding data in kendo grid but I cant this with schema,anybody can help me? i do this:and my data transfer from my controller in "/loadlists"

and my data in vue:

At this I try to bind my data transfer from controller to kendo grid and I cant

I am using the vue grid wrap with the bootstrap theme and I wonder how I can make my columns responsive or at least keep their size on a smaller screen and can scroll, for that set a width in my component for this reason not Does it work for example

<kendo-grid-column :field="'employee'" :width="160"></kendo-grid-column>

any ideas?