Hi,
i would like to have undo and redo buttons in vue text Editor , I couldn't see it here in where I'm typing question now.
The undo () and redo (
) icons--> like these or buttons anything would work.
could you please suggest what could be done to add undo and redo buttons.
appreciate your help,
Thank you
I need to open the Master-detail template not only on the "+" or "arrow" icon but on another button on the screen.
In other words, How can we invoke the "expandChange" method from other element instead of <Grid @expandchange="expandChange" > to expand/collapse the detail template?
Template: I want to expand the detail template with the click of the Edit button.
<Grid
:data-items="sampleData"
:columns="columns"
:detail="cellTemplate"
:expand-field="'expanded'"
@expandchange="expandChange"
>
<template v-slot:actionColumn>
<td>
<div class="d-flex align-items-center tbl-actions">
<button
type="button"
title="Edit"
@click="expandChange"
class="btn btn-icon d-flex align-items-center"
>
<span class="icon icon-edit"></span>
</button>
<button
type="button"
title="Add to Cart"
class="btn btn-icon d-flex align-items-center"
>
<span class="icon icon-cart"></span>
</button>
</div>
</td>
</template>
<template v-slot:expandTemplate> Detail template goes here.... <template>
Method:
expandChange: function (event: any) {
event.dataItem[event.target.$props.expandField] = event.value;
if (event.value) {
event.event.target.parentNode.parentNode.classList.add("expanded-row");
} else {
event.event.target.parentNode.parentNode.classList.remove(
"expanded-row"
);
}
},
The API docs show icon-class as the method for custom icons on the button wrapper - https://www.telerik.com/kendo-vue-ui/components/buttons/api/button/Button/#icon-class
I cannot get this to work - is this possible?
I want to add a tab on the tabstrip in the Spreadsheet component. I have done so by adding this line of code to the toolbar attribute
<spreadsheet ref="spreadsheet"
:toolbar="toolbar"
Where toolbar is a value in data that looks like
toolbar = {
'custom': [
// for all available options, see the toolbar items configuration
// https://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar/configuration/items
{
type: "button",
text: "Save",
showText: "both",
icon: "k-icon k-i-save",
click: function() {
// Some code
}
},
However, this new tab shows up with the name 'undefined', next to the other tabs. Is there some way to give it a proper name?
There is a tabstip problem in ios 13.3. (iPad)
The tabstrip scroll icon is not clicked.
Click doesn't work so it's impossible to check the contents of the next tab.
Please confirm.
https://www.telerik.com/kendo-vue-ui/components/layout/tabstrip/scrollable-tabs/
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.
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
Hello! I want to bind image to tree view item like this
<kendo-hierarchicaldatasource ref="remoteDataSourceComponent"
:transport-read-url="'api/gettreenodes'"
:transport-read-data-type="'json'"
:schema-model-id="'id'"
:schema-model-has-children="'hasChildren'">
</kendo-hierarchicaldatasource>
<kendo-treeview data-source-ref="remoteDataSourceComponent"
:data-text-field="'name'"
:checkboxes="false"
:data-image-url-field="getIcoPath('type')"
:drag-and-drop="false">
</kendo-treeview>
methods: {
getIcoPath: function(typeId) {
return require('./resources/'+typeId+'.png');
}
I want to set treeItem image according to treeItem type in function getIcoPath.
Is it possible?