Hello Folks,
After updating vue to lattest version, I have this error after each 'npm run build' command:
Maybe, you have some project example with vue 3 and these libs (@progress/kendo-base-components-vue-wrapper, @progress/kendo-base-components-vue-wrapper etc).
Here is my packege.json:
{
Thanks.
I'm currently using this object provided by the kendoForm injected property:
https://www.telerik.com/kendo-vue-ui/components/form/api/KendoFormInjectedProperty/#toc-modifiedbyfield
When I change a field inside the <FormElement> it adds the field to this object, however once I undo this change (return back to initial value) the field remains inside the object.
Here's a stackblitz to illustrate the problem:
https://stackblitz.com/edit/t7gw96?file=src%2FFormContent.vue
How do I remove the fields from this object when they no longer differ from their initial value?
Hi everyone,
I have an issue using the KendoEditor with Vue.js. Here is my code :
HTML part :
<div id="vueapp" class="vue-app">
<form id="forme">
<input type='text' class="k-textbox" name='title' id="title" v-model="request.title" />
</form>
<kendo-editor :resizable-content="true"
:resizable-toolbar="true"
:value="request.desc"
style="height:280px"
rows="10"
cols="30">
</kendo-editor>
</div>
Script part for vue:
var vm = new Vue({
el: '#vueapp',
data: function() {
return {
request: {
title: "",
desc: "Write here..."
},
has_deadline: false
}
}, methods: {
test: function(){ alert(this.request.title + this.request.desc)}
}
});
Then, when I change the content of the input "title" (let's say I do "title1") and call the "test" method, an alert comes up with "title1 Write here...".
But when I change the content of the editor (for example, "description1"), the alert comes up with "title1 Write here..." instead of "title1 description1" !
Could someone explain me what I did wrong ? I can not find how to figure out.
Thanks for your help,
Louis
Hello all, I am using Kendo Editor and have the below setup:
<editor :resizable-content="true"
:resizable-toolbar="true"
contenteditable="true"
style="height:360px"
rows="10"
cols="30"
v-model="editorBody"
@input="setBodyOnChange"
@keyup="setBodyOnKeyUp"
@execute="setBodyOnExecute"
@select="onSelect"
ref="editor">
</editor>
I would like to retrieve the cursor position when someone clicks in the editable area. Specifically I think I should use the select event. But I can't find a way to do so....
Any help would be appreciated.
How can I bind a kendo multiselect to a list of objects? The v-model binding only returns an array with the values of data-value-field.
<
kendo-multiselect
id
=
"employees"
v-model
=
"selectedEmployees"
:data-source
=
"employeesDataSource"
:data-text-field
=
"'name'"
:data-value-field
=
"'employeeNumber'"
:delay
=
"1000"
:auto-bind
=
"true"
:min-length
=
"2"
>
</
kendo-multiselect
>
In the example above selectedEmployees will be set to an array of employee numbers instead of employee objects. How can I get it so work with objects instead?
A number of Kendo components could do with better support for screen readers, including:
No doubt there are more than the above.
Effective screen reader accessibility is as much about what you skip as what you add. Where possible, audio prompts should be short and clear, and not produce excess noise.
I am facing an issue in event for my custom checkbox in column template in Kendo UI grid using js.
I am not able to call my method checkboxToggle() which I have called it from here <input type="checkbox" class="user-status" # if(Status){ # checked # } #
v-on:click="checkboxToggle()"/> and for more details you can view my code below.
This is my code.
<
kendo-datasource
ref
=
"localDataSource"
:data
=
"filteredUsers"
:group
=
'groupingFiled'
></
kendo-datasource
>
<
kendo-grid
:height
=
"500"
:data-source-ref
=
"'localDataSource'"
:resizable
=
"true"
:filterable
=
"false"
:sortable-allow-unsort
=
"true"
:sortable-show-indexes
=
"true"
:scrollable-virtual
=
"true"
:pageable-numeric
=
"false"
:pageable-previous-next
=
"false"
:pageable-messages-display
=
"'Showing {2} users'"
:editable
=
"'popup'"
:toolbar
=
"[{name: 'excel', text: 'Excel'}]"
:excel-file-name
=
"'Motadata_UserListing.xlsx'"
:excel-filterable
=
"true"
>
<
kendo-grid-column
:selectable
=
"true"
:width
=
"35"
></
kendo-grid-column
>
<
kendo-grid-column
:field
=
"'UserId'"
:hidden
=
"true"
></
kendo-grid-column
>
<
kendo-grid-column
:field
=
"'UserName'"
:width
=
"150"
></
kendo-grid-column
>
<
kendo-grid-column
:field
=
"'UserType'"
:width
=
"180"
></
kendo-grid-column
>
<
kendo-grid-column
:field
=
"'Role'"
:width
=
"120"
></
kendo-grid-column
>
<
kendo-grid-column
:field
=
"'AssignedGroups'"
></
kendo-grid-column
>
<
kendo-grid-column
:field
=
"'Email'"
:width
=
"210"
></
kendo-grid-column
>
<
kendo-grid-column
:field
=
"'Description'"
:width
=
"200"
></
kendo-grid-column
>
<
kendo-grid-column
:field
=
"'Status'"
:width
=
"170"
:template
=
"this.toggleTemplate()"
></
kendo-grid-column
>
</
kendo-grid
>
Vue Js code
Methods:{
toggleTemplate(){
let template =
`<
label
class
=
"switch"
>
<
input
type
=
"checkbox"
class
=
"user-status"
# if(Status){ # checked # } #
v-on:click
=
"checkboxToggle()"
/>
<
span
class
=
"slider round"
></
span
></
label
>`;
let compiledTemplate = kendo.template(template);
return compiledTemplate.bind(this);
},
checkboxToggle(){
//TODO Grid checkbox template event binding not working
alert("Checkbox Toggle !!!")
}
}
Hallo,
I am trying to include a custom toolbar into the vue template.
<template>
<div class="page">
<h1>Author</h1>
<client-only>
<kendo-datasource ref="ds"
:schema-model-id="'id'"
:schema-model-fields="model"
:schema-data="schema"
:transport-create-beforeSend="onBeforeSend"
:transport-create-url="'http://192.168.1.11:8000/graphql'"
:transport-create-content-type="'application/json'"
:transport-create-type="'POST'"
:transport-create-data="additionalParamsOnCreate"
:transport-read-beforeSend="onBeforeSend"
:transport-read-url="'http://192.168.1.11:8000/graphql'"
:transport-read-content-type="'application/json'"
:transport-read-type="'POST'"
:transport-read-data="additionalParamsOnRead"
:transport-update-beforeSend="onBeforeSend"
:transport-update-url="'http://192.168.1.11:8000/graphql'"
:transport-update-content-type="'application/json'"
:transport-update-type="'POST'"
:transport-update-data="additionalParamsOnUpdate"
:transport-destroy-beforeSend="onBeforeSend"
:transport-destroy-url="'http://192.168.1.11:8000/graphql'"
:transport-destroy-content-type="'application/json'"
:transport-destroy-type="'POST'"
:transport-destroy-data="additionalParamsOnDestroy"
:page-size="20"
:transport-parameter-map="parameterMap">
</kendo-datasource>
<kendo-grid ref ="mainGrid"
:data-source-ref="'ds'"
:edit-field="'inEdit'"
:navigatable="true"
:pageable="true"
:editable="true">
<!-- first try -->
<!--
:toolbar="["create"]"
-->
<!-- second try -->
<!--
<GridToolbar class="k-header k-grid-toolbar">
<button href="#" title="Add new" class="k-button k-button-icontext k-grid-add" @click="insert">
Add new
</button>
</GridToolbar>
-->
<!-- third try -->
<div class="k-header k-grid-toolbar">
<a role="button" class="k-button k-button-icontext k-grid-add" href="#"><span class="k-icon k-i-plus" @click="testClick"></span> Command</a>
</div>
<kendo-grid-column :field="'id'"
:title="'ID'"
:width="80">
</kendo-grid-column>
<kendo-grid-column :field="'firstName'"
:title="'firstName'"
:width="80">
</kendo-grid-column>
<kendo-grid-column :field="'lastName'"
:title="'lastName'"
:width="80">
</kendo-grid-column>
</kendo-grid>
</client-only>
<kendo-notification ref="popupNotification"
@show="onShow"
@hide="onHide">
</kendo-notification>
</div>
</template>
<script>
import { Button } from '@progress/kendo-buttons-vue-wrapper';
import { Grid, GridColumn } from '@progress/kendo-grid-vue-wrapper';
import { KendoDataSource } from '@progress/kendo-datasource-vue-wrapper';
import { Notification } from '@progress/kendo-popups-vue-wrapper';
import { READ_AUTHORS_QUERY, ADD_AUTHOR_QUERY, UPDATE_AUTHOR_QUERY,DELETE_AUTHOR_QUERY } from '../graphql/author'
export default {
name: 'App',
components: {
'k-button': Button,
'kendo-grid': Grid,
'kendo-grid-column': GridColumn,
'kendo-notification': Notification,
},
created: function() {
console.log('created');
},
mounted: function() {
console.log('mounted');
this.popupNotificationWidget = this.$refs.popupNotification.kendoWidget();
console.log('mounted2');
},
methods: {
insert: function() {
this.popupNotificationWidget.show('insert');
},
onClick: function (ev) {
console.log("Button clicked!");
},
testClick: function (ev) {
this.popupNotificationWidget.show('testClick');
console.log("test clicked!");
},
onShow: function (e) {
console.log("Show")
},
onHide: function (e) {
console.log("Hide")
},
onBeforeSend: function(req) {
let component = this;
// req.setRequestHeader("Authorization", "bearer ...tokenstring...");
},
additionalParamsOnCreate: function(model) {
return {
query: ADD_AUTHOR_QUERY,
variables: {author: model }
};
},
additionalParamsOnRead: function(model){
console.log('additionalParamsOnRead')
return {
query: READ_AUTHORS_QUERY,
};
},
additionalParamsOnUpdate: function(model){
return {
query: UPDATE_AUTHOR_QUERY,
variables: {author: model }
};
},
additionalParamsOnDestroy: function(model){
return {
query: DELETE_AUTHOR_QUERY,
variables: {author: model }
};
},
parameterMap: function(options, operation) {
return kendo.stringify({
query: options.query,
variables: options.variables
});
},
schema: function (response) {
var data = response.data;
if (data.authors) {
return data.authors;
} else if (data.AddAuthor) {
return data.AddAuthor;
} else if (data.UpdateAuthor) {
return data.UpdateAuthor;
} else if (data.DeleteAuthor) {
return data.DeleteAuthor;
}
},
},
data: function() {
return {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true },
firstName: { type: "string" },
lastName: { type: "string" }
}
}
}
}
}
</script>
<style>
</style>
The fist try with built-in function works: a new empty record ist displayed in first lineof the grid.
The second and third try call the methods, but no new empty record is generated.
I cannot get this to work - is this possible?
Regards,
Michael
Hello All,
How can possible for adding checkbox in MultiSelect option ?
if checked 1 item in MultiSelect then show item text but if more than one item is selected then I want to display the item count.
let me know if its possible.
Regards,
Rahul