Telerik Forums
Kendo UI for Vue Forum
1 answer
160 views
Hello,
I have been using kendo for Vue for a while now.  The site has be up and running for over a year.  Yesterday people starting complaining that the page was not loading.  When I look at the network traffic it shows that the CDN file are in a pending state.  Can you tell me why this is happening?

Here is a screen shot of the network traffic.  If you scroll to the right you will see they are all in the state of pending.
Petar
Telerik team
 answered on 12 Jul 2022
0 answers
133 views
Tried to delete the question, but there's no option for that.
ANTONIO
Top achievements
Rank 1
Iron
Iron
 updated question on 06 Jul 2022
1 answer
107 views

When pasting a value that contains letters and numbers, the Native NumericTextBox removes the letters but then clears the entire value when you defocus the input. In this Stackblitz project you can see this behavior. The problem occurs with or without decimals or different formats.

Proposed solution
When the NumicTextBox removes the letters keep the value on defocus when it only contains numbers.

Steps to reproduce

  1. Paste the value abc123
  2. See that the letters in the input are removed after pasting.
  3. See that the entire value is cleared when you defocus the input.
Wesley
Top achievements
Rank 1
Iron
 updated question on 04 Jul 2022
1 answer
329 views

Hello, 

I want to integrate the Kendo UI Grid to my project (composition api + TypeScript).

In specific I need help to undertand al least one integration feature in the grid, the filtering

I readed this documentation: https://www.telerik.com/kendo-vue-ui/components/grid/filtering/

I make the corresponding settings on my code but the filtering doesn't work.

So, do you have an example or better documenattion to undertand the integration, but using Composition API + TypeScript

Thanks in advance

 

 

 

 

Petar
Telerik team
 answered on 04 Jul 2022
1 answer
183 views
<template>
  <div class = "headLine">
   <h1> pB Now </h1>
   <k-menu :items = "items" />
   
  </div>
</template>
<!-------------------------------------------------------------------->
<script lang="ts">
import { defineComponent } from 'vue';
import { Menu } from '@progress/kendo-vue-layout';
export default defineComponent({
  components: {
                'k-menu'          : Menu
  },
data: function() {
    return {
      items: [
                { text: "IT",
                  items: [
                            { text: "Network" },
                            { text: "Telephone",
                              items: [
                                      { text: "Extensions" },
                                      { text: "WirePorts"  }
                                    ],
                            },
                         ],
                },
                { text: "project mgt",
                  items: [
                            { text: "action items" },
                         ],
                },
                { text: "x",
                },
            ]
    }
  },
  name: 'HelloWorld',
  props: {
    msg: String,
  },
});
</script>
Petar
Telerik team
 answered on 27 Jun 2022
1 answer
147 views

Hi

I'm struggeling to find a working solution for the following problem, I need to be able to define custom templates for specific columns in the Native Grid when the grid is grouped. Somehing like the solution when the grid is not grouped using the "cell" property of GridColumnProps. I'm currently changing all wrapper components to native ones in my project, in the wrapper grid component we could just add a template property to the column definition and then return a string or function.

I need some help on how I should approach this for the Native grid. I tried the solution as stated in the docs using a named slot and the cell render prop of the grid but this renders a template for every cell and I need to be able to use a custom template for each column that requires one. But I can't seem to solve this issue completely using this approach.

Any help is appreciated,

thanks in advance!

Petar
Telerik team
 answered on 16 Jun 2022
1 answer
149 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
2 answers
130 views

Hi,
i have an nested (start_end) json array for the scheduler. The structure of the json array looks like that:
[{
          TaskID: 0,
          Subject: 'Breakfast with Tom',
          start_end: [{
            start: new Date('2019-08-10T05:30:00.000Z'),
            end: new Date('2019-08-10T06:00:00.000Z')
          }]
        }]

How can i map with the ModelFields to get correct json data for the scheduler?

 modelFields: {
        id: 'TaskID',
        title: 'Subject',
        start: ???????,
        end:  ???????,
      },

Best regards gongl

Thomas
Top achievements
Rank 1
Iron
 answered on 07 Jun 2022
1 answer
1.6K+ views

I'm getting a handful of these errors and it causes issues with automated testing/build pipelines. 

Example:

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($drop-hint-arrow-size, 2) or calc($drop-hint-arrow-size / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

I could fix them easily, but I'd rather leave the NPM packages as we received them. Are there plans to update the SCSS files for Kendo UI Vue to support the latest library expectations?

Dimitar
Telerik team
 answered on 27 May 2022
1 answer
243 views

Hi,

I am using Kendo Grid Wrapper Component with Vue3.0 compositon API and typescript  but we have encountered a problem.The problem is  that when I enable scrollable virtual and set the grid height,I drag the column header cells by grouping on the grid,it causes the grid row be blocked when the grid scroll to the bottom.

Thank you very much and greetings


<body>
  <div style="height:200px;">
    <div id="grid"></div>
  </div>
<script>
$("#grid").kendoGrid({
  height:'200px',
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" },
    { productName: "Ham", category: "Food" },
    { productName: "Bread", category: "Food" }
  ],
  scrollable:{
    virtual:true
  },
  groupable: {
    enabled: true
  }
});
</script>
</body>

Petar
Telerik team
 answered on 27 May 2022
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
DatePicker
Editor
Grid wrapper
Scheduler
DropDownTree wrapper
Spreadsheet wrapper
Input
MultiSelect
Calendar
NumericTextBox
DateInput
DateTimePicker
Editor wrapper
DataSource wrappers (package)
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
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?