I am working on refactoring an old app from Angular 1.2 to Vue.
I am using the Excel Export feature in the native grid successfully, however in the jQuery (and AngularJS) versions there is an "excelExport" event that we could hook into to modify the workbook prior to it being converted to an actual excel file. We were using this to conditionally apply background colors depending on the value of certain cells.
Here is an example of our old code:
excelExport:
function
(e) {
var
sheet = e.workbook.sheets[0];
var
statuses = _.object(_.map($scope.dataSource.StatusId,
function
(x) {
return
[x.id, { name: x.name, color: x.color }] }));
var
statusCol = findExcelColumn(sheet, "Status");
//find status column
if
(statusCol >= 0) {
//Set status display with colours
_.each(sheet.rows,
function
(row) {
var
value = row.cells[statusCol].value;
if
(!_.isUndefined(statuses[value])) {
row.cells[statusCol].background = statuses[value].color;
row.cells[statusCol].value = statuses[value].name;
}
});
}
},
Is this something that is still possible to do? If not, is it a planned feature?
There is a tabstip problem in ios 13.3. (iPad)
The tabstrip scroll icon is not clicked.
Click doesn't work so it's impossible to check the contents of the next tab.
Please confirm.
https://www.telerik.com/kendo-vue-ui/components/layout/tabstrip/scrollable-tabs/
Dear Telerik Forum Admins,
I would like to format the number columns within my excel export, but it seems that the format string that I am giving (which works in the Grid), is ignored by the saveExcel method when creating the excel.
I attached a snippet of my code and how the same format string works in the Grid.
Could you please advise how I am able to format the numbers within my excel export.
Kind regards,
Natasha L
Hi All,
I am trying to export data to excel using kendo grid and vue js . I am following https://www.telerik.com/kendo-vue-ui/components/grid-native/excel-export/ link
But i am getting below error
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: Object(...) is not a function"
found in
---> <Export> at src/components/Excel/export.vue
<App> at src/App.vue
<Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6911
vue.runtime.esm.js?2b0e:1888 TypeError: Object(...) is not a function
at VueComponent.exportExcel (export.vue?31a1:29)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)
at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6911)
Below giving my code. and let me know where i am doing wrong?
<template>
<div>
<button @click="exportExcel" class="k-button">Export Excel</button>
<kendo-grid :height="550" :data-source="info" >
<kendo-grid-column field="Name" title="Name" ></kendo-grid-column>
<kendo-grid-column field="Code" title=Code :width="120" :format="'{0:c}'"></kendo-grid-column>
</kendo-grid>
</div>
</template>
<script>
export default {
name:'export',
data () {
return {
visible: true,
Information : 'absd',
info: null
}
},
mounted () {
axios
.get('https://localhost:44311/api/Module/')
.then(response => (this.info = response.data.lstModuleDetails))
},
methods: {
exportExcel: function () {
saveExcel({
data: this.items,
fileName: "myFile",
columns: [
{ field: 'Code'},
{ field: 'Name', title: 'Name' }
]
});
}
}
}
import saveExcel from '@progress/kendo-vue-excel-export';
import axios from 'axios'
</script>
Hi!
I have a problem with the grid selection feature. When I select multiple rows, and I have subscribed to the @change event on the Kendo Vue Grid, the event returns the proper row keys. But when i deselect one of the rows, an empty array is returned, while there are still rows selected (minus the one I have just deselected). The behaviour I would expect is for the event to return al currently selected rows, not an empty array. Does anyone have a solution to this? I need the information to bind to another component. Any help would be greatly appreciated! Below
<kendo-grid
id=
"grid"
ref=
"gridRef"
:data-source=
"dataSource"
:columns=
"columns"
:resizable=
"resizable"
:filterable=
"filterable"
@change=
"onChangeSelection($event)"
>
</kendo-grid>
// Event Handler
onChangeSelection(event: any) {
console.log(event.sender.selectedKeyNames()); //Returns '[]' instead of [1, 2, 3 ...] when there are stil rows selected
this
.selectedKeys = event.sender.selectedKeyNames();
}
hi I am the user of kendo-uploader
when I open the kendo-window, my fileUpload have to Keep some files what I can remove, so I use a Initailfile Option like the Code of below
$("#fileUpload").kendoUpload({
async: {
saveUrl: "save",
removeUrl: "remove",
autoUpload: false,
removeVerb: "DELETE",
},
remove: onRemove,
files: this.mUploadFiles
});
but I make a Problem because when I press the X button ,It works remove process immediately but I want to use my Custom remove process.
How can I use my Custom remove Process . Please help me to solve the problem
Hi
I have a custom filter template for a column and it works fine. I would like to hide the filter window as soon as the user clicks the custom "Filter" or "Reset" button. The window automatically hides when we click anywhere else.
How can I close the window grammatically?