or
0 answers
1 view
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
1 answer
5 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
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
- 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.
Petar
Telerik team
answered
on
20 Jun 2022
1 answer
9 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
12 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
Rank 1
Iron
updated question
on
15 Jun 2022
2 answers
12 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?
id: 'TaskID',
title: 'Subject',
start: ???????,
end: ???????,
},
Best regards gongl
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
14 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
