Telerik Forums
Kendo UI for Vue Forum
16 questions
Sort by
1 answer
80 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
0 answers
114 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
3 answers
407 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
135 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
11 answers
2.4K+ 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
1 answer
167 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.1K+ 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
5 answers
282 views

Hello
We are developing a module whereby what is selected on one grid filters a second grid. As part of this we need to enable multi-select on the master grid. 

I have two separate scripts for getting the data item of the selected grids, but both seem a little slow, ~1 sec to ~3 secs.

The scripts we are testing are:

onChange: function(ev) {
      var that = this;
      var selected = $.map(ev.sender.select(), function(item) {
        var tr = $(item).closest('tr');
        var grid = that.$refs.itemsGrid.kendoWidget();
        var data = grid.dataItem(tr);
        return data.itemNumber;
      });
      this.$root.$emit('item-grid-selected',selected);
    },
change: function(e) {
    var selectedRows = e.sender.select();
    var selectedDataItems = [];
    for (var i = 0; i < selectedRows.length; i++) {
      var dataItem = e.sender.dataItem(selectedRows[i]);
      selectedDataItems.push(dataItem.name);
    }
    console.log(selectedDataItems);// contains all selected data items
    this.$root.$emit('item-grid-selected',selectedDataItems);
  },

 

with the grid code of:

<kendo-grid ref="itemsGrid"
                  :data-source="items"
                  v-on:databound="autoFitColumns"
                  :sortable-mode="'single'"
                  :sortable-allow-unsort="true"
                  :groupable="true"
                  :pageable="false"
                  :page-size="20"
                  :pageable-page-size="10"
                  :pageable-always-visible="false"
                  :filterable-mode="'row'"
                  :selectable="'multiple'"
                  :toolbar="[]"
                  :editable="false"
                  :server-paging="false"
                  :column-menu="true"
                  :scrollable-horizontal="true"
                  v-on:change="change"
                  v-on:save="grid_save"
    </kendo-grid>

Without any event raised on the change event of the grid, the selection following a click of any rows in the grid is seemingly instant. Just for info, there are only three rows in this table, so it is not because there is a lot to go through.

 

Can you make any suggestions for speeding this up?

Regards
John

Ianko
Telerik team
 answered on 15 Nov 2018
0 answers
60 views
hi i want to ask about wrapper and naative component. is that possible to combine wrapper and native component in 1 feature? for example im using grid table from native component and filter columnMenu checkbox from wrapper component. i already try it but still not working until now
appreciate your help. thanks
Kenji
Top achievements
Rank 1
Iron
Iron
 asked on 06 Jan 2023
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Grid wrapper
DropDownTree wrapper
DatePicker
Spreadsheet wrapper
Scheduler
Editor
Editor wrapper
Input
DateInput
MultiSelect
NumericTextBox
Scheduler wrapper
DataSource wrappers (package)
Styling / Themes
Calendar
DateTimePicker
Gantt wrapper
Localization
Pager
Chart
Checkbox
Upload
Chart wrappers (package)
DropDownList wrapper
Window
Form
Tooltip
TreeView
ComboBox
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Popup
Toolbar wrapper
Upload wrapper
Validator wrapper
Error
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox wrapper
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Slider
Splitter wrapper
TabStrip wrapper
TimePicker
TreeView wrapper
TabStrip
Card
FloatingLabel
TextArea
Drawer
Stepper
Gauge
Splitter
PanelBar
Notification
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
RangeSlider
ColorGradient
ColorPicker
ColorPalette
FlatColorPicker
Button
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?