On most Native Kendo Vue components the following classes are applied depending on the state: 

• 'k-floating-label-container'         
• 'k-state-focused'          
• 'k-state-empty'         
• 'k-autofill'         
• 'k-state-invalid'         
• 'k-rtl'

'k-state-invalid' for instance adds a red border around the Kendo Input component:



In this example the red line isn't added to the html textarea:
https://www.telerik.com/kendo-vue-ui/components/form/guidelines-with-examples/#toc-vue-form-inputs

Hello community,

I am wondering if anyone knows a way to programatically abort the execution of savePDF in the kendo-vue-pdf library?

Thanks!

I have below item in my 'columns' in 'data' function of my grid component. How can I write it in <kendo-grid-column> tag format?

I also need my isActive to render as a radio button all the time. Please help with these 2 things.

{ cell: "myTemplate", filterable: false, width: "210px" }

This is what I have so far. It display all columns except my v-slot.

<grid :style="{ height: '300px', width: '60%' }"

I'm trying to combine 2 Kendo Dropdowns + 1 Kendo Input field together inside a single Form component.

Inside this component I want to save the values from the 3 inputs a single array and pass it's value to the Kendo Form component:

https://stackblitz.com/edit/4lrva3?file=src/FormInput.vue


What's the best way to achieve this?

Thanks in advance

Hello,

Just wondering if there is a way to have the datetimepicker for Vue, the native datetimepicker, to be blank by default instead of the input mask looking text?

Kind regards,

David

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!