Good morning, guys, I'm working on vue js with vuetify it turns out that when I put this to generate a pdf to print it through jspdf and autotable jspdf I get the following in console
this is my code in vue.js
createPdf() {
var doc = new jsPDF()
var rows =[];
var columns= [
{ header: 'Code', dataKey: 'code' },
{ header: 'Name', dataKey: 'namearticle' },
{ header: 'Category', dataKey: 'category' },
];
this.articles.map(function(x){
rows.push({code:x.code,namearticle:x.namearticle,category:x.category});
});
doc.autoTable(columns,rows)
doc.save("table.pdf");
}
this is in methods in vue.js but this code works, but this comes out in console
Use of deprecated autoTable initiation
Good morning, I have solved the old code issue as follows
createPdf() {
var doc = new jsPDF()
var rows =[];
this.articles.map(function(x){
rows.push({code:x.code,namearticle:x.namearticle,category:x.category,stock:x.stock,price_sale:x.price_sale,numberstatate:x.numberstatate ? 'Activate' : 'Inactivate'});
});
doc.autoTable({
columns:[
{ header: 'Code', dataKey: 'code' },
{ header: 'Name', dataKey: 'namearticle' },
{ header: 'Category', dataKey: 'category' },
{ header: 'Stock', dataKey: 'stock' },
{ header: 'Price Sale', dataKey: 'price_sale' },
{ header: 'State', dataKey: 'numberstatate' },
],
body:rows,
margin:{top:35},
didDrawPage:function(data){
doc.text("TOLIST ARTICLES", 20, 30);
}})
doc.save("table.pdf");
}
Really helpfull, i had something like:
array.forEach(element => Rows.push(
element.Name));
And in my PDF i was seeing the first letter of "element.Name" instead of the full string. So i forget to map it correctly with the column.
array.forEach(element => Rows.push(
{accountName:element.Name}));
Related
I am new to angular 7 and want to implement datatable in angular 7.
I displayed data from api, and I triggered event from the table cell.
now I want to get data from the cell. but I get the data is null.
This is a component to display data from rest api.
ngOnInit() {
this.dataService.getMeterReading().subscribe(tourData => {
this.dtOptions = {
bLengthChange : false,
bInfo: false,
data: tourData,
columns: [
{
title: 'Unit',
data: 'UnitID'
},
{
title: 'Latitude',
data: 'DeviceID'
},
{
title: 'Logitude',
data: 'DeviceID'
},
{
title: 'Remarks',
data: 'DeviceID'
},
{
title: 'Image',
data: 'Image',
render: (data) => {
return data ? `<i class="fa fa-picture-o ImageMeterReading" data-blob="${data.data}" aria-hidden="true"></i>` : '';
}
}
]
};
$(document).on('click', 'i.ImageMeterReading', ($event) => {
let blob = $($event).data('blob');
});
this.dataTable = $(this.table.nativeElement);
this.dataTable.DataTable(this.dtOptions);
this.loading = false;
}
}
I expect to get BLOB data from the table cell.
but the actual output is null now.
Using the ag-grid table i'm trying to use cellRender to route an entire table row to the right page. It's a bit unclear how to to this with nuxt-link.
The path the ag-grid row(cell) should link to is the following:
<nuxt-link :to="'users/' + id + '/overview' ">
For now I created a cellRender with the route name based on the info I found so far.
this.columnDefs = [
{
headerName: "ID",
field: "id",
cellRenderer: params => {
const route = {
name: "users", // This path should redirect to <nuxt-link :to="'users/' + id + '/overview' ">
params: { id: params.value }
};
const link = document.createElement("a");
link.href = this.$router.resolve(route).href;
link.innerText = params.value;
link.addEventListener("click", e => {
e.preventDefault();
this.$router.push(route);
});
return link;
}
},
{
headerName: "Naam",
field: "naam",
checkboxSelection: true,
sortable: true,
headerCheckboxSelection: true
},
{ headerName: "Type", field: "type", sortable: true },
{ headerName: "Status", field: "status", sortable: true },
{ headerName: "Laatste Contact", field: "contact", sortable: true },
];
What would be the best way to implement these kind of links for an entire row?
Thanks in advance!
In this case, we can just simulate the HTML as nuxt-link does:
cellRenderer: (params) => {
return `${params.value}`;
}
With the we don't need to care about adding history to the route, the "bad" thing it's if you change this route you need also to update here.
I was able to programmaticly link to another page while clicking a row. But the parameters are still visible in my link in the browser.
What I did:
this.gridOptions.onRowClicked = params => {
this.$router.push({
path: "/users/${params.data.id}/overview"
});
};
This gives me the following url in the browser
users/$%7Bparams.data.id%7D/overview
Using this as an example how do I control the format of the values in the cells?
for example, how would I format the Extn. column to read 5,407 or 54.07?
Name Position Office Extn. Start date Salary
Airi Satou Accountant Tokyo 5407 $2008/11/28 $162,700
I have been searching here and here but I can't quite work it out. can anyone advise?
I have tried something like this, but am having no success:
$(document).ready(function() {
$('#example').DataTable( {
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" }
],
"aoColumnDefs": [ {
"aTargets": [ 4 ],
"mRender": function (data, type, full) {
//var formmatedvalue=data.replace("TEST")
//return formmatedvalue;
return '$'+ data;
}
}]
} );
} );
Use the columns.render option.
Either with the built-in helper, to get a thousand seperator (5,407):
{
title: "Extn.",
render: $.fn.dataTable.render.number(',', '.', 0, '')
},
JSFiddle example
Or do it yourself with a custom function (54.07):
{
title: "Extn.", render: function (data, type, row) {
return data / 100;
}
},
JSFiddle example
I have an empty grid, with the columns defined as below:
var json = { };
json.col1 = { label: 'Select', selector: 'checkbox' };
json.bndryName = "Boundary Name";
return json;
The boundary grid is initialized as below and the data/collection is loaded on a button click,and when I set allowSelectAll:true, I donot see the the header column rendered with a checkbox to select All. Please advise.
this._bndryGrid = new (declare([OnDemandGrid, Selection,Selector,ColumnResizer]))({
selectionMode: "multiple",
columns: columns,
class:'grid',
loadingMessage: "Loading data...",
noDataMessage: "No results found."
}, this.ap);
I'm not sure you've provided enough to go on here (and your grid doesn't even include allowSelectAll: true), but here is an example that works:
require({
packages: [
{
name: 'dgrid',
location: '//cdn.rawgit.com/SitePen/dgrid/v1.0.0'
},
{
name: 'dstore',
location: '//cdn.rawgit.com/SitePen/dstore/v1.1.1'
}
]
}, [
'dojo/_base/declare',
'dgrid/OnDemandGrid',
'dgrid/Selection',
'dgrid/Selector',
'dstore/Memory',
'dojo/domReady!'
], function(declare, OnDemandGrid, Selection, Selector, Memory) {
var data = [
{ id: 1, name: 'Peter' },
{ id: 2, name: 'Paul' },
{ id: 3, name: 'Mary' }
];
var store = new Memory({ data: data });
var options = {
allowSelectAll: true,
collection: store,
columns: [
{ field: 'id', label: '', selector: 'checkbox' },
{ field: 'name', label: 'Name' }
]
};
new (declare([ OnDemandGrid, Selection, Selector ]))(options, 'gridcontainer');
});
I am trying to fetch data from store.and i want to use it on my table layout in an extjs panel but always get an empty string though the data is printed in the console. Any pointers would be much appreciated.
<code>
Ext.onReady(function(){
Ext.define('Account', {
extend: 'Ext.data.Model',
fields: [
'id',
'name',
'nooflicenses'
]
});
var store = Ext.create('Ext.data.Store', {
model: 'Account',
autoSync: true,
proxy: {
type: 'ajax',
api: {
read: "accounts"
},
reader: {
type: 'json',
root: 'Account',
successProperty: 'success',
messageProperty: 'message',
totalProperty: 'results',
idProperty: 'id'
},
listeners: {
exception: function(proxy, type, action, o, result, records) {
if (type = 'remote') {
Ext.Msg.alert("Could not ");
} else if (type = 'response') {
Ext.Msg.alert("Could not " + action, "Server's response could not be decoded");
} else {
Ext.Msg.alert("Store sync failed", "Unknown error");}
}
}//end of listeners
}//end of proxy
});
store.load();
store.on('load', function(store, records) {
for (var i = 0; i < records.length; i++) {
console.log(store.data.items[0].data['name']); //data printed successfully here
console.log(store.getProxy().getReader().rawData);
console.log(store);
};
});
function syncStore(rowEditing, changes, r, rowIndex) {
store.save();
}
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false,
saveText: 'Save',
listeners: {
afteredit: syncStore
}
});
var grid = Ext.create('Ext.panel.Panel', {
title: 'Table Layout',
width: 500,
height:'30%',
store: store,
layout: {
type: 'table',
// The total column count must be specified here
columns: 2,
tableAttrs: {
style: {
width: '100%',
height:'100%'
}
},
tdAttrs: {
style: {
height:'10%'
}
}
},
defaults: {
// applied to each contained panel
bodyStyle:'border:0px;',
xtype:'displayfield',
labelWidth: 120
},
items: [{
fieldLabel: 'My Field1',
name :'nooflicenses',
value: store //How to get the data here
//bodyStyle:'background-color:red;'
},{
fieldLabel: 'My Field',
name:'name',
value:'name'
}],
renderTo: document.getElementById("grid1")
});
});
</code>
Ext.grid.Panel control is totally configurable so it allows to hide different parts of the grid. In our case the way to hide a headers is adding property: hideHeaders:
Ext.create("Ext.grid.Panel", {
hideHeaders: true,
columns: [ ... ],
... other options ...
});
If you still would like to adopt another solution, the more complex solution I have think about is the use of XTemplate for building table dynamically. (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.XTemplate). In this approach you write the template describing how the table will be built.
Otherwise, I still recommend you to deal with the former solution rather than the latter one. The latter approach opposes the basic idea of Sencha ExtJS: use ExtJS library's widgets, customize them in the most flexible way and then automate them by creating store and model.
The most "native" way to show data is by use Ext.grid.Panel.
Example:
Ext.application({
name: 'LearnExample',
launch: function() {
//Create Store
Ext.create ('Ext.data.Store', {
storeId: 'example1',
fields: ['name','email'],
autoLoad: true,
data: [
{name: 'Ed', email: 'ed#sencha.com'},
{name: 'Tommy', email: 'tommy#sencha.com'}
]
});
Ext.create ('Ext.grid.Panel', {
title: 'example1',
store: Ext.data.StoreManager.lookup('example1'),
columns: [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}
],
renderTo: Ext.getBody()
});
}
});
The grid can be configured in the way it mostly customized for user's needs.
If you have a specific reason why to use Ext.panel.Panel with a table layout, you can use XTemplate, but it more complicate to bind the data.