Is it possible to export contents of kendo data grid to multiple sheets of Excel?
Yes, it is possible.
Setup your grid to capture excel export event
MVC:
.Events(e => e.ExcelExport("onExcelExportGrid"))
or javascript
"excelExport": onExcelExportGrid,
This javascript method will allow access to the workbook kendo will use to build excel file. This follows a very simple schema
var workbook = new kendo.ooxml.Workbook({
sheets: [
{
rows: [
{ cells: [ { value: "foo" } ] }
]
}
]
});
To prepend a new sheet, use something like
function excelPrependWorksheet(wb, worksheetName)
{
var sheet = {
"name": worksheetName,
"rows": [
{ "cells": [] }
]
}
wb["sheets"].unshift(sheet);
}
function onExcelExportGrid(e)
{
excelPrependWorksheet(e.workbook, "example");
// fill out row and cells values here.
}
Supported fields for cells, sheets, and workbook are documented at https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/ooxml/workbook.md
Related
I have to add a sheet via API. I am using sheet.best API. It works fine: I can add a sheet, but I don't know how to add sheet1, sheet2.
function addsheet() {
const ss = SpreadsheetApp.getActive();
Sheets.Spreadsheets.batchUpdate({ requests: [{ addSheet: { properties: { index: 1, title: "myBullSheet" } } }] }, "Spreadsheet id");
}
Sheets.Spreadsheets.batchUpdate
Don't forget to enable Sheets API
I'm attempting to implement local JSON data into a Tabulator table. I specifically want to display the obj.File.Name JSON element.
I can render the data into a regular table, but when I incorporate Tabulator the data doesn't render at all. I think the problem lies with the Tabulator Section that's listed in the JS Snippet, but I'm not 100% sure. I'm interested in using Tabulator because of the features it offers.
Unless I misread it, the Tabulator docs on loading data seems to be less focused on local files and more on external URLs, which is why I've come to ask about it here.
I've included a JS Fiddle that shows the HTML and the JS.
JS snippet:
import $ from 'jquery';
import JSONfile from '../../../public/JSONfile.json';
import { basename } from 'path';
var Tabulator = require('tabulator-tables');
var categories = '';
var tableRes = '';
export default class {
constructor() {
this.loadData();
this.loadTableData();
}
loadTableData() {
let tableRes = JSONfile.d.results.filter(function(val) {
return (val.FileLeafRef.trim().length > 0);
}).map(function(obj) {
return {
// "FileName": obj.FileLeafRef,
"Path": obj.EncodedAbsUrl,
"Titles": obj.File.Name
}
});
///// Tabulator Section /////
let tableData = tableRes;
let table = new Tabulator("#km-table-id", {
data:tableData,
columns:[
{title:"", field:" "},
{title:"All Templates", field:"Name"},
{title:"My Favorites", field:"faves"}
],
pagination:"local",
paginationSize:100,
placeholder:"No data available"
});
table.setData(tableData);
} // ------------------ loadTableData
} // ------------- export default class
JSON snippet:
{
"d": {
"results": [
{
"__metadata": {
...
},
"File": {
"__metadata": {
...
},
"Name": "Guide to Product IDs.docx"
},
"FileLeafRef": "Guide to Product IDs.docx",
"ResourceType": {
...
},
"results": [
{
...
}
]
},
"EncodedAbsUrl": [redacted]
},
...
...
The issue you are having is because the data is not in the format that Tabulator is expecting.
Tabulator requires an array of row data objects, based on your column definitions it is looking for this:
[
{Name:"steve", faves:"this, that, the other"},
{Name:"bob", faves:"this, that, the other"},
]
Loading local data into the table is covered in the Documentation
I have used exceljs module in nodejs for exporting json data to excel. It's working fine, but the names of headers/columns have to be predefined before adding rows i.e., columns are fixed. After addition of rows, I can't add columns dynamically.
I have tried a number of modules available through npm but all of them have the same features.
So, is there any way or module that, at the time of manipulation of json data, can create a new column and add the required row.
If someone is still looking into this problem then I have a decent solution.
Instead of creating columns, you can create a table as follows in the worksheet.
worksheet.addTable({
name: "MyTable",
ref: "A1",
headerRow: true,
totalsRow: false,
style: {
theme: null,
showRowStripes: true,
showColumnStripes: true,
},
columns: [
{ name: "EmployeeID" },
{ name: "First Name" },
],
rows: [/* Enter initial rows if you want to add*/],
});
After adding a table to the column A1 of your worksheet you can add new columns dynamically
const table = worksheet.getTable("MyTable");
table.addColumn({
name: "Column name",
});
table.commit();
I tried directly pushing the new columns to the worksheet.columns but it is not working. I did a workaround and working well for me.
Note: You need to make the track of already added columns in the worksheet to get the next empty columns by column index.
Here is an example:
let workbook = new excel.Workbook(); //creating workbook
let worksheet = workbook.addWorksheet('Records'); //creating worksheet
const columns = [];
columns.push({header: 'Id', key: '_id', width: 30});
columns.push({header: 'Name', key: 'name', width: 30});
//Set Headers to WorkSheet Header
worksheet.columns = columns;
//Now insert some records if you want
worksheet.addRow({_id: "1", name: "Mitchell Starc"});
worksheet.addRow({_id: "2", name: "Ab de Villiers"});
//Update or add dynamic columns
//Get the empty columns from worksheet. You can get the empty columns number by using `columns` array length
//For this you have to track all inserted columns in worksheet
//This will return the next empty columns
let newColumn = worksheet.getColumn(columns.length + 1);
//Set new key header and all other required properties
newColumn.key = "profession";
newColumn.header = "Profession";
newColumn.width = 30;
//Add the new column to `columns` to track the added headers
columns.push(newColumn);
//Now you can insert rows with new columns
worksheet.addRow({_id: "3", name: "MS Dhoni", profession: "Cricket"});
workbook.xlsx.writeFile("records.xlsx")
.then(function () {
console.log("file saved!");
});
Now not sure if this worked 2 years ago but this worked for me
var columns=[]
x="data1"
y="data2"
Columns.push({ header: x, key: x })
Columns.push({ header: y, key: y})
worksheet.columns = Columns
You must use a separate variable to dynamically create the array of structs for it to work. if you use worksheet.columns=[] and worksheet.columns.push(..) it will fail.
I would like to create a pdf of multiple selected rows within vue-tables-2. I have found a pdf library called pdfmake which looks great. Being new to this, I am struggling to see how I can:
bring this into a vue-tables-2 component. Do I import this in the
component?
how would I create a pdf of multiple selected table row data? I have this.checkedRows for the tableData content. How do I get this into the pdf?
I see how pdfmake has instructions to build out datatable content, but how can I make this work with vue-tables-2? pdfmake table content screenshot
If anyone knows a better pdf library for vue-tables-2 please let me know.
Here is my code so far...
<v-server-table url="/removals" :data="tableData" :columns="columns" :options="options">
<input slot="selected" slot-scope="props" type="checkbox" :checked="props.row.selected" v-model="checkedRows" :value="props.row">
<button slot="afterFilter" type="submit" #click="createPDF">Create PDF</button>
</v-server-table>
My data content is just a very simple prototype right now:
data() {
return {
tableData: [],
checkedRows: [],
columns: [
'selected',
'sku',
],
options: {
}
}
And my method...
methods: {
createPDF() {
pdfMake.createPdf(docDefinition).download('PO.pdf');
}
}
you could install pdfmake using the following command :
npm install pdfmake --save-dev
and import and use it as follow
<template>....</template>
<script>
var pdfMake = require('pdfmake/build/pdfmake.js');
var pdfFonts = require('pdfmake/build/vfs_fonts.js');
pdfMake.vfs = pdfFonts.pdfMake.vfs;
export default{
data() {
return {
tableData: [],
checkedRows: [],
columns: [
'selected',
'sku',
],
options: {
}
},
methods: {
createPDF() {
var docDefinition = {
content: [
{
table: {
headerRows: 1,
widths: [ '*', 'auto', 100, '*' ],
body: []
}
}
]
};
docDefinition.content[0].table.body.push(this.columns);
for(var i=0;i<this.checkedRows.length;i++){
docDefinition.content[0].table.body.push(Object.values(this.checkedRows[i]));
}
pdfMake.createPdf(docDefinition).download('PO.pdf');
}
}
}
I want to use JsArray with the Webix component DataTable. But I have one problem. When I use JsArray format I can’t update the data in the Webix datagrid. Unfortunately, I can see only the beginning of its data. Check the sample to understand the issue:
var array1 = [ [1,"Marie","Oslo"],[2,"John","Los Angeles"],[3,"Kate","London"] ];
var array2 = [ [4,"Martin","Manchester"],[5,"Joana","Lisbon"],[6,"Ronaldo","Barcelona"],[7,"Matthew","Portland"] ];
webix.ui({
view:"button",
label:"test new data",
click: function() {
new_data()
}
});
webix.ui({
view:"datatable",
id: "mytable",
columns:[
{id:"data0", header:"ID" },
{id:"data1", header:"Name" },
{id:"data2", header:"City" }
],
datatype: "jsarray",
data: array1
});
function new_data () {
var mytable = $$("mytable");
mytable.parse(array2);
}
After pressing the button “test new data”, 4 new empty lines appear in the table.
To solve this issue, you should specify data format in the parse command
mytable.parse(array2, "jsarray");
The component will expect the json data, by default.
I hope that it'll help you)