We have a Kendo vue UI Grid column with Vue bootstrap Datepicker as a custom column.
When we click the calender icon it is partially showing inside the cell. I want it to be show as an popup outside the cell.
Below is the code snippet from the custom cell component
<template>
<td class="cell-editable">
<b-input-group>
<b-form-input
:value="aufValue | date"
type="text"
placeholder="tt.mm.jjjj"
:disabled="!canEdit"
></b-form-input>
<b-input-group-append>
<b-form-datepicker
size="sm"
button-only
:value-as-date="true"
v-model="aufValue"
locale="de-AT"
:disabled="!canEdit"
></b-form-datepicker>
</b-input-group-append>
</b-input-group>
</td>
<template>
right now it show like the attached screenshot:
Please suggest a solution for achieving the same.
Thank You
https://codesandbox.io/s/216z33wvjr
this is the link that show the reason of i am asking this question, seem like Vue kendo not have the function of remove and add the tab, i m using jquery and use it to add and remove the tab. Add the tab is easy but when i need to remove the tab, the fuction that i defined on the "x" seem like cannot fire the "remove" function i had create in the method of vue, seem like it was not found the method.
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
Hi i want to ask about editor in native component like in this demo Link
so i have 2 problem so far when implementing editor.
first question is when i set value in v-model and load page, i can get value after load finish but i cant type anything in editor
this is my setup code :
second question is that popup tools css like insert image or insert code looks broken when i open it
i upload screenshot for your reference about my second question
you can ask more detail if my question is confusing
thanks
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 !!!")
}
}
I'm using the Kendo for Vue native grid and I'm trying to make an asynchronous API call inside of my cell render function. I'm sure there has to be a way around this, but I just can't seem to find an answer. You can see the example at the Stackblitz link below. The cell using a render function never gets rendered in this example. However, if you remove the setTimeout it works as expected.
https://stackblitz.com/edit/kendoui-nativegrid-cellrender-async
Thanks,
Ferg
I have a column like this:
<
kendo-grid-column
:command
=
"[{name: 'open', click: open}]"
></
kendo-grid-column
>
It works fine, but I want it to show a bootstrap glyphicon and no text instead of the text "open" that is showing now.
Is there any way to template the column so that I can get the click event and also use any content I want inside the column?
Thanks in advance.
Is there way to identify drop from external item ie. a list item from a list. into the scheduler?
I want to create appointments on drop event inside schedular.
Thank you in advance.
Hello,
please can somebody tell me what can i do with this style issue ? this issue display also with ComboBox and all of this stuff
I use vuejs version
"@progress/kendo-vue-dropdowns": "^3.5.0",
many thanks