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'}]
]
Related
I have a grid, In that grid when I expand the row, there is another set of data to be displayed. I want those grid column to be dynamic. Based on my json data I want to push data in to column. But here When I am giving method, the debugger is not going there. Can anybody explain how to load dynamic column in extJS widget column.
Here is my code
Ext.define('myApp.view.base.grid.Window', {
extend: 'Ext.window.Window',
alias: 'widget.win',
title: 'my window',
height: 500,
width: 800,
layout: 'fit',
items: [{
xtype: 'grid',
columns: [{
text: 'Col 1',
dataIndex: 'col1',
flex: 1,
},{
text: 'col2',
dataIndex: 'col2',
flex: 1
}],
}],
plugins: [{
ptype: 'rowwidget',
widget: {
xtype: 'grid',
columns:[]//this.createColumn() // This columns i want to load dynamically.
}
}]
});
To add columns dynamically to the plugin, You have to push the columns config in your plugins column array.
grid.getPlugin().config.widget.columns.push({
text : 'Item',
dataIndex : 'item',
flex : 1
}, {
text : 'Description',
dataIndex : 'desc',
flex : 2
});
Created a fiddle for you here
ExtJS 5
I am using ExtJs 5 Grid. I have a button, when i click on it, age column will be hidden by using below line.
Ext.getCmp('grdSample').columnManager.columns[2].setVisible(false);
I am using listener - beforecellclick just to get the index of clicked column. But when i click on last column (last column = next to hidden column) it still show original index of column. Hidden column still getting their position in grid.
In CSS - If we use visibility: hidden then it hides the component or tag but still take space in web page but if use display: none, it hides as well as it doesn't take space in web page.
I want hidden column should not take space while getting indexing of current clicked column. (Without using CSS).
Can anyone help me to sort this out.
Ext.onReady(function () {
var studentStore = new Ext.data.JsonStore({
autoLoad: true,
pageSize: 10,
fields: ['Name', 'Age', 'Fee'],
data: {
items: [
{ "Name": 'Puneet', "Age": '25', "Fee": '1000' },
{ "Name": 'Ankit', "Age": '23', "Fee": '2000' },
{ "Name": 'Rahul', "Age": '24', "Fee": '3000' }
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
var window = new Ext.Window({
id: 'grdWindow',
width: 400,
title: 'Grid Samples',
items: [
{
xtype: 'panel',
layout: 'fit',
renderTo: Ext.getBody(),
items: [
{
xtype: 'button',
text: 'hide age column',
handler: function () {
Ext.getCmp('grdSample').columnManager.columns[2].setVisible(false);
}
},
{
xtype: 'grid',
id: 'grdSample',
height: 300,
selModel: Ext.create('Ext.selection.CheckboxModel',
{
}),
store: studentStore,
columns: [
{
header: 'Name',
dataIndex: 'Name',
},
{
header: 'Age',
dataIndex: 'Age',
},
{
header: 'Fee',
dataIndex: 'Fee'
}
],
listeners:{
beforecellclick: function (el, td, cellIndex, record, tr, rowIndex, e, eOpts) {
debugger;
}
},
dockedItems:
[
{
xtype: 'pagingtoolbar',
store:studentStore,
dock:'bottom',
displayInfo:true
}
]
}
]
}
]
});
Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{text: "Name", flex : 1, dataIndex: 'Name'},
{text: "Age", flex : 1, dataIndex: 'Age', id : 'colAge'},
{text: "Fee", flex : 1, dataIndex: 'Fee'}
],
listeners : {
'cellclick' : function (me, td, cellIndex, record, tr, rowIndex, e, eOpts ) {
me.panel.headerCt.getHeaderAtIndex(cellIndex).dataIndex)}} // here you get the correct value :)
});
Here is working Fiddle : http://jsfiddle.net/Xpe9V/1623/
Perhaps an overkill, but you could create an array of your columns
var columns= [{dataIndex: 'Name', header: 'Name'}, { dataIndex:'Age', header:
'Age' }, { dataIndex:'Fee', header: 'Fee'}]
2) then remove a column from array by index using javascript splice method
and reconfigure your grid
myGrid.reconfigure(myStore, columns);
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.
I cannot flex columns, i have a grid, I used all methods but they don't work
var cols = [];
cols.push(Ext.create('Ext.grid.column.Column', {
text: 'Valuta from', flex:1, columns: [
Ext.create('Ext.grid.column.Column', { text: 'Valuta', dataIndex: 'ratesValutaFromName', flex:2 }),
Ext.create('Ext.grid.column.Column', { text: 'Amount', dataIndex: 'ratesValutaFromAmount', flex:2 })
],
}));
cols.push(Ext.create('Ext.grid.column.Column', {
text: 'Valuta To', flex:1, columns: [
Ext.create('Ext.grid.column.Column', { text: 'Valuta', dataIndex: 'ratesValutaToName', flex:2 }),
Ext.create('Ext.grid.column.Column', { text: 'Amount', dataIndex: 'ratesValutaToAmount', flex:2 })
],
}));` and flex dont't work
Maybe you need do something like this.
var myColumns = new Array({
text : 'field One',
dataIndex : 'fieldOne',
flex : 1
},
{
text : 'Field Two',
dataIndex : 'fieldTwo',
flex : 2
},
{
text : 'Field Three',
dataIndex : 'fieldThree',
flex : 3
}
),
grid = new Ext.grid.Panel({
title : 'Testing',
width : 400,
height : 400,
columns : myColumns,
store : yourStore,
renderTo : Ext.getBody()
//Or add this grid to another component like
// a tab panel
});
This is an example. You can see fieldOne, fieldTwo and fieldThree the flex property work with the coefficient between all flex properties in different columns.
fieldOne is more small that fieldTwo.
fieldTwo is more small that fieldThree.
fieldThree is more bigger that fieldOne and fieldTwo.
I have this grid and form panels. I want to add a grid of data into the form panel and still have buttons from the form panel.
myGrid= Ext.create('Ext.grid.Panel',{
layout: {
type: 'fit'
},
id: 'gridId',
title: null,
store: myDataStore,
columns: [{
header: 'header 1',
dataIndex: 'index_1',
width: 120
}, {
header: 'header 2',
dataIndex: 'index_2',
width: 120
}, {
header: 'header 3',
dataIndex: 'index_3',
width: 120
}],
stripeRows: true
})
formPanel= Ext.create('Ext.form.Panel',{
id:'panelId',
items:[myGrid],
buttons: [{
// cancel, save, other buttons
}]
})
But I get this error
HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy
what do I do wrong?
You forgot semicolons after your Ext.create() config.
Seems to work just fine here. I made a fiddle
http://jsfiddle.net/WGgR8/1/