Telerik Forums
Kendo UI for Vue Forum
1 answer
82 views

The styling for DropdownList with fillmode="outline" appearance option set appears to be broken:

Vue Dropdowns Library & DropDownList Component - Appearance - Kendo UI for Vue Docs & Demos (telerik.com)

When hovering over the dropdown the colors are inverted, showing a black dropdownlist button background and white text
I expected this would be a slightly grey background with black text when hovering over the dropdownlist. 

Petar
Telerik team
 answered on 20 Mar 2023
1 answer
162 views
I'm trying to use the Kendo Dropdownlist wrapper (I need the grouping functionality) and the Kendo datasource. 

However when I change the data prop of the KendoDatasource, the changes aren't immediately reflected in the Kendo Dropdownlist.

Repro:
D1kq29 (forked) - StackBlitz 
Steps:
1: Open dropdown, see 2 dropdown items
2: click on 'turn filter on'
3: See that the datasource now only has 1 item
4: open the dropdown, see 2 dropdown items <- not expected
5: click on 'turn filter on' again
6: open dropdown, see 1 dropdown item, despite datasource now actually having 2 items
Vincent
Top achievements
Rank 3
Iron
Iron
Iron
 answered on 10 Mar 2023
1 answer
175 views

I can't export my grid to Pdf. On console, this error shows up:

TypeError: allVue.extend is not a function
    at KendoDrawingAdapter.convertPageTemplateToHtml (KendoDrawingAdapter.js?cc56:50:1)
    at eval (core.js?4739:362:1)
    at eval (core.js?4739:466:1)
    at Array.forEach (<anonymous>)
    at doPageBreak (core.js?4739:465:1)
    at next (core.js?4739:1168:1)
    at whenImagesAreActuallyLoaded (core.js?4739:1164:1)
    at handlePageBreaks (core.js?4739:450:1)
    at eval (core.js?4739:308:1)
    at next (core.js?4739:1168:1)

Trying to replicate the issue, I forked this working example from kendo website (https://www.telerik.com/kendo-vue-ui/components/grid/pdf/) into StackBlitz and just changed the Vue package version to the latest v2 (https://stackblitz.com/edit/twqkkz?file=src%2Fmain.vue,package.json).

By just doing that the page has broken with the following error:

TypeError: (0 , vue_1.createTextVNode) is not a function
    at templateFn (main.vue:7:60)
    at Object.eval (main.vue:144:1)
    at eval (main.vue:170:4)
    at eval (main.vue:171:3)
    at eval (<anonymous>)
    at Qt (webcontainer.4131d213adf6116ed795350ac232389585e09527.js:15:30145)
    at webcontainer.4131d213adf6116ed795350ac232389585e09527.js:15:38799
    at U (webcontainer.4131d213adf6116ed795350ac232389585e09527.js:15:13565)
    at webcontainer.4131d213adf6116ed795350ac232389585e09527.js:15:13207
    at Object.eval (main.js:7:36)

So I'm not sure about what is happening, but it seems to be an incompatibility issue with Vue 2.

Plamen
Telerik team
 answered on 02 Mar 2023
0 answers
88 views

Is there an example of how to override the user experience in the Hyperlink tool?  I would like to be able to set the cursor on an existing hyperlink, click the Hyperlink tool and change the display text on the hyperlink.  This change would also include adding a "Display Text" form field on the hyperlink tool dialog view.

Thank you for your help.

Don
Top achievements
Rank 1
 asked on 22 Feb 2023
0 answers
208 views

I'm trying to get a tooltip to show when hovering a cell when the characters inside the cell are more than 12 characters.

    <template v-slot:reservationNameTemplate="{ props }">
        <td :style="truncateDescriptionText(props.dataItem)">
          {{ props.dataItem[props.field] }}
        </td>
    </template>

This is working fine to truncate the text inside the cell, however when I try to warp it with the Tooltip like this the truncate stops working and I get no tooltip on hover

      <template v-slot:reservationNameTemplate="{ props }">
        <Tooltip :anchor-element="'target'" :position="'bottom'">
          <td>
            {{ props.dataItem[props.field] }}
          </td>
        </Tooltip>
        <td :style="truncateDescriptionText(props.dataItem)">
          {{ props.dataItem[props.field] }}
        </td>
      </template>

Thank you.

Vincent
Top achievements
Rank 1
Iron
 asked on 17 Feb 2023
0 answers
92 views

I am using kendo native calender for my project. I want to show months in the calendar. wapper has prop called "showviewheader" but this not working kendo native calender.

<template>
  <div id="vueapp" class="vue-app">
    <div class="example-config">
      Number of rendered views: &nbsp;
      <numerictextbox
        :style="{ width: '230px' }"
        :min="1"
        :max="10"
        @change="handleInputChange"
        :value="views"
      >
      </numerictextbox>
    </div>
    <calendar :views="views" />
  </div>

lakmi
Top achievements
Rank 1
 asked on 16 Feb 2023
0 answers
100 views

I am using kendo native calender for my project. I want to show months in calendar.


<template>
  <div id="vueapp" class="vue-app">
    <div class="example-config">
      Number of rendered views: &nbsp;
      <numerictextbox
        :style="{ width: '230px' }"
        :min="1"
        :max="10"
        @change="handleInputChange"
        :value="views"
      >
      </numerictextbox>
    </div>
    <calendar :views="views" />
  </div>
</template>

lakmi
Top achievements
Rank 1
 asked on 16 Feb 2023
0 answers
116 views

Hi,

Here is the example.

https://stackblitz.com/edit/tobv8y?file=src%2Fmain.vue

The column "ProductID" is locked.

When I export PDF, this column doesn't show on PDF file. (As pic)

 

 

How can I export PDF with locked column?
Thank you!

 

Dev
Top achievements
Rank 1
Iron
Iron
 asked on 15 Feb 2023
0 answers
357 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
0 answers
261 views

Hi i want to ask about currency format number like in this demo Link

so i already implement currency format in input kendo ui component but still fail to remove currency symbol
is there any reference from doc? and also where is the list of locales code for currency format?

here is my setup code for currency format

import { provideIntlService } from "@progress/kendo-vue-intl";
<KInput
  type="text"
  v-model="formattedNumber"
  placeholder="Input Salary Amount"
  @blur="saveResumeAI('draft')"
>
</KInput>
computed: {
        formattedNumber: function(){
            return provideIntlService(this).formatNumber(current_salary_value, "c")
        }

    },

"@progress/kendo-vue-intl": "^3.7.1",

Kenji
Top achievements
Rank 1
Iron
Iron
 asked on 07 Feb 2023
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
DatePicker
Editor
Grid wrapper
Scheduler
DropDownTree wrapper
Spreadsheet wrapper
Input
MultiSelect
Calendar
NumericTextBox
Editor wrapper
DataSource wrappers (package)
DateInput
DateTimePicker
Scheduler wrapper
Styling / Themes
Chart wrappers (package)
Gantt wrapper
Localization
Chart
Checkbox
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
RadioButton
FloatingLabel
TextArea
Drawer
Stepper
DateRangePicker
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
RadioGroup
Hint
Loader
ProgressBar
Switch
Wizard
Skeleton
ScrollView
ColorGradient
ColorPalette
FlatColorPicker
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?