Telerik Forums
Kendo UI for Vue Forum
41 questions
Sort by
1 answer
62 views

For the NumericTextBox Wrapper Component there is the following page which allows the setting and restriction of decimals within the NumericTextBox input.

For the NumericTextBox Native Component I can only find the Formats page which doesn't tell anything about the Precision of Numbers as for the Wrapper Component.

Can I only use the format prop for this by using a custom format (generated based on different regex'es) or is the old functionality related to the decimals and restrictDecimals props also available for the Native Component?

If not, how can I dynamically set or restrict the amount of numbers and decimals within the Native Component?

 
Wesley
Top achievements
Rank 1
Iron
 updated question on 15 Jun 2022
1 answer
44 views
there is a way that the NumericTextBox control is not numeric since I need it of type string.
Nikolay
Telerik team
 answered on 03 Sep 2019
1 answer
324 views

When a user enters trailing zeros I want the Numeric Textbox to keep them.

 

Here's an example of what I mean:

https://stackblitz.com/edit/kb6qcu?file=src/main.vue

Enter 17.00001, it keeps the decimals correct

Enter 17.00000, it removes all trailing zeros

Is it possible to configure the NumericTextbox to keep trailing zeros when the user explicitly enters them?

Petar
Telerik team
 answered on 01 Nov 2021
7 answers
361 views

Hi All,

I'm testing the Kendo UI Vue-wrappers and notice an issue with the masked text box. When just loading the page, the input looks fine. But after entering data and exiting the field, the borders go away. First I thought I was doing something wrong, but then I noticed that example page does the same thing:

https://www.telerik.com/kendo-vue-ui/components/inputs/maskedtextbox/

This behavior, does not exists, for example, in the Angular version:

https://www.telerik.com/kendo-angular-ui/components/inputs/maskedtextbox/

is this a bug and if so, where can I report it?

 

Thanks!

 

 

Neli
Telerik team
 answered on 17 Oct 2018
1 answer
174 views

I am experimenting with integrating the Kendo UI for VUE components into our application to see if we can use this library within our company.

As a test I used the NumericTextBox input. This works fine until I change to another culture, nl-BE in my case. This culture uses a comma as the decimal separator instead of a dot.

When I focus the field and enter a number with 2 decimals (e.g. 100,25), then the decimal numbers are removed when I move focus out of the input. Seems like the formatting logic is dropping them. If I try a second them it will accept them, but behaviour is miss and fire. It might go wrong on another attempt.

I forked the NumericTextBox input demo to demonstrate the issue:

https://stackblitz.com/edit/6r5ytn

If I manually modify the numberFormat settings in the kendo.culture.nl-BE.js file and set to the English version it works fine.

Tested on Chrome, FireFox and Safari. 

 

Dimitar
Telerik team
 answered on 11 Apr 2019
0 answers
21 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
27 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
1 answer
60 views

Currently I have a website that runs Kendo for jQuery which uses multiple cultures in the old Wrapper Components way. I want to re-use these files to change the culture of the new Kendo Native Components. Is that possible? If not, how can I do this with the new culture implementation.

Below I have added a Stackblitz with jQuery culture and Native Components which isn't working atm.

https://stackblitz.com/edit/nlfavc?file=src/main.vue

Wesley
Top achievements
Rank 1
Iron
 updated question on 18 May 2022
0 answers
96 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
9 answers
615 views
How to define an custom grid edit template?
Petar
Telerik team
 answered on 08 Oct 2020
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Grid wrapper
DropDownTree wrapper
DatePicker
Spreadsheet wrapper
Editor wrapper
Input
NumericTextBox
Editor
DataSource wrappers (package)
DateInput
MultiSelect
Scheduler wrapper
Styling / Themes
DateTimePicker
Gantt wrapper
Pager
Checkbox
Upload
Scheduler
Calendar
DropDownList wrapper
Localization
Window
Tooltip
Chart wrappers (package)
Dialog
NumericTextBox wrapper
Popup
Toolbar wrapper
Upload wrapper
Validator wrapper
Chart
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Slider
Splitter wrapper
TabStrip wrapper
TreeView wrapper
TabStrip
Error
FloatingLabel
Form
TextArea
Stepper
Splitter
PanelBar
TreeView
Notification
Menu
TreeList
Toolbar
Animation
Barcode wrapper
ButtonGroup wrapper
Chat wrapper
ColorPicker wrapper
ComboBox wrapper
DateInput wrappers (package)
Diagram wrapper
Dialog wrapper
Gauges wrappers (package)
MaskedTextBox wrapper
MediaPlayer wrapper
MultiSelect wrapper
Notification wrapper
Pager wrapper
PanelBar wrapper
PivotGrid wrapper
QRCode wrapper
RangeSlider wrapper
ScrollView wrapper
Security
Slider wrapper
Switch wrapper
TimePicker
Tooltip wrapper
TreeList wrapper
TreeMap wrapper
Window wrapper
Card
Avatar
StockChart
Sparkline
RadioButton
RadioGroup
Hint
Drawer
Loader
ProgressBar
DateRangePicker
Switch
Gauge
Wizard
Skeleton
ScrollView
RangeSlider
ColorGradient
ColorPicker
ColorPalette
FlatColorPicker
Button
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
ListView
Signature
ChunkProgressBar
FontIcon
SVGIcon
+? more
Top users last month
Bernd
Top achievements
Rank 5
Bronze
Bronze
Iron
kva
Top achievements
Rank 2
Iron
Iron
Iron
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
Mark
Top achievements
Rank 3
Iron
Iron
Iron
Ruchika
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Bernd
Top achievements
Rank 5
Bronze
Bronze
Iron
kva
Top achievements
Rank 2
Iron
Iron
Iron
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
Mark
Top achievements
Rank 3
Iron
Iron
Iron
Ruchika
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?