Hi,
I am using Kendo UI Material theme. I would like to switch between light and dark themes without reloading the whole site. May I know what are variables available that I can set in the code?
Hi, i'm new to kendo and i'm trying to create a filterable grid with a grid native component. Everything works well BUT i'm stuck with the full list of operators (contains, begins, is not null,...).
Is there an easy way to customize the list of operators ? I will probably only need "begins" and "is equal to".
I saw that with the grid-wrapper I could define a list with the property "filtterable" but it doesn't seem to work with grid native. I got an error saying that Filterable could'nt be assigned with an object.
Thanks a lot !
Hello.
I implemented the kendo ui grid vuejs.
I have a question, how it's possible "sticky" the Expand column?
I have other columns "sticky" and works fine, but the "expand" column (master details) don't keep sticky. and i need to hide the "menu filters" in this columns too
Thanks in advance
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
>
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 !!!")
}
}
Hello everyone!
I am trying to implement a search field component based on kendo-combobox wrapper.
I want to cover via JEST unit tests the changed value but I can not trigger the change event and assert the component value.
I am sharing with you guys this code example : https://codesandbox.io/s/tender-proskuriakova-89bcm?fontsize=14&hidenavigation=1&theme=dark
Can you help me on this assertion : expect(wrapper.vm.$data.value).toEqual(1);
I'm trying to populate a grid with some async data (not in this repro for simplicity) and do the data processing inside a Vue computed function.
However I can't seem to get the expanding/collapsing rows functionality to play along nicely.
Here's my attempt (where I save 'e.collapsedGroups' into a ref and recurse over it inside the computed):
Fkcdqd (forked) - StackBlitz
Basically the only issue that I'm still seeing is that when I collapse product name 'Apple' it will close all 'Apple' rows. You can observe this by going to the repro and collapsing 'Apple' product in the units in stock '2', and then scrolling down to the units in stock '7' and seeing there that the 'Apple' is also collapsed.
My guess is is that there must be a simpler way to implement the expand functionality with a computed, but so far haven't found a way.
I would really appreciate any input to help me along 😁
I am facing issue with to bind the routing link directly in Kendo UI Treeview and for more details, I have put a router-link property in not working and you can view my code below.
01.
<div id=
"vueapp"
class=
"vue-app"
>
02.
<kendo-treeview>
03.
<kendo-treeview-item text=
"User Setting"
>
04.
05.
<kendo-treeview-item text=
"User"
router-link =
"/setting/user"
>User</kendo-treeview-item>
06.
<kendo-treeview-item text=
"Role"
router-link
=
"/setting/role"
> </kendo-treeview-item>
07.
<kendo-treeview-item text=
"Password Setting"
router-link =
"/setting/password"
></kendo-treeview-item>
08.
09.
</kendo-treeview-item>
10.
11.
<kendo-treeview-item text=
"Group Setting"
>
12.
13.
<kendo-treeview-item text=
"Group"
></kendo-treeview-item>
14.
<kendo-treeview-item text=
"Group setting"
></kendo-treeview-item>
15.
16.
</kendo-treeview-item>
17.
18.
19.
</kendo-treeview>
20.
21.
</div>