When I try to put an json as content it does render as a whole string. So I see the json syntax in the pdf, instead of the formated. What did I miss?
var docDefinition = {
content: jsonObj,
styles: {
header: {
fontSize: 22,
bold: true
},
anotherStyle: {
italic: true,
alignment: 'right'
}
}
};
Ok. Turns out, that the array had pushed strings instead of objects. So code example is working.
Related
How can I change textbox height and width in a popup on devexpress mvc datagrid? I am using
#(Html.DevExtreme().DataGrid().Columns(c => {
c.Add().DataField("MyField").Visible(true).AllowGrouping(true);
}
I tried c.Add().DataField("Myfield").Width(100) but it is only working in datagrid; it does not work in popup element
First of all you need to know that you are treating with a Form and not with a simple grid, so you basically have to configure the form EditorOptions
So in jQuery it would be like this
$("#datagrid").dxDataGrid({ ,
"editing": {
"form": { items: [{dataField:"yourField",editorOptions:"width:100%"}]}
}
});
The previous answer is a little old and doesn't work now so I'll give an updated answer.
This would change the width for a field in the popup form:
$("#datagrid").dxDataGrid({ ,
"editing": {
"form": {
items: [{
dataField:"yourField",
editorOptions: {
width: "100%"
}
]}
}
});
Also if you wanted to have more control and use groups and set things, like height, you could use:
$("#datagrid").dxDataGrid({
editing: {
mode: "popup",
allowUpdating: true,
popup: {
showTitle: true,
title: "Message",
labelLocation: "top"
},
form: {
items: [
{
itemType: "group",
caption: "My Fields",
items: [
{
dataField: "Field1",
editorOptions: {
height: 200
}
},
{
dataField: "Field2",
editorOptions: {
value: true
}
}
]
}, {
itemType: "group",
caption: "My other fields",
items: [
{
dataField: "field3",
helpText: "Example: +1(111)111-1111"
}
]
}
]
}
}
});
Notice that with and without grouping both use the editorOptions to control each field.
I'm trying to export html table data to pdf using bootstrap(shieldUI-all.min.js). I completed but i need the pdf format with caption ie) heading in the top of the table. I don't know how to do it.
jQuery(function ($) {
$("#export_supplier_pdf").click(function () {
// parse the HTML table element having an id=exportTable
var dataSource = shield.DataSource.create({
data: "#table_supplier_master",
schema: {
type: "table",
fields: {
CODE: { type: String },
Name: { type: String },
ContactPerson: { type: String },
}
}
});
// when parsing is done, export the data to PDF
dataSource.read().then(function (data) {
var pdf = new shield.exp.PDFDocument({
author: "GBLS",
created: new Date()
});
pdf.addPage("a4", "portrait");
pdf.table(
50,
50,
data,
[
{ field: "CODE", title: "CODE", width: 200 },
{ field: "Name", title: "Name", width: 200 },
{ field: "ContactPerson", title: "ContactPerson", width: 200 }
],
{
margins: {
top: 50,
left: 50
}
}
);
pdf.saveAs({
fileName: "Supplier_master"
});
});
});
});
Or any other way to achieve the same thing???
I believe at present there is no easy way to achieve this with the PDF options:
http://www.shieldui.com/documentation/grid/javascript/api/settings/exportOptions/pdf
Another option is to simply add the required data to the grid itself, so that it is exported to the PDF document.
I am fighting with the timezone option of fullCalendar plugin. It doesn't matter what I set: none, UTC or a specific location, everything is ignored by the plugin. All given times are shown as UTC+2 (Thats my location). What i do:
First creating some events according following code:
if(!newsCalendarEvent){
var newsCalendarEvent = [];
}
newsCalendarEvent["Event_1"] = {
events: [
{
title: 'my first news',
start: '2015-08-02T17:46:00Z',
end: '2015-08-10T17:46:00Z',
className: 'Event_1'
}
],
color: '',
textColor: ''
}
Then creating the calendar and looping through these events:
newsCalendar = $('#calendar').fullCalendar({
lang: 'de',
buttonIcons: false, // show the prev/next text
weekNumbers: true,
timezone : 'none',
timeFormat: 'H(:mm)'
})
for (var key in newsCalendarEvent) {
if (newsCalendarEvent.hasOwnProperty(key)) {
newsCalendar.fullCalendar( 'addEventSource', newsCalendarEvent[key] )
}
}
Solved. The problem had nothing to do with this plugin. It has been a qustion of timesetting in my php code.
I'm doing a rails app and was able to get chartkick working but customizing it is a bit of a pain in the butt. I'm trying to customize the tooltip with the Google chart API but I can't seem to figure out. I just want to be able to change the text, "Value".
Could someone put me in the right direction.
Here is my code:
<%=
column_chart [
["Strongly Disagree", p[1]],
["Disagree", p[2]],
["Neutral", p[3]],
["Agree", p[4]],
["Strongly Agree", p[5]]
],
height: "220px",
library: {
width: 665,
fontName: "Helvetica Neue",
colors: ["#29abe2"],
tooltip: {
textStyle: {
color: "#333333"
}
},
bar: {
groupWidth: "50%"
},
vAxis: {
title: "Everyone",
titleTextStyle: {
italic: false,
color: '#777'
},
gridlines: {
color: "#eeeeee"
},
viewWindow: {
max: m
}
}
}
%>
The chartkick documentation is sparse, but if this system works the way I suspect it does, then you need to add an array of column headers to the start of your data, eg:
[
["Label for column 0", "Label for column 1"],
["Strongly Disagree", p[1]],
["Disagree", p[2]],
["Neutral", p[3]],
["Agree", p[4]],
["Strongly Agree", p[5]]
]
I am having an issuing changing the title dynamically in a chart. I am following the workaround here to change the chart title in such a way that the change is reflected when exporting the chart. This workaround is referenced in the bug report here. However, when you click the "Set Title" twice in the workaround example the chart tile loses its formatting. Is there any way to work around this?
chart.setTitle( { text: 'Head Count Terminations' }, { text: 'Sales' } );
chart.options.title = {
text: 'Head Count Terminations'
};
chart.options.subtitle = {
text: 'Sales'
}
Thanks in advance.
It probably loses its formatting because the entire title object is replaced. What about only setting the text property?
chart.setTitle( { text: 'Head Count Terminations' }, { text: 'Sales' } );
chart.options.title.text = 'Head Count Terminations';
chart.options.subtitle.text = 'Sales';
You can avoid that issue, by overwriting exportin buttons and options for export.
Example: http://jsfiddle.net/HvHVU/
Function:
function exportActualChart() {
this.exportChart({}, {
title: {
text: this.title.text
},
subtitle: {
text: this.subtitle.text
}
});
}
Chart options
exporting: {
buttons: {
exportButton: {
menuItems: [{
text: 'Standard export',
onclick: function () {
this.exportChart();
}
}, {
text: 'With new title',
onclick: exportActualChart
},
null,
null]
}
}
}