I have got a nested structure which looks like this example:
let structure = [{
section: '1',
title: 'First lvl title',
children: [{
section: '1.1',
title: 'Second lvl title',
children: []
}, {
section: '1.2',
title: 'Second lvl title',
children: [{
section: '1.2.1',
title: 'Third lvl title',
children: []
}, {
section: '1.2.2',
title: 'Third lvl title',
children: []
}]
}, {
section: '1.3',
title: 'Second lvl title',
children: []
}]
}, {
section: '2',
title: 'First lvl title',
children: [{
section: '2.1',
title: 'Second lvl title',
children: []
}, {
section: '2.2',
title: 'Second lvl title',
children: []
}]
}, ...other objects]
As you can see, structure is similar to the table of contents - I have got objects which represents units and each unit has own section number, title and array with subsections.
Data characteristic is that I never know how many sections and how many nested subsections I have. I need to assume that I can get something around 2 000 objects (maybe more) with different configuration. Also, I cannot predict maximum nested level and it can be different for specific sections.
I am trying to find the most optimized way to represent this structure as HTML page. I am thinking about using ng-repeat but I don't know if it is a good idea since I don't know how many deep levels I will have. Also, after generating my HTML page, I can remove one section (for example section 1) and I need to recalculate section numbers for each other section and subsection (section 2 is now section 1, subsection 2.1 is now subsection 1.1, and so on). What is the best way to handle this operation on such a big amount of data?
You'll want a recursive template, wherein it won't matter what the structure is nor how many levels deep the data go. You can use a recursive custom directive or recursive ngInclude:
<script type="text/ng-template" id="categoryTree">
{{ category.title }}
<ul ng-if="category.categories">
<li ng-repeat="category in category.categories" ng-include="'categoryTree'">
</li>
</ul>
</script>
http://benfoster.io/blog/angularjs-recursive-templates
Related
I have a structure, like this
[{
title: "Section 1",
items: [{
title: 'Dashboard',
icon: 'tachometer-alt',
route: '/dashboard',
opened: false
},
{
title: 'Appointments',
icon: 'calendar-alt',
route: '/appointments',
opened: true
},
{
title: 'Orders',
icon: 'box',
route: '/orders',
opened: false,
children: [{
title: 'Orders submenu 1',
route: '/orders/sub1',
opened: false,
children: [{
title: 'Orders submenu 1 subsubmenu 1',
route: '/orders/sub1/sub1sub1'
}]
}]
}
]
}]
These are basically sections with menu items and every menu item could contain submenus, submenus have subsubmenus, etc.
I have a toggle function, which is getting a property array. I want to negate the variable that is "marked" by this array, so when I am getting an [0, 'items', 2, 'children', 0, 'opened'] array, the expected behaviour would be that the "Orders submenu 1" has its "opened" property set to "true".
The property indexer array is alterable too, so I can tweak that a little bit, if needed.
With Ramda, i can easly get the current value with R.path([0, 'items', 1, 'opened'], menu) but how can I set it to "true"?
Jsfiddle for example: https://jsfiddle.net/hurtonypeter/1tm4wcuo/
You can make use of lenses in Ramda to achieve this.
const togglePath = (path, obj) => R.over(R.lensPath(path), R.not, obj)
togglePath([0, 'items', 1, 'opened'], menu)
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 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.
I am using the javascript library JsTree the current version to build a tree-kind structure in a web application. I would like to know how best to select a particular node within the tree once the tree is loaded.
Try using the ready.jstree event, than the jstree.select_node() method.
The ready event will occur when the tree is loaded, than you can select the node you want.
Set the state property "selected=true" for the particular node to be selected on tree load.
$('#jstree_test').jstree({
core: {
data: [
{
id: 'parent1',
parent: '#',
text: 'p1',
'state' : {
'opened' : true,
'selected' : true
}
},
{
id: 'child1',
parent: 'parent1',
text: 'c1'
},
{
id: 'child2',
parent: 'parent1',
text: 'c2'
},
{
id: 'child3',
parent: 'parent1',
text: 'c3'
}
]
}
});
JS Bin Demo Link
First of all, Im new at ExtJS. I wanted your help to let me know the best way to obtain a tree menu with n recursive items in it.
In example:
FOLDER
..FOLDER
....ITEM
....FOLDER
......ITEM
......ITEM
....FOLDER
...
Im following the best practises proposed by Sencha. I was able to do a tree menu with one level, but when trying to do it for n levels, it fails (in fact, the app works but shows infinite nodes of 1st level). Clearly the issue is the model definition of my menu item, see:
Ext.define('Dashboard.model.MenuItem',{
extend: 'Dashboard.model.AbstractMenuElement',
fields:
[
{name: 'content', type: 'string'},
{name: 'skeletonFlag', type: 'string'},
{name: 'fatherId', type: 'int'}
],
associations:
[
{type: 'hasMany', model: 'Dashboard.model.MenuItem', name: 'children', mapping: 'items'}
]
});
So this model recursively creates infinite nodes. But... do you know how should i model my menu item in order to achieve the recursive menu?
Thanks!
To display a tree-like structure in Ext JS, I think your best bet is to use Ext.model.TreeModel, Ext.model.TreeStore in conjunction with Ext.tree.Panel.
Here is an simple example to match the structure you mentioned in the question:
Ext.create('Ext.tree.Panel', {
store: Ext.create('Ext.data.TreeStore', {
root: {
text: 'Root Folder',
expanded: true,
children: [
{text: 'Folder 1', children: [
{text: 'Item 1', leaf: true}
]},
{text: 'Folder 2', expanded: true, children: [
{text: 'Item 2', leaf: true},
{text: 'Item 3', leaf: true}
]},
{text: 'Folder 3', children: []}
]
}
}),
renderTo: Ext.getBody()
});
You can view this example on Plunker.