Questions on Kendo UI for Vue Forum

1 answer

119 views

Gantt task orderId not set in @add event

I'm hooking the @add event to show a custom add task screen so I need to call preventDefault , but when I do this it seems that some values are not set correctly:

	ganttAdd: function(e) {					
		//e.task has parentId, orderId, start, end all set correctly
		console.log("ganttAdd", e); 
	}

	ganttAdd: function(e) {					
		//e.task only has parentId set correctly, orderId + start + end are not set correctly
		console.log("ganttAdd", e); 	
		e.preventDefault();
	}

This looks wrong? Also, it is strange because because I'm using 'e' before calling preventDefault so I don't know why this should have any effect.

Gantt wrapper

answered on 19 Aug 2021

2 answers

1.2K+ views

How to refresh scheduler after resource data is updated

I use a scheduler with grouping where it is bound to the data object 'resourceDataSource1' as below

<kendo-scheduler-resource :field="'groupLead'" :name="'Lead'" title="'Lead'" :data-source="resourceDataSource1"></kendo-scheduler-resource>

All works fine if the data is set at the time the page loads (ie. if it is set directly in the data property), but but my case the tasks and resource info is retrieved by separate api call and hence is only set after the page loads.

So what I want to know is how can I get the scheduler to re-read the value from resourceDataSource1 once I have populated it?

Scheduler wrapper

answered on 19 Aug 2021

1 answer

126 views

Dynamic inclusion of ToolBarItems using v-if...?

Hello,

In the following snippet, if variable changes subsequent to the ToolBar being rendered, the ToolBarItem doesn't dynamically appear/disappear. Seems like it's disconnected from state.

<ToolBar>
	<ToolBarItem type="button" text="Do Something" id="button-one" v-if="variable"></ToolBarItem>
</ToolBar>

Have been able to work around this by dynamically including classes on a parent DOM element, and then, using CSS, either show or hide the element depending on the presence of the class. However this doesn't feel right and breaks from Vue convention

<div :class="{ 'special-class' : variable }">
    <ToolBar>
	<ToolBarItem type="button" text="Do Something" id="button-one"></ToolBarItem>
    </ToolBar>
</div>

<style>
    #button-one {
        display:none;
    }
    .special-class #button-one {
        display:inline-flex;
    }
</style>

Is there something I am missing? Perhaps another way to approach, or maybe conditional support via v-if is coming soon for Vue ToolBarItem?

Thanks!

Toolbar wrapper

answered on 17 Aug 2021

1 answer

263 views

why not show title in grid?

<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

184 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

125 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

508 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.4K+ 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

143 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