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?
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!
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?
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?
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
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
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.
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
>
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!
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.
<
kendo-datasource
ref
=
"localDataSource"
:data
=
"filteredUsers"
:group
=
'groupingFiled'
></
kendo-datasource
>
<
kendo-grid
:height
=
"500"
:data-source-ref
=
"'localDataSource'"
:resizable
=
"true"
:filterable
=
"false"
:sortable-allow-unsort
=
"true"
:sortable-show-indexes
=
"true"
:scrollable-virtual
=
"true"
:pageable-numeric
=
"false"
:pageable-previous-next
=
"false"
:pageable-messages-display
=
"'Showing {2} users'"
:editable
=
"'popup'"
:toolbar
=
"[{name: 'excel', text: 'Excel'}]"
:excel-file-name
=
"'Motadata_UserListing.xlsx'"
:excel-filterable
=
"true"
>
<
kendo-grid-column
:selectable
=
"true"
:width
=
"35"
></
kendo-grid-column
>
<
kendo-grid-column
:field
=
"'UserId'"
:hidden
=
"true"
></
kendo-grid-column
>
<
kendo-grid-column
:field
=
"'UserName'"
:width
=
"150"
></
kendo-grid-column
>
<
kendo-grid-column
:field
=
"'UserType'"
:width
=
"180"
></
kendo-grid-column
>
<
kendo-grid-column
:field
=
"'Role'"
:width
=
"120"
></
kendo-grid-column
>
<
kendo-grid-column
:field
=
"'AssignedGroups'"
></
kendo-grid-column
>
<
kendo-grid-column
:field
=
"'Email'"
:width
=
"210"
></
kendo-grid-column
>
<
kendo-grid-column
:field
=
"'Description'"
:width
=
"200"
></
kendo-grid-column
>
<
kendo-grid-column
:field
=
"'Status'"
:width
=
"170"
:template
=
"this.toggleTemplate()"
></
kendo-grid-column
>
</
kendo-grid
>
Vue Js code
Methods:{
toggleTemplate(){
let template =
`<
label
class
=
"switch"
>
<
input
type
=
"checkbox"
class
=
"user-status"
# if(Status){ # checked # } #
v-on:click
=
"checkboxToggle()"
/>
<
span
class
=
"slider round"
></
span
></
label
>`;
let compiledTemplate = kendo.template(template);
return compiledTemplate.bind(this);
},
checkboxToggle(){
//TODO Grid checkbox template event binding not working
alert("Checkbox Toggle !!!")
}
}