I'm making a grid wrapper for Grid and at some point the columns in the data I've been using have rendered with widths of 0 pixels. If I explicitly set them to any width in the object like so:

gridData: [
    { field: 'ProductName', title: 'Product Name', width: '500' },
    { field: 'UnitPrice', title: 'Price', filter: 'numeric', width: '500' },
    { field: 'UnitsInStock', title: 'Units in Stock' },
    { field: 'Discontinued', filter: 'boolean' }
]

Then those first two objects show up in my grid. The latter two objects do not. When I first setup a very basic grid example all columns render, but at this point I have filtering, column ordering, sorting, and pagination setup. Is there a config object I need to set somewhere? The docs can be a little byzantine so I admit I might have missed something.

When I inspect the HTML, I see that the `<table>` element has a width of 0. If I use the inspector to set it to 100%, the table autosizes the columns for me. If I try to override that in the `<style>` section of the wrapper file, it doesn't seem to overwrite whatever else is setting the width to 0.

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?

I'm using vuejs.

I've got a chart with a tooltip:

import { bytes } from '...fileBytesIsIn'
get tooltip () {
  const sharedTemplate = `<table class="tooltip-table" width="150">
  // removed header to save space
  # for (var i = 0; i < points.length; i++) { #
    <tr>
      <td><div class="swatch #: points[i].series.class#">&nbsp;</span></td>
      <td class="name" nowrap>#: points[i].series.name#</td>
      <td class="val">#: bytes(points[i].value) #</td>
    </tr>
  # } #
  </table>`
  return {
    visible: true,
    shared: true,
    template: '#= value #',
    sharedTemplate: sharedTemplate
  }
}

#: points[i].value | bytes #

I was trying to use the grouping feature. I have several items which are grouped into groups and sub groups. This is how am item could look like, if its grouped into a group and a subgroup:

{
    name: 'E1',
    group: 'Investitionskosten',
    subgroup: 'Erzeuger',
    scenario1: 1000,
    scenario2: 2000,
}

This works as expected.

What I now need is, that I can group items only in either just one group, or in no group at all. E.g:

{
    name: 'Initial',
    group: 'Investitionskosten',
    scenario1: 10000,
    scenario2: 8000,
},
{
    name: "Amortisation",
    scenario1: 'Basis',
    scenario2: '19 Jahre'
}

Notice, that the first item has no 'subgroup' property. So its only grouped into the value of the group property. The second item doesn't have the 'group' property, so its not grouped at all.

Is this somehow possible? The result could look like the screenshot in the attachments (I manually modified the HTML output, to make it look like this):

I am sure this is somehow related to my post over here...anyway I am seeing duplicated calls to the custom handler, this time it is the update function and I have finally managed to simulate it in this stackblitz example.

Please run the sample then drag "Functional and Technical Specification" to above "Market Research" and then two updates are triggered as expected:

Now change the update function to look as below (to simulate async processing).

          tasksUpdate: function(options) {            
            console.log(`update!`, options.data.ID,  options)
            setTimeout(function() {
              options.success(options.data)
            },3000)            
          },

Then reload the sample and do the same dragging action ie. drag "Functional and Technical Specification" above "Market Research", now the updates are duplicated (two for every task):

As you can imagine, this fires off way more server calls than are necessary (double the amount) depending on which task is dragged to where.

Am I misunderstanding something here?

Using the code from this doc I created this stackblitz and as you can see the task height only shows one row, I tried setting the height on the movie-template class but that did nothing.

How do make the multi-line template show all data?

Hi,

When using this example please see the attached video where the order by does not behave correctly.

After creation, tasks 'aaa' and 'bbb' have sequential order values, which is correct. After dragging 'bbb' above 'aaa' then both have the same order valule. It appears to be a bug?

I am using custom screens and UI to interact with the scheduler so I am overriding the default behviour eg. fFor the 'edit' event I call e.preventDefault() and then show my screen to do whatever is necessary.

I can't figure out how to do this for 'remove' though as it seems that the remove event only fires after the built-in "do you want to delete the event" prompt is shown and ok is clicked.

I don't want to show any built-in UI but want to show my own delete confirmation and then do the delete api call manually - how is this possible?

Hi all

I use a kendo grid to display some datas (with VUE JS 3 ) . This one is pageable.

I use the event "page" called when I change the page. I try to call test function from this event but I have the error "this.test" is not a function"...

And in the event "this" is the kendoGrid... How can I access to the function test ?

thanks you !

Hi, this is my problem.

I use the confirm function in kendo dropdownlist to make sure the user want to change the value or not.

When the user choose "cancel", that means he doesn't want to change the old value.

However the value in the dropdownlist UI shows the changed NEW value.

Here is the example: https://stackblitz.com/edit/dropdownlist-confirm?file=src/main.vue

Although the console shows "CANCEL", but the UI still shows the changed new value.

How can I fix this ? Thank you in advance!!!