Questions on Kendo UI for Vue Forum

2 answers

83 views

DropDownList Remote Data Binding

Hi,

Where can I find an example on how to load remote data on a dropdownlist, the remote data it's a JSON.

Any help would be appreciated.

DataSource wrappers (package)

DropDownList

answered on 17 Mar 2022

2 answers

84 views

Some CDN for grid (native)

Hi,

Is it possible to initialize the grid (native) via the CDN service? I've only tried the grid wrapper in this way :(

Grid

updated answer on 12 Mar 2024

2 answers

162 views

Window - Call function into the template

Hi everybody,

I defined a window component with a onclick event in the template like that :

<window
        id="windowMD"
        :width="'300px'"
        :title="'Window title'"
        :actions="actions"
        :content="{
            url: 'http://localhost:3100/api/metadata',
            dataType: 'json',
            iframe: false,
            template:`
              <ul>
                # for (let i=0; i < data.mediaRequests.length; i++){ #
                    <li style='padding-bottom:5px;' onclick='#=eventClick(data.mediaRequests[i])#' > 
                      #= data.mediaRequests[i].id #
                    </li>
                # } # 
              </ul>
            `
        }"
    >
    </window>

But I have a problem when I click in a element in the list. I have a "the function is not defined" even if I declared it

[...]
methods: {
    eventClick: function(data) {
        console.log(data);
    }, 
  },
[...]

I see in this documentation that the function must be declared in the global scope but I need to use "$emits" to transfer data to parent component and I don't think it is possible in global scope. Even if it is possible, I have the same problem with the function ....

is there a solution to my problem ?

Thanks.

Window

answered on 20 May 2021

2 answers

1.4K+ views

Custom Kendo Grid Wrapper Column Template Using kendo-grid columns Attribute

I have the following template that I would like to use to render the contents of a Kendo grid wrapper cell:

<template>
   <span>
      Template Rendered: {{ templateArgs.name }}
  </span>
</template>

<script>

export default {
  name: 'template1',
  data () {
    return {
      templateArgs: {}
    }
  }
}
</script>

I am able to do this using kendo-grid-column elements as follows:

<template>
  <div>
    <kendo-grid :data-source="datasource">
          <kendo-grid-column field="name" title="Name" :template="itemTemplate"></kendo-grid-column>
    </kendo-grid>
  </div>
</template>

<script>
import Vue from 'vue'
import { Grid, GridColumn } from '@progress/kendo-grid-vue-wrapper'
import Template from './Template.vue'

var itemTemplate = Vue.component(Template.name, Template)

export default {
  name: 'HelloWorld',
   components: {
       'kendo-grid': Grid,
       'kendo-grid-column': GridColumn
   },
   methods: {
        itemTemplate: function (e) {
          return {
            template: itemTemplate,
            templateArgs: e
          }
        }
    },
  data () {
    return {
        datasource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
    }
  }
}
</script>

I would like to use the kendo-grid columns attribute instead, as follows:

<template>
  <div>
    <kendo-grid :data-source="datasource" :columns="columns">
    </kendo-grid>
  </div>
</template>

<script>
import Vue from 'vue'
import { Grid, GridColumn } from '@progress/kendo-grid-vue-wrapper'
import Template from './Template.vue'

var itemTemplate = Vue.component(Template.name, Template)

export default {
  name: 'HelloWorld',
   components: {
       'kendo-grid': Grid,
       'kendo-grid-column': GridColumn
   },
   methods: {
        itemTemplate: function (e) {
          return {
            template: itemTemplate,
            templateArgs: e
          }
        }
    },
  data () {
    return {
        columns: [{ field: "name", title: "Name", template: this.itemTemplate }],
        datasource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
    }
  }
}
</script>

Something is wrong with the code in the second case, though. Instead of rendering the cells using the template, I am getting [object Object] as the cell contents. What should I do in order to fix this?

Grid wrapper