How can I validate the title if it is empty

fields: {
taskId: { type: 'number' },
title: { validation: { required: true } },  /* Validation not working */
start: { type: 'date'},
end: { type: 'date' },
IdUsuario: { defaultValue: 1 },
IdSucursal: { nullable: true },
}

<kendo-scheduler :data-source="localDataSource"
:date="date"
:timezone="'Etc/UTC'"
:allDaySlot="false"
:height="750"
schema-model-id="taskId"
:schema-model-fields="fields"
:resources="catalogs"
:messages="messages"
@change="onChange"
@edit="onEdit"
@add="onAdd"
@cancel="onCancel"
@dataBound="onDataBound"
@move="onMove"
@navigate="onNavigate"
@resize="onResize"
@save="onSave">
<kendo-scheduler-view :type="'day'" :selected="true"></kendo-scheduler-view>
<kendo-scheduler-view :type="'workWeek'"></kendo-scheduler-view>
<kendo-scheduler-view :type="'week'"></kendo-scheduler-view>
<kendo-scheduler-view :type="'month'"></kendo-scheduler-view>
<kendo-scheduler-view :type="'agenda'"></kendo-scheduler-view>
</kendo-scheduler>

Hello,

I have been working with the Vue bindings for the Scheduler, and I ran into an issue with the scheduler resources not reacting properly to state changes. I believe this is a bug. It should be noted that this issue does not occur with the top-level scheduler data source. It reacts properly to async loading. Here's the issue:

Setting `:resources` to a static array of values (via state or getter) causes the scheduler to render correctly when grouping by that resource.

Example: 

Setting `:resources` to an async generated array of values (via state or getter) causes the scheduler to render nothing when grouping by that resource, even when the state/getter is updated and re-evaluated.

Example:

Same as above, except the getter returns a state value that is initialized to an empty array and on created we call something like this to load the data. Once the data has been loaded, the expected behavior is that the Scheduler will update to reflect the new resources.

Workaround

I have been able to get around this by using a `kendo.data.DataSource` and setting a `read` function that manually dispatches the async fetch and returns the result. This delays the rendering of the scheduler until the resources are available. That looks like this:

I have included a minimal example to illustrate the issue. By default, the incorrect behavior is used. To switch to the workaround showing correct behavior, just look at `KendoSchedule.vue` and comment out the lines in `createPersonResource()`

I have a dropdownlist that reads the datasource from a webserver, and the problem is that when using v-model sometimes the dropdown displays as empty because the server call takes a bit longer to return the items for the dropdown.

¿How can I solve this problem?

Thanks in advance.

I have a Kendo Vue Map with two layers: 1) a tile layer using OSM and 2) a bubble layer with a dataSource pointed to an api endpoint.  When I try to set the bubble layer's dataSource property to a component data property (this.mapPointDatasource) it does not work (see code below).  What am I missing?

...

data () {
      return {
        center: [39.5, -96],
        initialZoom: 4,
        mapPointDatasource: new kendo.data.DataSource({
          transport: {
            read: {
              url: 'http://<myJsonEndPoint>',
              dataType: 'json',
              cache: false
            }
          }
        }),
        layers: [
          {
            type: 'tile',
            urlTemplate: 'http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png',
            subdomains: ['a', 'b', 'c']
          },
          {
            type: 'bubble',
            //dataSource: this.mapPointDatasource,  // <- DOES NOT WORK
            dataSource: {  // <-- WORKS
              transport: {
                read: {
                  url: 'http://<myJsonEndPoint>,
                  dataType: 'json',
                  cache: false
                }
              }
            }
          }
        ]
      }
    },

...

I have a kendo upload inside a kendo window with ref=upload. On window activate I want to clear the files list. 

activate() {

    this.$refs.upload.kendoWidget().clearAllFiles();

}

Everything works fine until I upload a file. Once a file is uploaded the call to this.$refs.upload.kendoWidget() starts returning null.

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?