Telerik Forums
Kendo UI for Vue Forum
91 questions
Sort by
8 answers
135 views

There is a tabstip problem in ios 13.3. (iPad)

The tabstrip scroll icon is not clicked.

Click doesn't work so it's impossible to check the contents of the next tab.

Please confirm.

https://www.telerik.com/kendo-vue-ui/components/layout/tabstrip/scrollable-tabs/

Ivan Danchev
Telerik team
 answered on 22 Jan 2020
0 answers
165 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
1 answer
61 views

Hi I'm usiong kendo editor and custom tools.

 

I have succeeded in creating a custom tool and attaching a method, but I wanted to put a fontawsome image in the tool,

 

so I tried following the guide below, but it doesn't work like the attached photo. Ask for help. Thank you.

Guide link :

 

http://dojo.telerik.com/AWUlef/6

 

 

 .k-editor .k-i-my-tool:before
  {
      font-family: FontAwesome;
      content: "\f0c7 ";
      font-size:16px;
  }

 

 

Ivan Danchev
Telerik team
 answered on 03 Dec 2019
1 answer
76 views

I'm experiencing severe clashes when using native packages with the DropDownTree wrapper. I was only using the wrapper packages before and everything was working fine, however now that I added the native grid to the app the wrapper DropDownTree is giving me Uncaught ReferenceError: jQuery is not defined

I remove all non standard code and still it comes out like the CSS is never applied on top of some other broken stuff.

I'm on VueJS 2.7.14

"@progress/kendo-data-query": "^1.6.0",
    "@progress/kendo-drawing": "^1.17.3",
    "@progress/kendo-dropdowntree-vue-wrapper": "^2023.1.117",
    "@progress/kendo-licensing": "^1.3.0",
    "@progress/kendo-svg-icons": "^1.1.1",
    "@progress/kendo-theme-default": "^6.0.3",
    "@progress/kendo-ui": "^2023.1.117",
    "@progress/kendo-vue-animation": "^3.8.1",
    "@progress/kendo-vue-data-tools": "^3.8.1",
    "@progress/kendo-vue-dateinputs": "^3.8.1",
    "@progress/kendo-vue-dropdowns": "^3.8.1",
    "@progress/kendo-vue-excel-export": "^3.8.1",
    "@progress/kendo-vue-grid": "^3.8.1",
    "@progress/kendo-vue-indicators": "^3.8.1",
    "@progress/kendo-vue-inputs": "^3.8.1",
    "@progress/kendo-vue-intl": "^3.8.1",
    "@progress/kendo-vue-popup": "^2.7.3"

I used these packages before and everything was fine:  

    "@progress/kendo-dropdowntree-vue-wrapper": "^2021.3.1207",
    "@progress/kendo-licensing": "^1.2.1",
    "@progress/kendo-theme-default": "^4.43.0",
    "@progress/kendo-ui": "^2021.3.1207"

If anyone could tell me how to use the css file from @progress/kendo-theme-default": "^4.43.0" inside a component I think that would solve my problem.

Vincent
Top achievements
Rank 1
Iron
 updated answer on 24 Jan 2023
1 answer
180 views

Hi. The documentation (https://www.telerik.com/kendo-vue-ui/components/grid/custom-rendering/custom-headers/) shows how to make custom headers, but there is no example of a custom header with functional sorted colums (like the first grid on this page -> https://www.telerik.com/kendo-vue-ui/components/grid/sorting/ ).

I want to have a custom header template and I also want to click on it to sort the column. I actually managed to do that, but the arrows are missing. Here's a code sample:

<template #headerTemplate="{props}">
   <span @click="headerTemplateClickHandler(props)">{{ props.title }}</span>
</template>

headerTemplateClickHandler(props){
      const existentRuleIndex = this.sort.findIndex(rule => rule.field === props.field);
      if (existentRuleIndex >= 0) {
        this.sort[existentRuleIndex ].dir =
          this.sort[existentRuleIndex ].dir === "desc" ? "asc" : "desc";
      } else{
        this.sort.push({
          dir: 'desc',
          field: props.field
        })
      }
      props.sortchange({
         sort: this.sort
      });
    }

With this code I managed to sort the column, but the arrow indicators do not show up in the header.

Petar
Telerik team
 answered on 21 Apr 2022
1 answer
93 views

Hello,

In current implementation of the our web application - we use Kendo UI for jQuery. We decided to implement new pages inside our application using Kendo UI for VueJs. In current implementation we have a lot of grids with filters (filter icon + filter popup) in the column header (similar to https://demos.telerik.com/kendo-ui/grid/filter-menu-customization). But we can't find any examples of such implementation for native Kendo Vue Grid.

Is it possible? We need to have consistent behavior of grid filters and user experience all over our application for jQuery and VueJs implementation.

Thank you in advance

Petar
Telerik team
 answered on 27 Oct 2020
2 answers
92 views

I want to add a tab on the tabstrip in the Spreadsheet component. I have done so by adding this line of code to the toolbar attribute 

<spreadsheet ref="spreadsheet"
:toolbar="toolbar"

Where toolbar is a value in data that looks like 

toolbar = {
'custom': [
// for all available options, see the toolbar items configuration
// https://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar/configuration/items
{
type: "button",
text: "Save",
showText: "both",
icon: "k-icon k-i-save",
click: function() {
      // Some code
}
},

However, this new tab shows up with the name 'undefined', next to the other tabs. Is there some way to give it a proper name? 

Braulio
Top achievements
Rank 1
 answered on 23 Apr 2020
1 answer
89 views
Is it possible to make rows sticky similar to the locked option we have for columns?
Petar
Telerik team
 answered on 13 May 2022
1 answer
104 views
How do you configure the editor tool for foreColor and backColor to display color picker? Just as in this edit control?
Vessy
Telerik team
 answered on 15 Aug 2023
5 answers
70 views

Hello,
We use kendo for Vue and tried implementing a DateInput element in our Vue app.


When we try to use this element on a smartphone, we hoped it will use the OS date input, just like it works with any <input> element of type “date”. But we found it is rendered as type “text”.


This means the UX is not as good as we hoped it will be.
Is there a way to render it as <input> of type “date” so it will behave accordingly?

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

 

Thanks,

Ron.

Petar
Telerik team
 answered on 12 Nov 2020
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?