Telerik Forums
Kendo UI for Vue Forum
1 answer
52 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: 1items: [
            { text: 'Tables & Chairs'id: 2 },
            { text: 'Sofas'id: 3 },
            { text: 'Occasional Furniture'id: 4 }
        ]
    }, {
        text: 'Decor'id: 5items: [
            { 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
44 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
0 answers
60 views

Hello! 

We want to customize the InsertImage tool in the Editor, as we want to allow image upload. We found the React Documentation, and that's exactly what we want in Vue.

React Editor Component & Paste, Drag and Drop, and Upload Images - KendoReact Docs & Demos (telerik.com)

In React, (see this example main.tsx - nodebox - CodeSandbox) it looks straightforward to stop using the InsertImage from EditorTools and use the one in the example. 

import { InsertImage } from './insertImageTool';

// const { InsertImage } = EditorTools;

But in Vue (main.vue - nodebox - CodeSandbox), how do we replace the InsertImage by the implementation in insertImageTool? 

      tools: [
        ["InsertImage"]
      ],


Thank you 

Lucía

Lucía
Top achievements
Rank 1
Iron
 updated question on 11 Apr 2024
1 answer
51 views

We are starting to use Kendo UI for Vue HTML Editor for an application with support with multiple languages. 

Is there any way to make a contribution to the community translations?

I've seen some funny things (like translating "Audaz" for "Bold") in the github repo for react, and missing items for vue

kendo-react-messages/messages/es-ES/es-ES.json at master · telerik/kendo-react-messages · GitHub

  "editor": {
        "bold": "Audaz",

 

Lucía

Vessy
Telerik team
 answered on 11 Apr 2024
1 answer
49 views

So this is my datasource... I would assume the schema is what it would read to render the properties in the sheet, but it's just verbatim taking the JSON object and plopping it in.  So example, there's a LastUpdated property on each object, it's not defined in the schema... but it's rendering in the sheet.

Am I missing something?

 dataSource: {
            transport: {
                dataType: "json",
                read: {
                    url: this.baseUrl + "/groups?format=json",
                    type: "GET",
                    data: function () {
                        return {
                            cohort: $editorData.cohort
                        };
                    }
                },
                /*
                update: {
                    url: baseUrl + "/groups?format=json",
                    dataType: "json",
                    type: "POST"
                },
                */
            },
            requestEnd: function (e) {
                var response = e.response;
                var type = e.type;
                
                console.log("requestEnd", type, response);
            },
            schema: {
                model: {
                    id: "UserId",
                    fields: {
                        UserName: { type: "string", editable: false },
                        FirstName: { type: "string", editable: false },
                        LastName: { type: "string", editable: false },
                        Campus: { type: "string", editable: false },
                        Cohort: { type: "number", editable: false },
                        MF1: { type: "number" },
                        MF3: { type: "number" },
                        MF4: { type: "number" },
                        MF2: { type: "number" },
                        MF5: { type: "number" },
                        ClerkshipGroup: { type: "number" },
                        PediatricsStream: { type: "number" },
                        ProCompGroup: { type: "number" }
                    }
                }
            },



            <kendo-spreadsheet 
              ref="spreadsheet"
             :toolbar="false" 
             :sheetsbar="false"
             :excel-proxy-URL="'/RestApi/utility/proxy/save'"
             :pdf-proxy-URL="'/RestApi/utility/proxy/save'"
             :columns="15"
             :rows="300"
             style="width: 100%; height: 800px">
                        <kendo-spreadsheet-sheet 
                            :name="'Groups'" 
                            :data-source="dataSource"
                            :rows="rows"
                            :columns="columns"
                        >
                        </kendo-spreadsheet-sheet>
            </kendo-spreadsheet>

Vessy
Telerik team
 answered on 10 Apr 2024
1 answer
77 views

Hi all,

I cannot find any way to increase the event height of the kendo native scheduler component for vue. when artificially changing it for the .k-event class the top values don't line up, how do I make this bigger? In the meantime I also want to make the width the same as the actual value and not be the correct width -20px (as in the picture)

The height should be like the box, and the width should increase so the whitespace where the arrow is pointing is not there. Can anyone help with this?

 

Discussion: I think its awful how Kendo keeps pushing the Native Vue component in favor of the JQuery one, but the vue native one is just so outrageous, I wrote about 800 lines just to fix stupid rendering bugs with this. When will this get better?

Konstantin Dikov
Telerik team
 answered on 08 Apr 2024
1 answer
104 views

Hello everyone,

I've been trying to find a simple method to copy a date from one datepicker and paste it into others since the usual Ctrl+C and Ctrl+V shortcuts don't seem to work. So far, I haven't discovered an easy solution other than utilizing events directly on the datepicker itself. However, this approach doesn't work when trying to copy a date from another source. If anyone has any alternative suggestions or solutions, I'd greatly appreciate it.

Vessy
Telerik team
 answered on 03 Apr 2024
1 answer
99 views

Hello,

I have a queastion. When I use DropDownList in Navtive components of Vue3, I want to filter with both data item key and text field.
but the method I found is only using one field.

The field properties of a DropDownList are strings or functions.
I need Array<string> like ['dataItemKey', 'textFiled']. Can I?

 

example :

data-Item-list = [
{text : 'A', value : 1},
{text : 'B', value : 2},
{text : 'C', value : 3},
{text : 'D', value : 4}
]

When I put 3, C is searched.
At the same time I put D, D is searched.

Konstantin Dikov
Telerik team
 answered on 27 Mar 2024
1 answer
80 views
In Vue, can a grid be exported as a CSV file?
Vessy
Telerik team
 answered on 21 Mar 2024
1 answer
49 views

Hi all,

could it be that the "Color Picker doesn't habe any translations?

Thank you for feedback

 

BR

Oliver

 

Vessy
Telerik team
 answered on 21 Mar 2024
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Editor
DatePicker
Grid wrapper
Scheduler
DropDownTree wrapper
Spreadsheet wrapper
Input
MultiSelect
Calendar
NumericTextBox
Editor wrapper
DateInput
DateTimePicker
Scheduler wrapper
Styling / Themes
DataSource wrappers (package)
Gantt wrapper
Localization
Chart
Checkbox
Chart wrappers (package)
ComboBox
Window
Pager
Error
Upload
DropDownList wrapper
Popup
Form
Tooltip
TreeView
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Slider
Toolbar wrapper
Upload wrapper
Validator wrapper
ColorPicker
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox wrapper
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Splitter wrapper
TabStrip wrapper
TimePicker
TreeView wrapper
TabStrip
Card
FloatingLabel
TextArea
Drawer
Stepper
Gauge
Splitter
PanelBar
Notification
RangeSlider
Menu
TreeList
Toolbar
Button
ListView
FontIcon
SVGIcon
Animation
Barcode wrapper
ButtonGroup wrapper
Chat wrapper
ColorPicker wrapper
DateInput wrappers (package)
Diagram wrapper
Dialog wrapper
Gauges wrappers (package)
MaskedTextBox wrapper
MediaPlayer wrapper
Notification wrapper
Pager wrapper
PanelBar wrapper
PivotGrid wrapper
QRCode wrapper
RangeSlider wrapper
ScrollView wrapper
Security
Slider wrapper
Switch wrapper
Tooltip wrapper
TreeList wrapper
TreeMap wrapper
Window wrapper
Avatar
StockChart
Sparkline
RadioButton
RadioGroup
Hint
Loader
ProgressBar
DateRangePicker
Switch
Wizard
Skeleton
ScrollView
ColorGradient
ColorPalette
FlatColorPicker
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Mohamad Javad
Top achievements
Rank 2
Iron
Iron
Iron
Andrew
Top achievements
Rank 2
Iron
Aaron
Top achievements
Rank 1
Iron
Roland
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Mohamad Javad
Top achievements
Rank 2
Iron
Iron
Iron
Andrew
Top achievements
Rank 2
Iron
Aaron
Top achievements
Rank 1
Iron
Roland
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?