Questions on 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.

AutoComplete wrapper

Grid wrapper

answered on 12 Jul 2022

0 answers

133 views

Kendo Vue Native localization not working for "pt"

Tried to delete the question, but there's no option for that.

Localization

updated question on 06 Jul 2022

1 answer

107 views

NumericTextBox: Prevent clearing of values when a pasted value contains letters etc.?

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

Paste the value abc123
See that the letters in the input are removed after pasting.
See that the entire value is cleared when you defocus the input.

NumericTextBox

updated question on 04 Jul 2022

1 answer

329 views

Grid - Filter, with composition APi + TypeScript

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

Grid

answered on 04 Jul 2022

1 answer

184 views

Menu Item onClick - How Do I Link to a URL ?

<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>

Menu

answered on 27 Jun 2022

1 answer

148 views

Column template when Native grid is grouped

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!

Grid

answered on 16 Jun 2022

1 answer

150 views

How is the Precision of Numbers handled within the Native Component NumericTextBox input?

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?

NumericTextBox

NumericTextBox wrapper

updated question on 15 Jun 2022

2 answers

130 views

ModelFields with nested json object for scheduler

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

Scheduler

answered on 07 Jun 2022

1 answer

1.6K+ views

Dart SASS deprecating slash for division

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?

General Discussions

Styling / Themes

answered on 27 May 2022

1 answer

244 views

enable scrollable virtual and set grid height cause row be blocked by grouping

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>

Grid wrapper

answered on 27 May 2022