or
5 answers
868 views
I am loading the kendo vue ui chart and displaying that in bootstrap cards (which is inside the bootstrap tab).
But some reason that that doesn't cover the entire width of the cards and render being so small.
There is already the style as: width: 100%; height: 100%; in the SVG of the chart but that doesn't expand. But when I changed some data then it occupies the full width.
Why it is not rendering properly initially? What's the issue causing this and what is the workaround for this?
http://jsfiddle.net/pdLncxoy/
Aakash
Top achievements
Rank 1
Rank 1
answered
on
11 Sep 2020
1 answer
230 views
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
Konstantin Dikov
Telerik team
answered
on
04 Feb 2019
1 answer
265 views
Can I make the entire Vue Card component clickable for a single link?
Vessy
Telerik team
answered
on
10 Nov 2023
6 answers
700 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
5 answers
684 views
Hi
Is it possible to switch to a card view in the grid component? If not, is it possible to keep the filter options from <kendo-grid> and then have a switch to change between the <kendo-grid-column>'s and another custom view?
Or maybe another suggestion?
Viktor Tachev
Telerik team
answered
on
01 Feb 2019
