I am using a custom comparison function for a wrapper grid column as follows:
<kendo-grid-column :field="'OrderID'" :sortable="{ compare: myComparisonFunction }"></kendo-grid-column>
This works, but I get the following warning in the console: [Vue warn]: Invalid prop: type check failed for prop "sortable". Expected Boolean, got Object
Here is a full example: https://stackblitz.com/edit/chqmrq?file=src/main.vue
What should I do to get rid of the console warning?
I want to save the values of multiple checkboxes to a single array like so:
https://codepen.io/ktsn/pen/wXbPLR
However this approach won't work with the kendo checkboxes since they only return a boolean:
https://stackblitz.com/edit/7bgzdd?file=src/main.vue
What's the best option here if I want to use multiple kendo checkboxes and save their values to a single array?
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.
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?
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!
<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>
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.
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
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?