Hi all,

i'm testing the vue grid component and wondering, why the sort indexes aren't shown like in the example: https://demos.telerik.com/kendo-ui/grid/sorting

Here's my test:

http://dojo.telerik.com/@ubrinker/idenomOd

TIA

ulf

Seeing some peer warnings for 7 of the wrapper packages due to dependencies on earlier versions, can these be ignored or is this a bug where the package.json for each of these is referring to earlier releases? I'm importing from @progress/kendo-all-vue-wrapper which is from the 2018.1.313 release.

+-- @progress/kendo-gauges-vue-wrapper@2018.1.313
| +-- @progress/kendo-base-components-vue-wrapper@2017.3.1026
| `-- UNMET PEER DEPENDENCY @progress/kendo-ui@~2017.3.1026
+-- @progress/kendo-listbox-vue-wrapper@2018.1.313
| +-- @progress/kendo-base-components-vue-wrapper@2017.3.1026
| `-- UNMET PEER DEPENDENCY @progress/kendo-ui@~2017.3.1026
+-- @progress/kendo-listview-vue-wrapper@2018.1.313
| +-- @progress/kendo-base-components-vue-wrapper@2017.3.914
| `-- UNMET PEER DEPENDENCY @progress/kendo-ui@~2017.3.913
+-- @progress/kendo-map-vue-wrapper@2018.1.313
| +-- @progress/kendo-base-components-vue-wrapper@2017.3.1026
| `-- UNMET PEER DEPENDENCY @progress/kendo-ui@~2017.3.1026
+-- @progress/kendo-mediaplayer-vue-wrapper@2018.1.313
| +-- @progress/kendo-base-components-vue-wrapper@2017.3.1026
| `-- UNMET PEER DEPENDENCY @progress/kendo-ui@~2017.3.1026
+-- @progress/kendo-spreadsheet-vue-wrapper@2018.1.313
| +-- @progress/kendo-base-components-vue-wrapper@2017.3.1026
| `-- UNMET PEER DEPENDENCY @progress/kendo-ui@~2017.3.1026
+-- @progress/kendo-treemap-vue-wrapper@2018.1.313
| +-- @progress/kendo-base-components-vue-wrapper@2017.3.1026
| `-- UNMET PEER DEPENDENCY @progress/kendo-ui@~2017.3.1026

I need a simple sample for doing a custom treeview template (not the checkbox template), where the template gets an instance of the node or node's data, so I can change the output based on the data.  I have tried doing it like the grid ones shown in this forum, but if I set a breakpoint in devtools, I can see that my function doesn't seem to be getting anything on the argument.  It does render the template though.  I had it working as a string using a kendo template, but then couldn't call something back on my component, so figured I need a "proper" Vue template for it.  Maybe I'm missing something simple here.

My method that is returning the template:

    public itemTemplate(e: any): any {

        return {
            template: FieldGroupTemplate,
            templateArgs: e
        }
    }

My template component (we use Typescript):

import Vue from "Vue";
import Component from "vue-class-component";
import { Prop } from "vue-property-decorator";
import { lazyInject } from "Areas/Ordering/OrderingIocContainer";

@Component({

    template: "<div>{{ templateArgs.name }}</div>",     
    components: {
    }
})
export default class FieldGroupTemplate extends Vue {
    public templateArgs!: any;

    constructor() {
        super();
    }
}

Some markup, from where a template has the treeview:

<kendo-tree-view id="fieldSelectorTreeView" :data-source="items"

                                 @@select="select"
                                 :data-text-field="'name'"
                                 :checkboxes="checkboxes"
                                 :template="itemTemplate"
                                 @@check="check" style="height:615px">
                </kendo-tree-view>

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?