Telerik Forums
Kendo UI for Vue Forum
1 answer
136 views

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?

Petar
Telerik team
 answered on 24 Aug 2021
1 answer
329 views

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?

Petar
Telerik team
 answered on 20 Aug 2021
1 answer
112 views

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.

Petar
Telerik team
 answered on 19 Aug 2021
2 answers
1.2K+ views

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?

 

Al
Top achievements
Rank 1
Iron
Iron
Iron
 answered on 19 Aug 2021
1 answer
123 views

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!

Petar
Telerik team
 answered on 17 Aug 2021
1 answer
251 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.
Plamen
Telerik team
 answered on 16 Aug 2021
0 answers
174 views
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)?
Nelson
Top achievements
Rank 1
 asked on 13 Aug 2021
0 answers
117 views

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.

eric
Top achievements
Rank 1
 asked on 12 Aug 2021
1 answer
465 views

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

Petar
Telerik team
 answered on 11 Aug 2021
1 answer
7.2K+ views

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?

garri
Top achievements
Rank 2
Iron
Iron
Iron
 updated answer on 10 Aug 2021
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
DatePicker
Editor
Grid wrapper
Scheduler
DropDownTree wrapper
Spreadsheet wrapper
Input
MultiSelect
Calendar
NumericTextBox
DateInput
DateTimePicker
Editor wrapper
DataSource wrappers (package)
Scheduler wrapper
Styling / Themes
Chart wrappers (package)
Gantt wrapper
Localization
Chart
Checkbox
ComboBox
Window
Pager
Error
Upload
DropDownList wrapper
Popup
Form
Tooltip
TreeView
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Slider
Toolbar wrapper
Upload wrapper
Validator wrapper
ColorPicker
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox wrapper
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Splitter wrapper
TabStrip wrapper
TimePicker
TreeView wrapper
TabStrip
Card
RadioButton
FloatingLabel
TextArea
Drawer
Stepper
DateRangePicker
Gauge
Splitter
PanelBar
Notification
RangeSlider
Menu
TreeList
Toolbar
Button
ListView
FontIcon
SVGIcon
Animation
Barcode wrapper
ButtonGroup wrapper
Chat wrapper
ColorPicker wrapper
DateInput wrappers (package)
Diagram wrapper
Dialog wrapper
Gauges wrappers (package)
MaskedTextBox wrapper
MediaPlayer wrapper
Notification wrapper
Pager wrapper
PanelBar wrapper
PivotGrid wrapper
QRCode wrapper
RangeSlider wrapper
ScrollView wrapper
Security
Slider wrapper
Switch wrapper
Tooltip wrapper
TreeList wrapper
TreeMap wrapper
Window wrapper
Avatar
StockChart
Sparkline
RadioGroup
Hint
Loader
ProgressBar
Switch
Wizard
Skeleton
ScrollView
ColorGradient
ColorPalette
FlatColorPicker
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+127 more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?