I'm using TreeList component and I want to rend dropdown list in column filters, I have set filterable to true and filterable-ui to rend function, but still failed, while it works in jquery TreeList. Failed meaning is rending default string type filters, not dropdown list. And I'm sure the attribute is received by component from vue chrome plugin.
Hoping some demoes to show how to work fine.
Code as following
HTML:
<kendo-treelist :data-source="resourceDataSource"
:filterable="true">
<kendo-treelist-column :field="'name'" :width="140"></kendo-treelist-column>
<kendo-treelist-column :field="'resourceType'" :width="100" :filterable="true" :filterable-ui="resourceTypeFilterableUi" :template="typeTemplate"></kendo-treelist-column>
</kendo-treelist>
JS:
resourceDataSource:
new kendo.data.TreeListDataSource({
serverPaging:true,
serverFiltering:true,
transport:{
read:{
url:'/api/RBAC/Resource/GetResouceListByTid',
type:"post",
dataType:'json',
data:{
companyId:vm.companyId
}
}
},
page:1,
pageSize:10,
schema: {
model: {
id: "id",
parentId: "parentId",
fields:{
resourceType:{ type:'string' }
}
},
data:function (res) {
return res.data.data
},
total:function (res) {
return res.data.total
}
}
})
Rend Function:
resourceTypeFilterableUi:function(element){
element.kendoDropDownList({
dataSource: resourceType,
dataTextField: "value",
dataValueField: "id"
})
}
in KendoUI for Vue
I implement one component with TreeList has father-son relationship items,Customize use checkboxes with Cascade selection。
must Use column Template to resolve,old jquery template don't support component event,So i must use native Column template。
But use native Column template ,I Found TreeList cause Repeat Data when expand Or collapse。
What is the right method,i can choose to resolve this problem。
I'm using the kendo DropDownTree control with VueJS.
I have the control working in a component with my Hierarchy data as shown below.
When I have a parent node with 1 or more child nodes and I check the parent, how can I get all the child nodes to be checked also? Is there a prop for that?
The "check-all" only works for checking or unchecking the entire tree. I would like to check or uncheck all the children within the selected parent. Is that possible?
<dropdowntree
:data-source="items"
tagMode="single"
:autoClose=false
:checkboxes="true"
:check-all="true"
:placeholder="placeholder"
dataTextField="text"
dataValueField="id"
@change="onChange"
v-model="selectedItems"
style="width: 100%;"
height="auto"
>
</dropdowntree>
Hello All,
I am facing issue of sorting functionality in grid with vuejs.
In grid records are sorting in ascending/descending on click on column name.
But my column name is simple string but field is dot (.) separated value then it is not working.
e.g. -
columnsDefinitions: [ {
field: 'user.role.name',
title: 'rolename',
},
where user.role.name is a key of JSON getting from back-end.
Error : -
Uncaught TypeError: Cannot read property 'role' of undefined
at eval (eval at getter (kendo.core.js?38f6:4631), <anonymous>:3:15)
at Array.eval (kendo.data.js?1f4d:994)
at eval (kendo.data.js?1f4d:1031)
at Array.sort (<anonymous>)
at Query.order (kendo.data.js?1f4d:1546)
at Query.orderBy (kendo.data.js?1f4d:1549)
at Query.sort (kendo.data.js?1f4d:1567)
at Function.Query.process (kendo.data.js?1f4d:1866)
at init._queryProcess (kendo.data.js?1f4d:3914)
at init.query (kendo.data.js?1f4d:3982)
I'm getting the following in my Debug Console when I run my application;
License activation failed for @progress/kendo-ui v2023.1.425
No license found.
See https://docs.telerik.com/kendo-ui/intro/installation/using-license-code for more information.
This despite having the license file present in my project root. At the moment, I have removed the environment variable since I thought it might be causing a conflict.
I have also used npm uninstall to remove all my local packages and I have reinstalled the. Her eis my current package.json;
{ "name": "wpgts", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "@progress/kendo-file-saver": "^1.1.1", "@progress/kendo-licensing": "^1.3.0", "@progress/kendo-map-vue-wrapper": "^2023.1.314", "@progress/kendo-svg-icons": "^1.4.2", "@progress/kendo-theme-default": "^6.2.0", "@progress/kendo-theme-fluent": "^6.2.0", "@progress/kendo-ui": "^2023.1.314", "@progress/kendo-vue-buttons": "^3.9.1", "@progress/kendo-vue-dateinputs": "^3.9.1", "@progress/kendo-vue-dialogs": "^3.9.1", "@progress/kendo-vue-dropdowns": "^3.9.1", "@progress/kendo-vue-form": "^3.9.1", "@progress/kendo-vue-indicators": "^3.9.1", "@progress/kendo-vue-inputs": "^3.9.1", "@progress/kendo-vue-intl": "^3.9.1", "@progress/kendo-vue-layout": "^3.9.1", "core-js": "^3.8.3", "jquery": "^3.6.4", "register-service-worker": "^1.7.2", "rxjs": "^6.6.7", "vue": "^3.2.13", "vue-router": "^4.0.3", "vue-rx": "^6.2.0" }, "devDependencies": { "@types/jquery": "^3.5.16", "@typescript-eslint/eslint-plugin": "^5.4.0", "@typescript-eslint/parser": "^5.4.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-plugin-pwa": "~5.0.0", "@vue/cli-plugin-router": "~5.0.0", "@vue/cli-plugin-typescript": "~5.0.0", "@vue/cli-service": "~5.0.0", "@vue/eslint-config-typescript": "^9.1.0", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3", "typescript": "~4.5.5" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended", "@vue/typescript/recommended" ], "parserOptions": { "ecmaVersion": 2020 }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead", "not ie 11" ] }
Why am I getting this licensing issue despite having followed the instruction at this link;
https://www.telerik.com/kendo-vue-ui/components/my-license/
Any help would be greatly appreciated.
Thanks...
<template>
<div class=
"wrapper wrapper-content animated fadeInRight"
>
<div class=
"k-rtl"
>
<kendo-datasource
ref=
"datasource1"
:transport-read-url=
"'/trips'"
:transport-read-data-type=
"'json'"
:transport-parameter-map=
"parameterMap"
:schema-model-id=
"'ID'"
:schema-model-fields=
"schemaModelFields"
:batch=
"false"
:page-size=
"25"
></kendo-datasource>
<kendo-grid
ref=
"grid"
:page=
"page"
@databinding=
"onDataBinding"
:height=
"600"
:data-source-ref=
"'datasource1'"
:editable=
"'inline'"
:groupable="groupable"
>
<kendo-grid-column title=
"#"
:template=
"itemTemplate"
></kendo-grid-column>
<kendo-grid-column field=
"TruckID"
title=
"T"
></kendo-grid-column>
<kendo-grid-column field=
"ShovelID"
title=
"S"
></kendo-grid-column>
<kendo-grid-column field=
"ShovelMeta"
title=
"M"
></kendo-grid-column>
<kendo-grid-column field=
"UnloadingID"
title=
"TT"
></kendo-grid-column>
<kendo-grid-column field=
"ServiceStatus"
title=
"V"
></kendo-grid-column>
<kendo-grid-column field=
"DT_ExitShovel"
title=
"E"
></kendo-grid-column>
<kendo-grid-column field=
"DT_ExitUnloading"
title=
"ET"
></kendo-grid-column>
</kendo-grid>
<script id=
"itemTemplate"
type=
"text/x-kendo-template"
>
<div>{{ ++record}}</div>
</script>
</div>
</div>
</template>
<script>
const swal = require(
"sweetalert2"
);
export
default
{
data() {
return
{
record: 0,
gpage: 1,
groupable: {
messages: {
empty: "تگ ها را انتخاب کنید"
}
},
}
},
mounted() {},
methods: {
itemTemplate:
function
(e) {
var
template = kendo.template(kendo.jQuery(
"#itemTemplate"
).html());
return
template(e);
},
parameterMap:
function
(options, operation) {
if
(operation !==
"read"
&& options.models) {
return
{ models: kendo.stringify(options.models) };
}
},
onDataBinding:
function
(ev) {
this
.record = (
this
.gpage - 1) *
this
.$refs.datasource1.pageSize;
console.log(
this
.record);
},
onDataBound:
function
(ev) {
//console.log("Grid is now bound!");
},
page:
function
(e) {
this
.gpage = e.page;
}
}
};
</script>
<style src=
"sweetalert2/dist/sweetalert2.min.css"
></style>