Telerik Forums
Kendo UI for Vue Forum
20 questions
Sort by
1 answer
93 views

I've added the Kendo MultiSelect component inside a Kendo Form. However once I start typing some text inside the MultiSelect it throws an error as soon as I click outside:
https://stackblitz.com/edit/bfuhyb?file=src%2FFormInput.vue (stackblitz example of the problem)

What's worse is that upon throwing this error it completely freezes the input until you remove the text (you can't see this on stackblitz since the error covers the screen).

Did I forget to add a certain property to the MultiSelect or is this a bug?

When the MultiSelect is outside of a Kendo Form it doesn't have this behavior:
https://stackblitz.com/edit/ys4zsu?file=src/main.vue (stackblitz as linked on https://www.telerik.com/kendo-vue-ui/components/dropdowns/multiselect/)

Plamen
Telerik team
 answered on 14 Sep 2021
1 answer
109 views

How do I save the value from this dropdowntree component onChange?:

https://www.telerik.com/kendo-vue-ui/components/dropdowntree-wrapper/

 

With the multiselect and dropdownlist components I can use

e.sender.dataItems();

and 

e.sender.dataItem(e.sender.select());

respectively

 

But for the dropdowntree component there isnt't a dataItem attached to the event sender object.

Plamen
Telerik team
 answered on 20 Oct 2021
11 answers
2.5K+ views

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?

leri
Top achievements
Rank 1
 answered on 28 Oct 2019
3 answers
430 views

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

 

Rahul
Top achievements
Rank 1
 answered on 12 Aug 2019
0 answers
169 views

Hello, 


I'm trying to use <MultiSelect> to v-model a property on an object, however this doesn't work fully as the dropdownlist doesn't pre-select the values, allowing the user to pick the same option twice. 

See:

H2w74h (forked) - StackBlitz

Repro steps:

1: Open dropdownlist, see that 'Baseball' is not pre selected and highlighted in blue
2: Click on 'Baseball' again, Baseball is now selected twice
3: Open dropdownlist again and see that 'Baseball' is selected and highlighted in blue
4: Remove the last 'Baseball' chip (the one on the right).
5: Open dropdownlist again and see that 'Baseball' is not highlighted blue anymore

Vincent
Top achievements
Rank 3
Iron
Iron
Iron
 asked on 16 Jan 2023
0 answers
175 views

Hi i want to ask about search in columns filter grid table multiselect checkbox like in this demo Link

so i want to trigger function and hit API when search data in multiselect checkbox. is there any way to achieve it? i tried following some way from doc but still fail to implement
my code right now :

<GridColumnMenuCheckboxFilter :column="props.column"
           :filterable="props.filterable" :filter="props.filter"
          :unique-data="false" :search-box="true" :expanded="true"
           :data-items="cities" @filterchange="filterCityGrid"
           @expandchange="expandChange" @closemenu="
           () => {
              props.onClosemenu();

           }" />

filterCityGrid(newDescriptor, e) {
            newDescriptor.filters[0].filters.map(
                (filter) =>
                (filter.value = this.cities.find(
                    (el) => el.mem_city_placed_name === filter.value
                ).id)
            )
            this.handleFilterChange(newDescriptor, e);

        },

expandChange() {
            this.$emit('expandchange');
        },
Kenji
Top achievements
Rank 1
Iron
Iron
 asked on 10 Feb 2023
1 answer
15 views
I have a multiselect (jquery wrapper) and I need to query when the multiselect value changes, so I bind with v-on:change, but the new value isn't there in the v-model.  If I select another item the state shows me the previous selection, it's like it's always 1 step behind?
Plamen
Telerik team
 answered on 05 Mar 2024
1 answer
188 views

I want to save the values of multiple checkboxes to a single array like so:

https://codepen.io/ktsn/pen/wXbPLR

However this approach won't work with the kendo checkboxes since they only return a boolean:

https://stackblitz.com/edit/7bgzdd?file=src/main.vue

 

What's the best option here if I want to use multiple kendo checkboxes and save their values to a single array?

Petar
Telerik team
 answered on 20 Aug 2021
1 answer
1.7K+ views

Using kendo UI for VueJs.

In kendo wrapper grid, I am using pagination and  each page contain 10 rows. And also use checkbox to select any row.

If user select some rows on first page and move to another page then selected rows of that page get clear, when navigate to another page.

Expected - user can select some rows of current page and move to any other page and select the some rows on another page.

When user move to any page, selection rows should not get clear. All selected rows persists when user back to current page.

 

 

Ianko
Telerik team
 answered on 14 May 2019
1 answer
1.2K+ views

I have a VueJS app that uses the kendo controls.

Is there a way to use the datepicker or another kendo control to select multiple dates? For example by holding the Ctrl+clicking on each date?

Is there an example?

 

Petar
Telerik team
 answered on 08 Apr 2022
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Grid wrapper
Editor
DatePicker
DropDownTree wrapper
Scheduler
Spreadsheet wrapper
Input
Editor wrapper
MultiSelect
DateInput
NumericTextBox
Scheduler wrapper
Styling / Themes
Calendar
DataSource wrappers (package)
Chart
DateTimePicker
Gantt wrapper
Localization
Pager
Checkbox
Upload
Chart wrappers (package)
DropDownList wrapper
Window
Form
Tooltip
TreeView
ComboBox
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Popup
Slider
Toolbar wrapper
Upload wrapper
Validator wrapper
Error
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
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
Button
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
Iron
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
Iron
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?