Questions on Kendo UI for Vue Forum

1 answer

255 views

<template>
  <grid :style="{ height: '280px' }" :data-items="items" :columns="columns">
  </grid>
  <button @click="onClick">clicked</button>
</template>

<script setup lang="ts">
import '@progress/kendo-theme-default/dist/all.css'
import { Grid } from '@progress/kendo-vue-grid'
import { ref } from 'vue'

const columns = ref([
  { field: 'ProductID', title: 'ID', headerCell: 'myTemplate', hidden: false },
  { field: 'ProductName', title: 'Product Name', headerCell: 'myTemplate', hidden: false },
  { field: 'UnitPrice', title: 'Unit Price', headerCell: 'myTemplate', hidden: false }
])

const items = [{
  ProductID: 1,
  ProductName: 'Chai',
  UnitPrice: 18.0000
},
{
  ProductID: 2,
  ProductName: 'Chang',
  UnitPrice: 19.0000
},
{
  ProductID: 3,
  ProductName: 'Aniseed Syrup',
  UnitPrice: 10.0000
},
{
  ProductID: 4,
  ProductName: "Chef Anton's Cajun Seasoning",
  UnitPrice: 22.0000
}]

const onClick = () => {
  columns.value.map((item) => {
    console.log(item)
    if (item.field === 'ProductID') { item.hidden = true }
    // item.hidden = true
  })
}
</script>

I can not saw title in grid. Thanks.

Grid

answered on 16 Aug 2021

0 answers

180 views

Locked Column on for custom templates

Hi, seems columns with custom cell template don't acquire the locked parameters, is there some other approach to achieve this.
I tried to use the position: sticky, but it misses the calculation for that, so is there some way we get the actual calculated column width (when resizible)?

Grid

asked on 13 Aug 2021

0 answers

123 views

Grid Native and Command Columns

Hi Team,

Have command columns been removed from Grid Native?

Previously I have used them with the wrapper component. In the native I tried the below:

        return {
            editingId: false,
            columns: [
                {field:'item_name'},
                {field:'price'},
                {field:'stock'},
                {
                    editable: false,
                    command:[
                        {name:"destroy","text": "destroy", click: this.destroyItem}
                    ]
                }
            ]
        };

I would expect a column to be rendered with a button for destroy and the click handler called on click. In the native component the grid is just showing an empty column with no buttons.

Thanks,

Eric.

Grid

asked on 12 Aug 2021

1 answer

488 views

enable/disable encode html for grid column

Hi,

i've seen that for grid columns of jquery component it is possibile to set the encoding to true or false

so if the data i will get is like this

hello my name is <strong> Giuseppe </strong>

i will see "hello my name is Giuseppe"

as of now i see "hello my name is <strong> Giuseppe </strong>"

is there any work around for this?

thanks

Grid

answered on 11 Aug 2021

1 answer

7.3K+ views

Switch between Light and dark theme for whole site

Hi,

I am using Kendo UI Material theme. I would like to switch between light and dark themes without reloading the whole site. May I know what are variables available that I can set in the code?

Styling / Themes

updated answer on 10 Aug 2021

0 answers

140 views

Grid columns collapse without explicit width

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.

Grid

updated question on 09 Aug 2021

2 answers

1.7K+ 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

updated answer on 03 Aug 2021

1 answer

208 views

Filter in SharedTemplate chart tooltip

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
  }
}

My issue: bytes is undefined. I've tried it like a filter

#: points[i].value | bytes #

and several other ways, but nothing seems to work. Is there any way I can apply my formatting function to this value in the tooltip sharedTemplate so I can display these values as readable file sizes?

Chart wrappers (package)

answered on 30 Jul 2021

0 answers

221 views

Grid display grouped rows and groupless rows

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):

Grid

asked on 28 Jul 2021

1 answer

134 views

Spurious calls from Gantt's transport-update when async

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?

Gantt wrapper

answered on 26 Jul 2021