Telerik Forums
Kendo UI for Vue Forum
0 answers
1 view
<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>
William
Top achievements
Rank 1
 asked on 24 Jun 2022
1 answer
3 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.
Petar
Telerik team
 answered on 20 Jun 2022
1 answer
7 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
10 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
8 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
12 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
5 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
1 answer
13 views

Hi,

   I used the custom button to change the orientation property of splitter, but the modified page did not change. Is there any way to achieve it?

Petar
Telerik team
 answered on 25 May 2022
1 answer
13 views

I'm trying to make a grid with custom rows by passing a custom vue row component to the :row-render prop like so:


Lsjacl (forked) - StackBlitz

 

However there's a problem when I'm inserting new rows at the top. It seems the row that's newly created re-uses the row data from the row below it instead of the completely blank data a new row starts out with. When I insert a row at the bottom of the list this problem doesn't occur and the values are all completely blank. 


You can reproduce this issue with the following steps:

1: open the stackblitz.

2: click on 'add row to end'.

3: see that there's a newly created row at the bottom of the list. 

4: in the field meta it says the initalValue is null

5: now add a row to the beginning of the list with the 'add row to beginning' button

6: The field meta says it's initialValue is 'Lemon' the same value as the row below it. 


I'm figuring this has something to do with the loop that's generating all rows using generic indexes instead of unique ID's as described in this video:

https://youtu.be/-6fO2qUmf7I?t=412 


Is there a way to fix this so I can insert the row at the beginning of the list and have it start out as a completely fresh vue component?

Petar
Telerik team
 answered on 23 May 2022
1 answer
12 views

Hi,

We are currently developing the Kendo Grid Wrapper Component with Vue3.0 compositon API and typescript  but we have encountered a problem.The problem is  that when I enable some configuations such as editable or groupable will trigger setoptipn method and redraw the grid,it causes the toolbar custom button click event failure.I need to rebind the custom button click event after grid redraw,is there any way to watch grid setoption method execution completion or how to make custom button events not invalid?

Thank you very much and greetings

Petar
Telerik team
 answered on 23 May 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
sun
Top achievements
Rank 2
Iron
Iron
Iron
Alan
Top achievements
Rank 2
Iron
Iron
Paul
Top achievements
Rank 2
Iron
Veteran
Iron
Ohad
Top achievements
Rank 2
Iron
Iron
Iron
arkan
Top achievements
Rank 2
Want to show your ninja superpower to fellow developers?
Top users last month
sun
Top achievements
Rank 2
Iron
Iron
Iron
Alan
Top achievements
Rank 2
Iron
Iron
Paul
Top achievements
Rank 2
Iron
Veteran
Iron
Ohad
Top achievements
Rank 2
Iron
Iron
Iron
arkan
Top achievements
Rank 2
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?