Telerik Forums
Kendo UI for Vue Forum
100 questions
Sort by
1 answer
768 views

I try to use v-bind:steps="{ hour: 1, minute: 15 }" but turns out it doesn't have any effect.

I would like to make sure if it is not supported or I have misconfigured.

 

Thanks!

Petar
Telerik team
 answered on 03 Jun 2021
1 answer
212 views

https://codesandbox.io/s/216z33wvjr

this is the link that show the reason of i am asking this question, seem like Vue kendo not have the function of remove and add the tab, i m using jquery and use it to add and remove the tab. Add the tab is easy but when i need to remove the tab, the fuction that i defined on the "x" seem like cannot fire the "remove" function i had create in the method of vue, seem like it was not found the method.

Veselin Tsvetanov
Telerik team
 answered on 05 Dec 2018
2 answers
770 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
1 answer
593 views

Hello everyone!

I am trying to implement a search field component based on kendo-combobox wrapper.

I want to cover via JEST unit tests the changed value but I can not trigger the change event and assert the component value.

I am sharing with you guys this code example : https://codesandbox.io/s/tender-proskuriakova-89bcm?fontsize=14&hidenavigation=1&theme=dark

Can you help me on this assertion : expect(wrapper.vm.$data.value).toEqual(1);

Martin
Telerik team
 answered on 19 Feb 2020
1 answer
433 views
I am working with the wrapping grid and I saw the need to add html elements in the header of my grid, in this case I would like to add a button and a drop-down to select the columns to be displayed, I know that the grid has the option of add edit buttons, add etc. although I need to add a button for a different task. I would like to know if it is possible to do this, I leave an example of what I want to do. THANKS
Ivan Danchev
Telerik team
 answered on 07 Jan 2020
1 answer
227 views

I'm trying to add a custom class name to the DropDownList popup div like so:

Qtavuz (forked) - StackBlitz

 

But the custom class name isn't applied, while the custom width is. Is there a way to make this work?

Petar
Telerik team
 answered on 16 May 2022
6 answers
306 views

I have started using the new Vue Native DropDownList and found a few issues when it is used inside a popup (bootstrap-vue modal).

 

The dropdown list will not display. I can make it display by adding:

.k-animation-container {
    z-index: 100000;
}

 

Now it displays but clicking out side the dropped down list will not close it.

 

Wayne

 

Wayne Hiller
Top achievements
Rank 1
Veteran
Iron
 answered on 13 Feb 2020
1 answer
57 views

Hi, 

I am trying to change the days of the week that appears at the top of the calendar in the Month view like "Monday, Tuesday" etc... . What I want is that when the screen becomes to small it will change to Mon, Tues, and so on.

As for the Week and WorkWeek Views I want to wrap the text at the top so show Mon on top and the date below when the screen gets smaller.

If there is a way to manipulate this area I would appreciate the help.

 

Thank you.

Filip
Telerik team
 answered on 06 Oct 2023
5 answers
308 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
140 views
I am trying to implement virtualization in a dropdown list using Vue.js and Kendo-UI. I have successfully implemented virtualization but I am havign trouble understanding the importance of `ValueMapper`. What this means is that Dropdown options are correctly loading in the DropdownList when the user scrolls down, but the problem occurs when the user makes any selection in the Dropdown list.

When the user selects any value from the dropdown list, I see this error in the console: 

> ValueMapper is not provided while the value is being set

I've read the docs and come to a conclusion that implementing a value mapper is only required when the dropdown option needs to be pre-fetched (See https://www.telerik.com/forums/need-help-understanding-virtualization-paging#C3qyuxTFGUSIRVeSxQZgog for detailed explanation).

But I am getting the above entioned error even when I select a dropdown option that has already been loaded. There must be something that I haven't understood about `valuemappers`.

Also, I am using dapper ORM in the backend which doesn't support `IQueryable` and therefor I've writed custom SQL to get paged data.

Here's my vue code:

    <template>
      <div v-show="visibility=='true'">
        <label v-html="label">{{label}}</label>
    
        <kendo-datasource
          ref="remoteDatasource"
          :transport-read-url="getRequestUrl"
          transport-read-type="GET"
          transport-read-data-type="JSON"
          page-size="20"
          schema-data="Data"
          schema-total="Total"
          server-paging="true"
        ></kendo-datasource>
    
        <kendo-dropdownlist
          ref="dropdownlist"
          v-model="cntrlValue"
          height="130"
          virtual-item-height="26"
          :virtual-value-mapper="valueMapper"
          data-source-ref="remoteDatasource"
          data-text-field="dropdownText"
          data-value-field="dropdownValue"
          option-label="Select here..."
          @close="onSelect"
        ></kendo-dropdownlist>
      </div>
    </template>
    
    <script scoped>
    import service from "somepath";
    export default {
      name: "FormGroupSelect",
      props: {
        id: {
          default: "kendo-Dropdown",
          type: String
        },
        name: {
          type: String
        },
        label: String,
        visibility: String,
        dropdownKey: String
      },
      data() {
        return {
          cntrlValue: this.value
        };
      },
      watch: {
        value: function(newVal) {
          this.cntrlValue = newVal;
        }
      },
      methods: {
        onSelect: function() {
          this.$emit("Select", this.cntrlValue);
        },
        getRequestUrl: function() {
          return service.getDropdownOptionsRequestUrl(this.dropdownKey);
        }
      }
    };
    </script>

So, Should I implement value mapper even when I don't want to allow my user to select a value that hasn't been loaded in the dropdown yet? And if so, what is the best way to implement it without putting burden on the server by reading all the possbile values and then searching for the indices (because that's how it's done in the docs example).

Plamen
Telerik team
 answered on 23 Jan 2019
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Grid wrapper
DatePicker
DropDownTree wrapper
Editor
Spreadsheet wrapper
Scheduler
Input
Editor wrapper
MultiSelect
DateInput
NumericTextBox
Scheduler wrapper
Styling / Themes
Calendar
DataSource wrappers (package)
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
ColorPicker
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
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
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
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?