or
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
0 answers
160 views
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?
0 answers
51 views
Hello,
I need to use a column filter with checkboxes on my current grid. I want the checkboxes to have values from all the possible data from the server instead of only the data that I got on the current page.
This means that when the column filter is getting open, I need to make a call to the server in order to get all the data I need.
Can you please provide me a way to do, because I can't find one.
Thanks
Nevermind, I solved it. I saw that there is a property dataItems. This raised another question. How can I make a loading animation for the dropdown while I m waiting to get my data?
5 answers
700 views
hello, I am working with the grid wrap component, and my problem is that in the filters of my columns I do not need to use all the filter options (for example, it is equal to, it is not equal to, it is after .. ..), I would like to only use some of them .. is it possible to do this?
Veselin Tsvetanov
Telerik team
answered
on
14 Nov 2019
0 answers
255 views
Hi everyone! , I would like to create at the select of a grid a label at the top of the page with a click button to cancel the decision.
Something that looks like a filter on shopping websites. Something like attached in the picture
Does a similar component already exist?
alex
Top achievements
Rank 1
Iron
Veteran
Rank 1
Iron
Veteran
asked
on
20 Oct 2022
7 answers
66 views
Hi,
Trying to implement grid (native) filtering. It has a date time column. Filtering seems to not work for this column.
https://stackblitz.com/edit/gqlmpp
Ivan Danchev
Telerik team
answered
on
13 Feb 2020
1 answer
23 views
Hello,
I have a queastion. When I use DropDownList in Navtive components of Vue3, I want to filter with both data item key and text field.
but the method I found is only using one field.
The field properties of a DropDownList are strings or functions.
I need Array<string> like ['dataItemKey', 'textFiled']. Can I?
example :
data-Item-list = [
{text : 'A', value : 1},
{text : 'B', value : 2},
{text : 'C', value : 3},
{text : 'D', value : 4}
]
When I put 3, C is searched.
At the same time I put D, D is searched.
Konstantin Dikov
Telerik team
answered
on
27 Mar 2024
1 answer
13 views
Hi,
Is it possible to implement a filter in a multiSelectTree so that when a search term matches a parent item, it automatically displays all of its children as well?
example:
data = [
{
text: 'Furniture', id: 1, items: [
{ text: 'Tables & Chairs', id: 2 },
{ text: 'Sofas', id: 3 },
{ text: 'Occasional Furniture', id: 4 }
]
}, {
text: 'Decor', id: 5, items: [
{ text: 'Bed Linen', id: 6 },
{ text: 'Curtains & Blinds', id: 7 },
{ text: 'Carpets', id: 8 }
]
}
];
For instance, if one were to search for "decor," would the system also show "Bed Linen," "Curtains & Blinds," and "Carpets"?
Thanks in advance,
Ziggy
Konstantin Dikov
Telerik team
answered
on
15 Apr 2024
16 answers
495 views
So how do we add a Detail Template? The docs are seriously lacking for Vue wrappers!!
I have this - which i assume would reference a $ref od "detail" but instead outputs a string
<kendo-grid ref="grid"
:data-source-ref="'dataSource'"
:menu="true"
:sortable='true'
:pagable="true"
:groupable="false"
:detail-template="'detail'">
Dimitar
Telerik team
answered
on
01 Nov 2018
6 answers
588 views
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>
Ianko
Telerik team
answered
on
24 Apr 2020
