Telerik Forums
Kendo UI for Vue Forum
51 questions
Sort by
1 answer
2.1K+ views

Hi,

 

I have simple two questions. 

 

I'm comparing both Kendo Vue Native components and wrapper components to migrate from Kendo jQuery. 

 

Wrapper components

 

-> If I set :columnMenu="true", I can see a list of menus like sort ascending and it also has 'Columns' menu which shows or hides columns by checking or unchecking check boxes. 

 

However When I implement same components by using native components, the list doesn't show 'Column' menu. 

Can someone tell how to show the column menu???

 

And, if I already have license for jQuery, is it possible to get license for Vue without extra payment?? 

Ivan Danchev
Telerik team
 answered on 30 Apr 2020
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
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
1 answer
258 views

Is there a way to disable just the checkbox in the dropdowntree? I need to be able to select and drill down in each node, but also need some checkboxes to be disabled. So a node could be disabled, but I would still like to drill down and select items inside that node that are enabled.

"myDataSource" has a "isEnabled" property that is set to true or false.

How can I disable just the checkbox in the control below

<dropdowntree
      :data-source="myDataSource"
      tagMode="single"
      :autoClose=false
      :checkboxes-check-children="true"
      :check-all="true"
      dataTextField="text"
      dataValueField="id"
      style="width: 100%;"
      height="auto"
    >
    </dropdowntree>


Plamen
Telerik team
 answered on 24 Jun 2021
2 answers
383 views

We like to use dropdown inside the grid, so we using this (https://www.telerik.com/kendo-vue-ui/components/grid/editing/#toc-setting-custom-editors) example in our project we are getting this error:

 

Uncaught TypeError: $(...).appendTo(...).kendoDropDownList is not a function at VueComponent.categoryDropDownEditor (git.vue?26ca:154)

 

Could anyone help me on this?

Kay4869
Top achievements
Rank 1
 answered on 20 Jun 2019
3 answers
303 views

Hi,
I am having two grid's in my page and I want to scroll to a particular row when the page gets loaded.

Each rows are having unique years and I want to scroll to the current year row once the page is loaded, with the class selector and the year value inside <td> i can identify the row into which I have to scroll.

I have done the similar functionality in another project but there we are using kendo UI for jquery version and https://docs.telerik.com/kendo-ui/knowledge-base/grid-scroll-selected-row link I had followed to achieve the same. As my current requirement is for Kendo UI Grid for Vue , I am looking forward to the correct solution or an approach for achieving the same..

Thank you for your help in advance.
Best regards
Jaydeep

Petar
Telerik team
 answered on 19 Jan 2021
1 answer
216 views

Using Safari 15.0 visit the documentation page for the DropDownList (https://www.telerik.com/kendo-vue-ui/components/dropdowns/).

Try the examples  and you will find that it's not possible to change items in the ComboBox (after the 1st selection).  Also it is not possible to choose an item in the DropDownList.

Have confirmed this behaviour is consistent with behaviour we're experiencing in our application.

Impacts both mobile and desktop Safari versions.

Plamen
Telerik team
 answered on 30 Sep 2021
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
2 answers
741 views

I want to enable/disable a kendo combobox based on the user's selection from a checkbox, which I am storing in a variable.

I already tried setting the variable to the enable property, but this is useful only when the control is being built-in.

Does anybody know If I can do this while creating the control?

<div id="fund" class="col-xs-3"> input class="required" data-bind="title: $parent.selectedFund, kendoComboBox: { placeholder: 'Start typing to search...', value: $parent.test, widget: $parent.searchSource, dataTextField: 'managerName', dataValueField: 'managerId', filter: 'contains', autoBind: false, minLength: 3, enable: overrideGlobalMapping, //this does not work for me even though the variable holds the correct value change: function(){ if(this.value() && this.selectedIndex == -1){ setTimeout(function () {$parent.selectedManagerId(null);}, 100);}}, dataSource: { serverFiltering: true, transport: { read: $parent.retrieveManager }}}" /></div>

Delano
Top achievements
Rank 1
 answered on 08 Feb 2020
0 answers
58 views

Hello,

We are using kendo vue native component Grid.

FilWe do have column filtration. We noticed that when we filter a column with string values from column filter, the search that is being done, is a startsWith. For our business purposes we want to change startsWith to Contains for example. 

Is there a clean way of doing this? Do you have any suggestions or examples?

Thanks

Daniel
Top achievements
Rank 2
Iron
Iron
 asked on 10 Jul 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?