Questions on Kendo UI for Vue Forum

1 answer

320 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

161 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

142 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

139 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

124 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.5K+ 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

231 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

1 answer

106 views

Use the custom button to modify the value of orientation

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?

Splitter wrapper

answered on 25 May 2022

1 answer

176 views

Grid with :row-render="CustomRow" doesn't update correctly

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?

Grid

answered on 23 May 2022

1 answer

159 views

How to watch grid setoption method execution completion in vue

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

Grid wrapper

answered on 23 May 2022