Develop Reference

pdfmake: Align table inside the column

No matter what I tried, I'm not able to align table inside of second column.
var docDefinition = {
content: [
{
columns: [
{ text: 'Column 1',
},
[
{
text: 'Column 2',
alignment: 'right' // WORKS
},
{
alignment: 'right', // NO EFFECT
table: {
alignment: 'right', // NO EFFECT
body: [
['Date', '07/21/2017' ],
['Representative', 'Test' ]
]
}
}
]
]
}
]
};
pdfMake.createPdf(docDefinition).download();
https://jsfiddle.net/8kqnrduw/
I'm looking for any possible workarounds.
Please help
Expected result:

How do you think about this idea?
{
alignment: 'right',
columns: [
{
stack: [
{ table: {....}}
]
}
]
}

Your problem is not related to alignment, it is about nested columns and column widths. Alignment in pdfmake is used for aligning texts, just like you used alignment for text: 'Column 2' and alignment for every text inside the table cells.
In your case, you created two columns with being '*' star-width (fills remaining width) each, which is the default column width. So, you have a 50% width column with text: 'Column 1' and 50% width column with text: 'Column 2' and a table (which is not exactly what you desire) below text: 'Column 2'.
So, what you should do is you need to create a nested columns structure within the section just below second column text: 'Column 2' which is already half width of the page. This nested columns structure will involve two columns; one for the table, having width exactly as wide as the elements inside the table, and another column with empty content just to keep the table away in its proper place.
The working code for your expected result is below. You may also see the screenshot here for the code and its output at the pfdmake playground.
var docDefinition = {
content: [
{
columns: [
{
text: 'Column 1',
},
[
{
text: 'Column 2',
alignment: 'right' // Aligns 'Column 2' text to right
},
{
columns: [
{
text:'',
width: '*'
},
{
table: {
body: [
['Date', '07/21/2017' ],
['Representative', 'Test' ]
]
},
alignment: 'right', // Optional, for body texts
width: 'auto' // Changes width of the table
}
]
}
]
]
}
]
}

Try to give like this:
body: [
[{text: 'Date', alignment: 'right'}, {text: '07/21/2017', alignment: 'right'}],
[{text: 'Representative', alignment: 'right'}, {text: 'Test', alignment: 'right'}]
]

Iterating over rows in google charts

I am working on a bar chart, and for some rows I have a particular column which contains link, now on ready event I want to iterate over all the rows to find out what is the link, if link is type a I want to set element color red, otherwise not.
cols: [
{
id: 'first value',
label: 'name',
type: 'string'
},
{
id: 'second value',
label: 'type',
type: 'number'
},
],
rows: [
{
c: [
{
v: 'apple'
},
{
v: 24,
link : 'type A or type B '
},
]
},
]
Any help about this ?

Using KnockoutJS, how to bind data to 2 different <select> tags from the same view model

I have 2 select tags on my view.html like so
<select id="first" data-bind="options: firstDropdownOptions, optionsText: 'title', value: value"></select>
<select id="second" data-bind="options: secondDropdownOptions, optionsText: 'title', value: value"></select>
And something like this in my viewmodel.js
var firstDropdownOptions = ko.observableArray([
{ value: -1, title: 'Select Type' },
{ value: 111, title: 'Option 1' },
{ value: 222, title: 'Option 2' },
{ value: 333, title: 'Option 3' }
]);
var secondDropdownOptions = ko.observableArray([
{ value: -1, title: 'Select Type' },
{ value: 1, title: 'Option New 1' },
{ value: 2, title: 'Option New 2' },
{ value: 3, title: 'Option New 3' }
]);
I am unable to bind data to both my <select> tags. Only the first <select> tag works properly. Also, if I move the #second <select> tag before the #first <select>, then the #second shows correct data, but not the #first <select>.
How do I bind data to both my <select> tags?

In both of your bindings you are using value: value. This means that values of both select elements are bound to the same model property, called value. You are using different arrays with different objects, so single value cannot function correctly. Try using two different properties for storing values, for example:
var vm = {
firstDropdownOptions: ko.observableArray([
{ value: -1, title: 'Select Type' },
{ value: 111, title: 'Option 1' },
{ value: 222, title: 'Option 2' },
{ value: 333, title: 'Option 3' }
]),
secondDropdownOptions: ko.observableArray([
{ value: -1, title: 'Select Type' },
{ value: 1, title: 'Option New 1' },
{ value: 2, title: 'Option New 2' },
{ value: 3, title: 'Option New 3' }
]),
// property for storing selected value of firstDropdownOptions:
selectedFirstOptionValue: ko.observable(''),
// property for storing selected value of secondDropdownOptions:
selectedSecondOptionValue: ko.observable('')
};
ko.applyBindings(vm);
And in your HTML bind properties selectedFirstOptionValue and selectedSecondOptionValue respectively (properties will contain objects from your arrays):
<select id="first" data-bind="options: firstDropdownOptions, optionsText: 'title', value: selectedFirstOptionValue"></select>
<select id="second" data-bind="options: secondDropdownOptions, optionsText: 'title', value: selectedSecondOptionValue"></select>
Here is a working jsFiddle

As an alternate to dotnetom's answer, this worked for me too.
Instead of using different properties for storing the selected values in my viewmodel.js, I used firstDropdownOptions().value and firstDropdownOptions().value in view.html instead.
view.html
<select data-bind="options: firstDropdownOptions, optionsText: 'title', value: firstDropdownOptions().value"></select>
<select data-bind="options: secondDropdownOptions, optionsText: 'title', value: secondDropdownOptions().value"></select>
viewmodel.js
var vm = {
firstDropdownOptions: ko.observableArray([
{ value: -1, title: 'Select Type' },
{ value: 111, title: 'Option 1' },
{ value: 222, title: 'Option 2' },
{ value: 333, title: 'Option 3' }
]),
secondDropdownOptions: ko.observableArray([
{ value: -1, title: 'Select Type' },
{ value: 1, title: 'Option New 1' },
{ value: 2, title: 'Option New 2' },
{ value: 3, title: 'Option New 3' }
])
};
ko.applyBindings(vm);
Here's the fiddle.

Kendo grid hierarchy data not displaying

I have an MVVM application using Kendo Grid, and I want to display hierarchy (nested grid). I am trying to replicate this example but I am not able to display the hierarchy data. How can I get the hierarchy records to display?
cshtml code:
<div id="custOrderGrid"
data-role="grid"
data-resizable="false"
data-navigatable="true"
data-editable="true"
data-pageable="false"
data-scrollable="true"
onscroll="true"
data-detail-template="child-template"
data-columns="[
{ 'field': 'OrderID', 'title': '<b>Order #', 'width': 65 },
{ 'field': 'LineNo', 'title': '<b>Line Number', 'width': 65 },
{ 'field': 'ItemNo', 'title': '<b>Item Number', 'width': 65 },
{ 'field': 'Desc', 'title': '<b>Description', 'width': 150 }
]"
data-bind="source: orderSearchResults"
style="height: 55%">
</div>
<script id="child-template" type="text/x-kendo-template">
<div data-role="grid"
data-bind="source: obj2"
data-columns="[
{ field: 'name' },
{ field: 'oid' }
]"></div>
</script>
typescript code:
orderSearchResults = new kendo.data.DataSource({
schema: {
model: {
id: "OrderID",
fields: {
LineNo: { type: "string" },
ItemNo: { type: "string" },
Description: { type: "string" }
}
}
},
data: [
{
OrderID: "L44ZX4",
LineNo: "15",
ItemNo: "*X1WCJH",
Description: "CDF9X2XSB",
obj2: [
{
name: 'a1',
oid: 1
},
{
name: 'b1',
oid: 2
},
{
name: 'c1',
oid: 3
}
]
}
]
});
The yellow highlighted section is where the Hierarchy data should be displayed.

Here's a link to what I've tried.
I thought the hierarchy grid wasn't created but actually, it is created nested within the main grid. Your screenshot doesn't display the right part of the grid, but you probably have 2 scroll arrows on the right side of the grid that would allow you to see the sub grid content.
Removing the style="height: 55%" fixed the problem.
N.B. I'm not sure if I reproduced you problem correctly... in your screen shoot you do have another main record displayed so the subgrid would normally be displayed between those 2 main records. If the height style was the reel problem, then the second main record would also be hidden. If I'm wrong, feel free to update my example to reproduce your issue.

Third row as table header in pdfMAke pdf creator engine

I just went through this playground of pdfMake pdf creator engine and it nicely explains how to print a table using pdfMAke as,
table: {
headerRows: 1,
body: [
[{ text: 'Header 1', style: 'tableHeader' }, { text: 'Header 2', style: 'tableHeader'}, { text: 'Header 3', style: 'tableHeader' }],
[ 'Sample value 1', 'Sample value 2', 'Sample value 3' ],
[ 'Sample value 1', 'Sample value 2', 'Sample value 3' ],
[ 'Sample value 1', 'Sample value 2', 'Sample value 3' ],
[ 'Sample value 1', 'Sample value 2', 'Sample value 3' ],
[ 'Sample value 1', 'Sample value 2', 'Sample value 3' ],
]
},
where headerRows: 1 will consider the first row as table header. Is there any ways to consider the third row as header using this engine so that the third row will repeat as header in the next consecutive pages of pdf document.
Also is it possible to draw borders around columns which drawn below.
columns: [
{ text: 'First Column goes here.'},
{ text: 'Second column goes here.'},
{ text: 'Third column goes here.' }
]

late answer but unfortunately that's impossible, only the first row can be used as header.
As a workaround, I would suggest building tables by yourself, allowing you to repeat any line you want. It's more constraining tho, since you need to handle the overflows manually to insure the repetition of the table on each page.