I want use "kendo.ui.progress" function, but i can't find example in vue.

JQuery example: Here

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 am attempting to use the kendo-diagram control in a VueJS application. I have two data sources, one for the actual nodes/shapes, and one for the connections between the nodes.

The documentation is pretty sparse, and the sample that you provide only deals with a Hierarchical data source.

Based purely on a guess, I did the following:

<template>
  <v-content>
    <kendo-datasource 
      ref="nodes"
      :data="dataSource">
    </kendo-datasource>
    <kendo-datasource 
      ref="connections"
      :data="connectionsDataSource">
    </kendo-datasource>
    <kendo-diagram
      :data-source-ref="'nodes'"
      :connections-data-source-ref="'connections'">
    </kendo-diagram>
  </v-content>
</template>

<script>
import Vue from "vue";
import "@progress/kendo-ui";
import "@progress/kendo-theme-default/dist/all.css";

import {
  DataSource,
  DataSourceInstaller
} from "@progress/kendo-datasource-vue-wrapper";
import { Diagram, DiagramInstaller } from "@progress/kendo-diagram-vue-wrapper";

Vue.use(DataSourceInstaller);
Vue.use(DiagramInstaller);

export default {
  data: function() {
    return {
      dataSource: [
        { id: "one", name: "One" },
        { id: "two", name: "Two" },
        { id: "five", name: "Five" }
      ],
      connectionsDataSource: [
        { from: "one", to: "two", label: "plus one" },
        { from: "one", to: "five", label: "plus three" }
      ]
    };
  },
  components: {
    Diagram
  }
};
</script>

I get the following error when running this page:

Error: Incorrect DataSource type. If a single dataSource instance is set to the diagram then it should be a HierarchicalDataSource. You should set only the options instead of an instance or a HierarchicalDataSource instance or supply connectionsDataSource as well.

What should I do in order to get both a data source, and connections data source bound to the diagram? Also, where can I find actual documentation for the VueJS implementation?

Thanks,

Stephan

https://docs.telerik.com/kendo-ui/AngularJS/the-grid-widget

is it possible to send grid options like :options using with Vue?

Thank you

I'm trying to build a simple grid with server paging, filtering and sorting, but I'm having trouble. Currently my grid is loading in all items from the server, when it should be loading just five. I think I previously had it loading just five, but it was always getting the first five.

Here's my HTML:

And here's my JS (using webpack):

Am I doing something wrong, or is this functionality not supported yet?

Shouldn't I be able to pass option attributes to a Grid (Any widget) without binding? 

<kendo-grid>

    server-filtering,

    server-paging,

    etc

</kendo-grid>

Also the Column filterable attribute is generating a warning when I pass it an object (Says Boolean only). Can you please add Object to the filterable prop.

Is it possible to access a method that was created in the Vue.JS methods with the Telerik grid, in this case a click action?

template: "<div><button @click='showClient(#:id#)'>Show Client</button></div>"

methods: {

     showClient (id) {

           console.log(id)

          this.$router.push('/client/:id')

     }

}

output render in HTML

<td role="gridcell"><div><button @click="showClient(720)">Show Client</button></div></td>

Hi,

By using the Kendo validator on a modal window (kendo-window) containing some required fields, I've got this issue:

• I try to save everything without filling the fields, the validation messages will appear below the required fields, resizing the modal window;
• I fill a required field and then click the save button. This required field will lose its focus, triggering the validation event that will hide the validation message, thus resizing the window and because of that, the click event on that save button will not be fired because the button is not below the cursor anymore;

I saw that there is a validateOnBlur option that I need to be enabled but it is used only when the field lose its focus. Is there a way to fire the validation event while the user is typing or changing the field data? It would fix that problem because the modal window will be resized before the user can click on the save button.

I am using the VueJS Wrappers.

Thanks