or
1 answer
258 views
We are using the kendo-ui Dropdowntree control in our VueJS app.
If we have around 1100+ rows of data in our hierarchy, we find that the Browser screen freezes until the Dropdowntree control is finished populating.
Most of our hierarchies are much smaller and the control populates quickly as expected.
But we have 1135 rows in our hierarchy in one of our examples. The data is fetched from our API and returned to our Vuejs app, in a few seconds. But after the Vuejs load function finishes and the code is about to return to the UI, the screen freezes for about 10 seconds while the Dropdowntree control is populating. Nothing can be clicked while the screen is frozen.
How can we avoid the screen freezing while the Dropdowntree control is populating where the hierarchy rows are large?
Petar
Telerik team
answered
on
25 Feb 2022
1 answer
73 views
Is there an easy way to allow only one item selected in the navite grid? I find it strange that it's not a simple prop to add to the component.
Thank you.
1 answer
76 views
<!-- :data-items="result" uwaga to jest do filtru potrzebne -->
<template>
<div class="example-wrapper">
<Grid
ref="grid"
:style="{ height: '860px' }"
:data-items="result"
:selected-field="selectedField"
:sortable="true"
:sort="sort"
:pageable="pageable"
:take="take"
:skip="skip"
:total="total"
:filterable="true"
:filter="filter"
:loader="loader"
@filterchange="filterChangeHandler"
@itemchange="itemChange"
@datastatechange="dataStateChange"
:columns="columns"
@selectionchange="onSelectionChange"
@headerselectionchange="onHeaderSelectionChange"
@rowclick="onRowClick"
>
<template v-slot:myTemplate="{props}">
<custom :data-item="props.dataItem"
@edit="edit"
@save="save"
@remove="remove"
@cancel="cancel"
/>
</template>
<grid-toolbar >
<kbutton title="Add new" :theme-color="'primary'" @click="insert">
Dodaj rekord
</kbutton> <br>
<kbutton title="Add new" :theme-color="'primary'" @click="insert">
Zaznacz zrobione
</kbutton>
<div class="demo">
<span class="wrapper">
<checkbox :id="'chb1'" :label="'Przeglądy maszyn '" @click="testowyfiltr"/>
<checkbox :id="'chb2'" :label="'Przeglądy wytwarzanie '" />
<checkbox :id="'chb3'" :label="'Przeglądy infrastryktrua '" />
</span>
</div>
<kbutton
v-if="hasItemsInEdit"
title="Cancel current changes"
@click="cancelChanges"
>
Cancel current changes
</kbutton>
<div class="demo2">
<span class="wrapper">
<h3 :style="{ color: 'black' }" > W tym tygodniu do wykonania </h3> <h2 :style="{ color: 'red' }"> 5 </h2> <h3 :style="{ color: 'black' }">przeglądów</h3>
</span>
</div>
</grid-toolbar>
<grid-norecords> poczekaj.....</grid-norecords>
</Grid>
<dialog-container
v-if="productInEdit"
:data-item="productInEdit"
@save="save"
@cancel="cancel"
:products-list="products">
</dialog-container>
</div>
</template>
<script>
import { Grid, GridToolbar, GridNoRecords } from '@progress/kendo-vue-grid';
import { Button } from '@progress/kendo-vue-buttons';
import { process, toODataString } from '@progress/kendo-data-query';
import CommandCell from './CommandCell';
import DialogContainer from './DialogContainer';
import { Checkbox } from "@progress/kendo-vue-inputs";
// const allData = [{text: 'do zrobienia'},{text: 'zrobione'}];
export default {
components: {
Grid: Grid,
'grid-toolbar': GridToolbar,
'grid-norecords': GridNoRecords,
custom: CommandCell,
kbutton: Button,
'dialog-container': DialogContainer,
checkbox: Checkbox
},
data: function () {
return {
// products: allData,
selectedField: 'selected',
// gridData: gridData.map(item => { return {...item, selected: false} }),
productInEdit: undefined,
baseUrl: 'http://156.4.10.182:42471/test/products',
init: { method: 'GET', accept: 'application/json', headers: {} },
filter: null,
sort: null,
pageable: true,
skip: 0,
take: 10,
total: 0,
// expand: "Supplier",
updatedData: [],
editID: null,
staticColumns: [
{ field: 'Id', filterable:false, editable: false, width: 50, title: 'id' },
// { field: 'LP',filterable:false ,width: 40},
{ field: 'Nazwa_maszyny' ,filterable:false ,width: 200 ,title: 'Nazwa Maszyny'},
{ field: 'Urzadzenie' , filterable:false ,width: 250 ,title: 'Urządzenie'},
{ field: 'Czynnosc' , filterable:false ,width: 200 ,title: 'Czynnosc'},
{ field: 'Grupa' , filterable:false ,width: 70 ,title: 'Grupa'},
// { field: 'Priorytet',filterable:false ,width: 100 ,title: 'Priorytet'},
{ field: 'Lokalizacja' , filterable:false ,width: 120 ,title: 'Lokalizacja'},
{ field: 'Wykonawca' , filterable:false ,width: 60 ,title: 'Wykonawca'},
{ field: 'Tydzien' , filterable:true ,width: 100 ,title: 'Tydzien'},
{ field: 'Link' , filterable:true ,width: 100 ,title: 'Link'},
{ field: 'Foto',filterable:false,width: 100 ,title: 'Foto' , cell: this.cellFunction},
{ field: 'Status', filterable:false ,width: 100 },
// { field: 'Data', filterable:false ,title: 'Data', editor: 'numeric', width: 80 },
{ field: 'Dod_info',filterable:false,width: 100 ,title: 'Dod_info'},
// { field: 'Login' ,width: 100 ,title: 'Login'},
{ cell: 'myTemplate', filterable: false, width: '110px' },
],
gridData: [],
loader: true,
};
},
computed: {
areAllSelected () {
return this.gridData.findIndex(item => item.selected === false) === -1;
},
columns () {
return [
{ field: 'selected',filterable:false, width: '50px', headerSelectionValue: this.areAllSelected },
...this.staticColumns
]
},
hasItemsInEdit() {
return this.gridData.filter((p) => p.inEdit).length > 0;
},
dataState() {
return {
sort: this.sort,
skip: this.skip,
take: this.take,
};
},
result: {
get: function () {
// console.log(this.gridData)
return process(this.gridData, {
sort: this.sort,
filter: this.filter,
take: this.take,
skip: this.skip,
});
},
},
},
created: function () {
this.getData();
},
methods: {
cellFunction: function (h, tdElement , props, listeners ) {
return h('td', {
on: {
click: function(e){
listeners.custom(e);
}
}
}, [<img src="https://en.pimg.jp/047/504/268/1/47504268.jpg"/>]);
},
filterChangeHandler(event) {
this.filter = event.filter;
},
onHeaderSelectionChange (event) {
let checked = event.event.target.checked;
this.gridData = this.gridData.map((item) => { return {...item, selected: checked} });
},
onSelectionChange (event) {
event.dataItem[this.selectedField] = !event.dataItem[this.selectedField];
},
onRowClick (event) {
event.dataItem[this.selectedField] = !event.dataItem[this.selectedField];
},
createRandomData(count) {
return
},
updateService(action = '', item) {
const that = this;
const idIfNeeded =
action === 'DELETE' || action === 'PUT' ? `(${item.Id})` : '';
const url = this.baseUrl + idIfNeeded;
const body =
action === 'POST' || action === 'PUT'
? JSON.stringify({
Id: item.Id,
Status: item.Status,
Data : item.Data,
LP : item.LP,
Nazwa_maszyny: item.Nazwa_maszyny,
Urzadzenie: item.Urzadzenie,
Grupa: item.Grupa,
Foto: item.Foto,
Priorytet: item.Priorytet,
Lokalizacja: item.Lokalizacja,
Wykonawca: item.Wykonawca,
Tydzien: item.Tydzien,
Druk: item.Druk,
Dod_info: item.Dod_info,
Login: item.Login
})
:{};
console.log(body);
fetch(url, {
method: action,
accept: 'application/json',
headers: {
'Content-type': 'application/json',
},
body: body,
}).then((response) => {
if (response.ok) {
that.getData();
} else {
alert('request failed');
}
});
},
itemChange: function (e) {
if (e.dataItem.Id) {
let index = this.gridData.findIndex(
(p) => p.Id === e.dataItem.Id
);
let updated = Object.assign({}, this.gridData[index], {
[e.field]: e.value,
});
this.gridData.splice(index, 1, updated);
} else {
e.dataItem[e.field] = e.value;
}
},
insert() {
this.productInEdit = { };
},
testowyfiltr(event){
this.filter = event.filter;
},
edit(dataItem) {
this.productInEdit = this.cloneProduct(dataItem);
},
save(e) {
const dataItem = this.productInEdit;
const item = this.gridData.slice();
const isNewProduct = dataItem.Id === undefined;
if(isNewProduct) {
item.unshift(this.newProduct(dataItem));
this.updateService(dataItem.Id ? 'PUT' : 'POST', dataItem);
} else {
const index = item.findIndex(p => p.Id === dataItem.Id);
item.splice(index, 1, dataItem.Id);
let items = this.gridData[index];
this.updateService(items.Id ? 'PUT' : 'POST', dataItem) ;
item.unshift(this.newProduct(dataItem));
this.updateService(dataItem.Id ? 'PUT' : 'POST', dataItem);
}
this.productInEdit= undefined;
},
cancel(e) {
this.productInEdit= undefined;
},
remove(e) {
this.updateService('DELETE', e);
this.productInEdit= undefined;
},
cancelChanges() {
this.getData();
},
getData: function (initial) {
const myDataState = JSON.parse(JSON.stringify(this.dataState));
const that = this;
fetch(
this.baseUrl + '?' + toODataString(myDataState) + '&$count=true',
// this.baseUrl + '?' + toODataString(this.dataState) + '&$count=true' +'&$expand=Supplier',
this.init
)
.then((response) => response.json())
.then((json) => {
const total = json['@odata.count'];
const data = json['value'];
that.total = total;
that.updatedData = [...data];
that.gridData = data;
});
},
createAppState: function (dataState) {
this.take = dataState.take;
this.skip = dataState.skip;
this.filter = "Luty";
this.sort = dataState.sort;
this.getData();
},
dataStateChange: function (event) {
this.createAppState(event.data);
},
cloneProduct(product) {
return Object.assign({}, product);
},
newProduct(source) {
const id = this.gridData.reduce((acc, current) => Math.max(acc, current.Id || 0), 0) + 1;
const newProduct = {
Id: id,
Status: "",
Data : "",
LP : "",
Nazwa_maszyny: "",
Urzadzenie: "",
Grupa: "",
Foto: "",
Priorytet: "",
Lokalizacja: "",
Wykonawca: "",
Tydzien: "",
Druk: "",
Dod_info: "",
Login: ""
};
return Object.assign(newProduct, source);
}
},
};
</script>
<style>
.custom-checkbox input {
width: 30px;
height: 30px;
}
.wrapper {
padding: 20px;
display: flex;
flex-direction: row;
}
.demo {
display: flex;
flex-direction: row;
justify-content: left;
}
.demo2 {
display: flex;
flex-direction: row;
justify-content: left;
}
.k-grid .k-toolbar {
background-color: rgb(224, 225, 187);
}
</style>
Petar
Telerik team
answered
on
15 Jul 2022
1 answer
86 views
I'm using the dropdowntree control in Vuejs.
When the checkboxes are selected, the selected items are display in an oval with an "x" at the top of the control.
How do I keep the selected items from displaying at the top of the control?
I'd rather have the total number of items that are selected to display at the top of the control. Is this possible?
<dropdowntree
:data-source="myDataSource"
:autoClose="false"
:checkboxes="true"
:check-all="true"
:placeholder="'Select Items'"
dataTextField="text"
dataValueField="id"
v-model="selectedItemsList"
style="width: 500px;"
>
</dropdowntree>
Plamen
Telerik team
answered
on
25 May 2021
1 answer
137 views
I've basically took the example stackblitz from the dropdowntree wrapper:
https://www.telerik.com/kendo-vue-ui/components/dropdowntree-wrapper/checkboxes/
And I added:
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>and
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>https://stackblitz.com/edit/8ahikr?file=public%2Findex.html
Unfortunately, due to constraints, I can't upgrade the kendo.all.min.js bundle to 2021, or downgrade the jQuery version to 1.12.1
Is there a Kendo DropDownTree npm package version that works with both jQuery 3.5.1 and 2019.1.115 kendo.all.min.js? Or is this a bug that can be fixed?
Thanks in advance
Petar
Telerik team
answered
on
25 Oct 2021
1 answer
93 views
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!
Petar
Telerik team
answered
on
16 Jun 2022
1 answer
463 views
I have below item in my 'columns' in 'data' function of my grid component. How can I write it in <kendo-grid-column> tag format?
I also need my isActive to render as a radio button all the time. Please help with these 2 things.
{ cell: "myTemplate", filterable: false, width: "210px" }
This is what I have so far. It display all columns except my v-slot.
<grid :style="{ height: '300px', width: '60%' }"
ref="grid"
:data-items="gridData"
:pageable="pageable"
:sortable="sortable"
:skip="skip"
:total="total"
:edit-field="'inEdit'"
@itemchange="itemChange"
>
<kendo-grid-column field="emailAddress" title="Account" :width="120">
</kendo-grid-column>
<kendo-grid-column
field="Description"
title="Description"
:width="120"
></kendo-grid-column>
<kendo-grid-column
field="isActive"
title="Is Active"
:width="120"
></kendo-grid-column>
<kendo-grid-column
cell="myTemplate"
filterable="false,"
:width="120"
></kendo-grid-column>
<template v-slot:myTemplate="{ props }">
<custom
:data-item="props.dataItem"
@edit="edit"
@save="save"
@cancel="cancel"
/></template>
Petar
Telerik team
answered
on
02 Sep 2021
1 answer
934 views
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>
Petar
Telerik team
answered
on
27 May 2021
1 answer
36 views
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。
Petar
Telerik team
answered
on
14 Jul 2020
4 answers
108 views
Hello! I want to bind image to tree view item like this
<kendo-hierarchicaldatasource ref="remoteDataSourceComponent"
:transport-read-url="'api/gettreenodes'"
:transport-read-data-type="'json'"
:schema-model-id="'id'"
:schema-model-has-children="'hasChildren'">
</kendo-hierarchicaldatasource>
<kendo-treeview data-source-ref="remoteDataSourceComponent"
:data-text-field="'name'"
:checkboxes="false"
:data-image-url-field="getIcoPath('type')"
:drag-and-drop="false">
</kendo-treeview>
methods: {
getIcoPath: function(typeId) {
return require('./resources/'+typeId+'.png');
}
I want to set treeItem image according to treeItem type in function getIcoPath.
Is it possible?
Ilya
Top achievements
Rank 1
Rank 1
answered
on
27 Jul 2018
