Hi,
I’ve been working with the grid and have applied grouping.
Following this, I attempted to introduce aggregations for each group. I’ve observed that this functionality is only available with cell rendering, which allows for customization of each cell.
I adhered to your provided example, but I noticed a complete transformation of the grid when more than one group is defined. I’m uncertain if this is the expected behavior.
Additionally, I’ve found that the groups can no longer be collapsed.
https://www.telerik.com/kendo-vue-ui/components/grid/grouping/grouping/
Thanks in advance,
Ziggy
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 using the Grid, but manipulating the URL with search parameters. The first page works great, showing the total rows, number of pages, etc. When navigating to other pages, I can see that the grid is successfully generating and hitting the URL. Within the change() event, I can see the correct rows returned. However, the grid is not updating with the new content. Is there something else I need to do?
Here is the grid definition
<
kendo-grid
ref
=
"gridComponent"
:data-source
=
"quotes"
:auto-bind
=
"true"
:selectable
=
'true'
:sortable
=
'true'
:resizable
=
'true'
:pageable-page-size
=
"pageSize"
:pageable-page-sizes
=
'true'
:pageable-button-count
=
'5'
:reorderable
=
'true'
:no-records
=
"noRecords"
v-on:databinding
=
"onDataBinding"
v-on:databound
=
"onDataBound"
v-on:change
=
"rowSelected"
:sort
=
"sortFilter"
>
computed: {
quotes: function () {
let vue = this
// eslint-disable-next-line
return new kendo.data.DataSource({
transport: {
read: {
url: this.queryString,
beforeSend: function (xhr) {
// xhr.setRequestHeader('Access-Control-Allow-Origin', '*')
xhr.setRequestHeader('Authorization', Constants.AUTH_KEY)
},
type: 'GET',
dataType: 'json'
}
},
schema: {
total: function (response) {
let records = 0
if (response && response.length > 0) {
records = response[0].Count
}
return records
}
},
pageable: 'true',
pageSize: 10,
serverPaging: 'true',
// testing the change event handler
change: function (e) {
// let data = this.data()
},
requestStart: function () { vue.loading = true },
requestEnd: function () { vue.loading = false }
})
},
queryString () {
var me = this.$store.getters.user
var agentNumber = me.userName
var searchURLstring = `${Constants.SEARCH_URL}?AgentNumber=${agentNumber}`
if (this.currentPolicyNo) {
searchURLstring += `&QuoteNumber=${this.currentPolicyNo}`
}
if (this.currentInsuredName) {
searchURLstring += `&InsuredName=${this.currentInsuredName}`
}
if (this.currentAddr1) {
searchURLstring += `&Address=${this.currentAddr1}`
}
if (this.currentSortField) {
searchURLstring += `&sortField=${this.currentSortField}`
searchURLstring += `&sortDirection=${this.currentSortField}`
}
searchURLstring += `&SearchScope=${this.searchScope}`
return searchURLstring
}
}
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
>
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'">
Hi,
I am having two grid's in my page and I want to scroll to a particular row when the page gets loaded.
Each rows are having unique years and I want to scroll to the current year row once the page is loaded, with the class selector and the year value inside <td> i can identify the row into which I have to scroll.
I have done the similar functionality in another project but there we are using kendo UI for jquery version and https://docs.telerik.com/kendo-ui/knowledge-base/grid-scroll-selected-row link I had followed to achieve the same. As my current requirement is for Kendo UI Grid for Vue , I am looking forward to the correct solution or an approach for achieving the same..
Thank you for your help in advance.
Best regards
Jaydeep
Hey Guys,
Wondering if anyone can assist in finding a solution to using Kendo UI grid data in a more MODERN Data Card solution such as https://www.google.com/flights results listings for instance (See attached) vs a standard Datagrid. I see that Kendo offers this
https://docs.telerik.com/devtools/winforms/controls/cardview/overview
However, this is far and away from a modern solution for Data Card UI. Of course, this will require sorting the filtering for cards, not grid. It would be awesome if the cards could interact with data from data grids too...
Any thoughts?
Thx in advance!
Michael
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?
Hello
I add