Questions on Kendo UI for Vue Forum

1 answer

415 views

Customize / remove tooltip on Grid Column Menu

I want to know how could I customize the default tooltip shown by the column menu (https://stackblitz.com/run/?file=src/main.vue):

On this example, instead of the "ProductName Column Menu" tooltip text, I'd like to display some other user friendly text, or just have this tooltip removed. Is it possible?

Grid

answered on 15 Apr 2022

1 answer

270 views

Kendo Vue ContextMenu with Vue 3 and typescript

Hi, I am just getting started with using the Kendo Vue components and am trying to implement a context menu. My application is using Vuejs 3 with typescript.

I have a version working with ContextMenu from the @progress/kendo-layout-vue-wrapper package. However, with this, I can't seem to access anything from an event handler argument. Example: function onMenuSelect(e) - I can't seem to access anything about e in my typescript/javascript.

In searching around for typescript types for this, I notice that there is a native kendo vue menu which requires Menu from @progress/kendo-vue-layout and Popup from @progress/kendo-vue-popup. Should I be using this instead? And with this, are there any examples for how to open the menu from rows in a table? I need my context menu to be dynamic based on which table row is triggering it.

I hope some of this question makes sense - I am totally new to using this. Thanks!

ContextMenu wrapper

answered on 06 Apr 2022

4 answers

87 views

How to hide filter window for custom filter template?

Hi

I have a custom filter template for a column and it works fine. I would like to hide the filter window as soon as the user clicks the custom "Filter" or "Reset" button. The window automatically hides when we click anywhere else.

How can I close the window grammatically?

Grid

answered on 18 Dec 2019

0 answers

123 views

Change title for Filters

Hi I have a grid using: https://www.telerik.com/kendo-vue-ui/components/grid/filtering/filter-menu/

I have several filters by columns, how can I change the title?

In the image you can see my grid, for example in the first filter I need the title to be different from the second, how is this possible?

Grid

asked on 17 Oct 2022

1 answer

68 views

Filters in Native Grid header

Hello,

In current implementation of the our web application - we use Kendo UI for jQuery. We decided to implement new pages inside our application using Kendo UI for VueJs. In current implementation we have a lot of grids with filters (filter icon + filter popup) in the column header (similar to https://demos.telerik.com/kendo-ui/grid/filter-menu-customization). But we can't find any examples of such implementation for native Kendo Vue Grid.

Is it possible? We need to have consistent behavior of grid filters and user experience all over our application for jQuery and VueJs implementation.

Thank you in advance

Grid

answered on 27 Oct 2020

1 answer

72 views

Customizing Grid Wrapper Filter Operator Behavior

I have some grids that have a date/time column. The default equality operators for the filter match both the date and time. I am trying to customize the equality operator (or add a new operator) that ignores the time and only compares the date. Using a custom operator works the first time I select the operator. When I go back to the filter menu after setting it the first time, the dropdown has no operator selected and I changing the value again doesn't work until after I select equals again.

How can I have the equals operator remain selected or add a new operator?

If this isn't supported, are there any other ways I can accomplish the same thing? I want to display both the date and time, but have equals only filter on the date.

Here is some example code: https://stackblitz.com/edit/custom-filter-only?file=src/main.vue

Grid wrapper

answered on 30 Jun 2021

9 answers

245 views

Kendo UI for Vue with Visual Studio and MVC application, but NOT using webpack

We currenly have an MVC application using Kendo UI and we recently started using Vue.

There is no clear documentation how to add and use the Kendo UI for Vue within Visual Studio and an MVC application.

All official documentation on the Telerik web site, related to the Kendo UI for Vue is using NPM to install Kendo UI for Vue components in a specified folder, or CDNs.

Unfortunately, there are no clear examples how to use those components within the structure of an MVC application.

To make matter worse, Telerik did not provide a way to create a Kendo UI for Vue application from within the Telerik menu in Visual Studio.

The questions are:

1. What JS/CSS files are needed to show and use these components?

2. Where can I find/download all these files?

3. What is the recommended structure to keep these files in?

4. What needs to be "imported" using <Style> and <link> tags, NOT the "import" and "required" and "export", because these are using webpack, which will add a sh...load of other files with it that are not required by the app to actually run.

If anybody managed to make it work, please specify step by step what to do to use any of the Kendo UI for Vue components in an MVC app.

answered on 19 Sep 2018

6 answers

459 views

native grid grouping not working

Hi,

I have the native grid set up in my vue application with Vuex and having issue getting the grouping feature to work.

I am not getting a response whenever I drag a column to the column header. The dragged column just not stay in the column header, it disappears afterward.

It seems my grid isn't emitting the onDataStateChange method. Not sure what I have done wrong.

Other gird features are working fine.

<template>

<v-card shaped>

<v-card-title>

<h3>

Product

</h3>

</v-card-title>

<v-card-text>

<Grid

:style="{height: '800px'}"

:data-items="gridDataResult"

:filterable="true"

:filter="filter"

:groupable="true"

:group="group"

:pageable="pageable"

:reorderable="true"

:resizable="true"

:sortable="true"

:sort="sort"

:skip="skip"

:take="take"

:total="total"

:expand-field="'expanded'"

:columns="columns"

:column-menu="columnMenu"

@pagechange="pageChangeHandler"

@filterchange="filterChange"

@sortchange="sortChangeHandler"

@dataStateChange="dataStateChange"

@expandchange="expandChange"

@columnreorder="columnReorder"

>

<!-- <grid-toolbar>

<button

title="Add new"

class="k-button k-primary"

@click="insert"

>

Add new

</button>

<button

v-if="hasItemsInEdit"

title="Cancel current changes"

class="k-button"

@click="cancelChanges"

>

Cancel current changes

</button>

</grid-toolbar> -->

<grid-no-records>

<div class="k-loading-mask customPosition">

<span class="k-loading-text" />

<div class="k-loading-image" />

<div class="k-loading-color" />

</div>

</grid-no-records>

</Grid>

</v-card-text>

</v-card>

</template>

<script>

import { process } from '@progress/kendo-data-query';

// import { mapGetters } from 'vuex';

// import { mapGetters, mapActions } from 'vuex';

export default {

name: 'Product',

components: {},

data() {

return {

columnMenu: false,

expandedItems: [],

gridPageable: { pageSizes: true },

skip: 0,

take: 10,

pageSize: 10,

pageable: {

buttonCount: 10,

info: true,

type: 'numeric',

pageSizes: true,

previousNext: true,

},

filter: {

logic: '',

filters: [

// { field: 'UnitPrice', operator: 'neq', value: 18 },

// { field: 'calendarMonth', operator: 'gte', value: new Date('1996-10-10') },

],

},

group: [],

sort: [{ field: 'id', dir: 'asc' }],

// sort: [

// { field: 'id', dir: 'asc' },

// ],

columns: [

{

field: 'id',

title: 'ID',

// width: '70px',

},

{

field: 'currency',

title: 'Currency',

// width: '100px',

},

{

field: 'salesOrigin',

title: 'Sales Origin',

// width: '100px',

// filter: 'numeric',

// groupable: true,

},

{

field: 'plant',

title: 'Plant',

// width: '100px',

// filter: 'numeric',

// groupable: true,

},

{

field: 'sku',

title: 'SKU',

// width: '100px',

// groupable: true,

},

{

field: 'materialGroupDescription',

title: 'Material Group Description',

// width: '100px',

},

{

field: 'materialDescription',

title: 'Material Description',

// width: '100px',

},

{

field: 'swatchDisplayColourDescription',

title: 'Colour',

// width: '100px',

},

{

field: 'calendarMonth',

filter: 'date',

title: 'Calendar Month',

// width: '100px',

// groupable: true,

},

{

field: 'discontinued',

title: 'Discontinued',

// filter: 'boolean',

// groupable: true,

},

// {

// command: [

// {

// name: 'edit',

// text: ' ',

// width: 10,

// },

// {

// name: 'destroy',

// text: ' ',

// width: 10,

// },

// ],

// title: 'Actions',

// // width: '150px',

// },

],

};

},

computed: {

gridDataResult: {

get() {

// const data = process(this.$store.getters.aggregatedBoDataList,

// {

// sort: this.sort,

// take: this.take,

// skip: this.skip,

// filter: this.filter,

// group: this.group,

// });

// console.log(data);

return process(this.$store.getters.aggregatedBoDataList,

{

take: this.take,

skip: this.skip,

sort: this.sort,

filter: this.filter,

group: this.group,

});

},

set(data) {

return process(data,

{

take: this.take,

skip: this.skip,

sort: this.sort,

filter: this.filter,

group: this.group,

});

},

total() {

return this.$store.getters.aggregatedBoDataList

? this.$store.getters.aggregatedBoDataList.length : 0;

},

created() {

this.$store.dispatch({

type: 'fetchAggregatedBoData',

count: 200,

});

},

methods: {

createAppState(dataState) {

console.log(`dataState ${dataState}`);

this.group = dataState.group;

this.take = dataState.take;

this.skip = dataState.skip;

this.girdDataResult(dataState.data);

// this.getData();

},

groupChange(event) {

console.log(event);

},

dataStateChange(event) {

console.log(`data state ${event}`);

this.createAppState(event.data);

},

expandChange(event) {

console.log(`expand state ${event.target.$props.expandField}`);

this.$set(event.dataItem, event.target.$props.expandField, event.value);

},

pageChangeHandler(event) {

this.skip = event.page.skip;

this.take = event.page.take;

},

sortChangeHandler(e) {

this.sort = e.sort;

},

filterChange(ev) {

this.filter = ev.filter;

},

columnReorder(options) {

this.columns = options.columns;

},

};

</script>

<style>

.customPosition { margin-top:100px}

</style>

Grid

answered on 24 Apr 2020

3 answers

46 views

Grid Localization seems not to work

Hi,

I'm trying to translate the filter menu of the Grid.

the instructions on page:

https://www.telerik.com/kendo-vue-ui/components/grid/api/FilterableProps/

seems clear.

But if I put by example:

<kendo-grid ref="grid" :data-source-ref="'datasource1'" :pageable='true' :sortable="true" :filterable="true" :selectable="true"
:filterable-messages-clear="'Reimposta'"

The text of the relative button is always "clear".
Any suggestions?
Thank's in advance!

Grid

answered on 15 Mar 2019

18 answers

850 views

How can we bind event for custom checkbox on Kendo UI Grid Column using Vue Js ?

I am facing an issue in event for my custom checkbox in column template in Kendo UI grid using js.
I am not able to call my method checkboxToggle() which I have called it from here <input type="checkbox" class="user-status" # if(Status){ # checked # } #
v-on:click="checkboxToggle()"/> and for more details you can view my code below.

This is my code.