or
1 answer
4 views
How do i make the horizontal bar chart the same height? does it have some props , i added space and margin , but this does not change the height
Vessy
Telerik team
answered
on
25 Apr 2024
1 answer
5 views
Hello,
We want to have translations in Spanish, French and Portuguese for the users of our application who use such languages. We managed to translate all editor components, "Font Name", "Font Size". All successful except for the "FormatBlock".
In the FormatBlock dropdown, Kendo UI Rich Text editor is missing the translations and we will open a support case to request the feature.
In the meantime, we tried to do it ourselves. We implemented this
<LocalizationProvider :language="language">
<Editor
ref="editor"
:tools="tools"
:content-style="{
height: '160px',
width: '100%'
}"
:value="richTextValue"
@change="onChange"
@blur="onBlur"
>
<template v-slot:Pop2FormatBlockTool="{ props }">
<formatblock v-bind="props" />
</template>
</Editor>
</LocalizationProvider>
Of course, where, of course, we included this in the tools array:
{ render: "Pop2FormatBlockTool", props: this.pop2FormatBlockToolSettings },
Then we defined these variables in our Vue component, with default values
kendoFormatBlockP: string = "P"
kendoFormatBlockH1: string = "H1"
kendoFormatBlockH2: string = "H2"
kendoFormatBlockH3: string = "H3"
kendoFormatBlockH4: string = "H4"
kendoFormatBlockH5: string = "H5"
kendoFormatBlockH6: string = "H6"
pop2FormatBlockToolSettings: any = {
...EditorToolsSettings.formatBlock,
items: [
{ text: this.kendoFormatBlockP, value: "p" },
{ text: this.kendoFormatBlockH1, value: "h1" },
{ text: this.kendoFormatBlockH2, value: "h2" },
{ text: this.kendoFormatBlockH3, value: "h3" },
{ text: this.kendoFormatBlockH4, value: "h4" },
{ text: this.kendoFormatBlockH5, value: "h5" },
{ text: this.kendoFormatBlockH6, value: "h6" }
]
}
And we tried calling this method in beforeMounted() and mounted() to override the default values with the $t translations...
initializeCustomTranslations(): void {
this.kendoFormatBlockP = "Párrafo" // this.$t("telerik.editor.formatblock.p")
this.kendoFormatBlockH1 = this.$t("telerik.editor.formatblock.h1")
this.kendoFormatBlockH2 = this.$t("telerik.editor.formatblock.h2")
this.kendoFormatBlockH3 = this.$t("telerik.editor.formatblock.h3")
this.kendoFormatBlockH4 = this.$t("telerik.editor.formatblock.h4")
this.kendoFormatBlockH5 = this.$t("telerik.editor.formatblock.h5")
this.kendoFormatBlockH6 = this.$t("telerik.editor.formatblock.h6")
}
But translation do not load and we lost the format (Heading 1 bigger than Heading 6).
Do you have any clue of what is going on, that prevents us from loading translations, and how to restore the format that we get in English?
Thanks for the help
Lucía
Vessy
Telerik team
answered
on
25 Apr 2024
0 answers
5 views
Hello, is there any chances to disable or do not display the validation dialog upon using the Input component. Based on this example, I want to use the Error component for displaying the validation as Text and I will no longer use the validation dialog.
Btw, I'm using Kendo UI for Vue
0 answers
2 views
Is it possible to set two subclasses under :
.k-slider .k-slider-selection
for example .k.slider .k-slider-selection { .&transparent { background-color: transparent; } &.blue { background-color: blue } }
and how would i apply it here ?
Joel
Top achievements
Rank 1
Rank 1
asked
on
23 Apr 2024
1 answer
7 views
when trying to import any of Kendo Vue's types to have IDE autocomplete, my vue compiler crashes with
[plugin:vite:vue]
import this this
import {
SchedulerViewItem,
SchedulerViewItemProps,
} from "@progress/kendo-vue-scheduler";
Is there any way around this? The autocompletion is working fine and I am getting the types to my IDE, but the project just won't launch.
EDIT
I changed the code to this:
interface Props extends /* @vue-ignore */ SchedulerViewItemProps {
overlayPanel?: InstanceType<typeof OverlayPanel>;
startDraggingPlannedPlanning: (
event: MouseEvent,
planningId: number,
) => void;
}
and now it is working. But still, any other way to do this?
Vessy
Telerik team
answered
on
22 Apr 2024
1 answer
11 views
I have several questions here:
- How can I implement my own tools (Vue component)?
- How to implement an emoji picker (Vue component)?
- How to implement mentions (@name) with a Vue component?
I can't find anything about it in the docs.
Filip
Telerik team
answered
on
17 Apr 2024
0 answers
9 views
Hi, kendo
I used the grid for reference "https://www.telerik.com/kendo-vue-ui/components/grid/columns/locked/"
At the same time, I added resizable props.
like this,
<template>
<grid
:style="{ height: '400px', width: '500px' }"
:data-items="products"
:reorderable="true"
@columnreorder="columnReorder"
:columns="columns"
:resizable="true"
>
</grid>
</template>
<script>
import { Grid } from '@progress/kendo-vue-grid';
import { products } from './products';
export default {
components: {
grid: Grid,
},
data: function () {
return {
products: this.createRandomData(),
columns: [
{ field: 'ProductID', title: 'ID', width: '45px', locked: true },
{ field: 'ProductName', title: 'Name', width: '250px', locked: true },
{
field: 'Category.CategoryName',
title: 'CategoryName',
width: '150px',
locked: true,
},
{ field: 'UnitPrice', title: 'Price', width: '90px' },
{ field: 'UnitsInStock', title: 'In stock', width: '90px' },
{ field: 'UnitsOnOrder', title: 'On order', width: '90px' },
{ field: 'Discontinued', locked: true, width: '120px' },
{
field: 'QuantityPerUnit',
title: 'Additional details',
width: '250px',
},
],
};
},
methods: {
columnReorder: function (options) {
this.columns = options.columns;
},
createRandomData() {
return products;
},
},
};
</script>
I resized "Name" column, then I could see the bug that a gap has occurred between Name and CategoryName.
Can I fix it?
1 answer
14 views
1 answer
12 views
Hi,
Is it possible to implement a filter in a multiSelectTree so that when a search term matches a parent item, it automatically displays all of its children as well?
example:
data = [
{
text: 'Furniture', id: 1, items: [
{ text: 'Tables & Chairs', id: 2 },
{ text: 'Sofas', id: 3 },
{ text: 'Occasional Furniture', id: 4 }
]
}, {
text: 'Decor', id: 5, items: [
{ text: 'Bed Linen', id: 6 },
{ text: 'Curtains & Blinds', id: 7 },
{ text: 'Carpets', id: 8 }
]
}
];
For instance, if one were to search for "decor," would the system also show "Bed Linen," "Curtains & Blinds," and "Carpets"?
Thanks in advance,
Ziggy
Konstantin Dikov
Telerik team
answered
on
15 Apr 2024
1 answer
7 views
Hello,
When I use TextBox in Navtive components of Vue3, I want to distinguish between the input value and the displayed value.
For example,
I uesd TextBox like this.
<TextBox v-model="inputValue" />
If I enter "1234567", "1,234,567" will be displayed. but inputValue has "1234567".
or
If I enter "AbcD", "abcd" will be displayed. but inputValue has "AbcD".
Can I only change the displayed value while maintaining the value I entered?
ps... I don't want use the NumericTextBox. because of lowercase and uppercase.
Filip
Telerik team
answered
on
11 Apr 2024
