I am using getOrgChart and would like to know if it is possible to have multiple root elements. For example, I have two managers that have people below them. Instead of listing their common manager, I would like to display the two managers and their staff independently.
Yes it is possible, set the parentId to null
Run the code snippet bellow
var orgchart = new getOrgChart(document.getElementById("people"),{
enableEdit: false,
dataSource: [
{ id: 1, parentId: null, Name: "Ivan"},
{ id: 2, parentId: 1, Name: "Ava Field"},
{ id: 3, parentId: 1, Name: "Evie Johnson"},
{ id: 4, parentId: null, Name: "Amber McKenzie"},
{ id: 5, parentId: 4, Name: "Dragan"},
{ id: 6, parentId: 4, Name: "Petkan"}
]
});
html, body {margin: 0px; padding: 0px;height: 100%; overflow: hidden; }
#people {width: 100%;height: 100%; }
<link href="http://www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.css" rel="stylesheet"/>
<script src="http://www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.js"></script>
<div id="people"></div>
Related
I have a very large json file with an error that I need to fix.
{
id: 1,
name: 'Human',
type: {
id: { <==== here
id: 2,
name: 'Body',
image: 'body.png',
}, <==== here
},
},
I need to remove this id: { and the closing brace } lines inside type. How to remove them to make the object look like this?
{
id: 1,
name: 'Human',
type: {
id: 1,
name: 'Body',
image: 'body.png',
},
},
Hi I want to build toggle box which have three columns in a row like below.
the dummy data looks like below
export const topicDummy: TopicData =
[
{
id: 1,
name: '넷플릭스',
url: 'netflix'
},
{
id: 2,
name: '어도비',
url: 'adobe'
},
{
id: 3,
name: '왓챠',
url: 'watcha'
},
{
id: 4,
name: '방돌이/방순이',
url: 'roommate'
},
{
id: 5,
name: '신문구독',
url: 'newspaper'
},
{
id: 6,
name: '공동구매',
url: 'share'
},
{
id: 7,
name: 'KTX',
url: 'train'
},
{
id: 8,
name: '기타',
url: 'etc'
},
]
To achieve this,
I built function which return jsx elements.
But I don't want to build function every times when I want to build box like this.
how can I do with this?
With a little bit of styleing this will look just like the one in your image. It's written in JavaScript not TypeScript, but i'm pretty sure you know how to change that. (I never used TypeScript).
If you want this not to re-render each time you should probably read the documentation of React.memo().
const ToggleMenuBox = ({ goToLink }) => topicDummy.map(item =>
<div key={item.id} onClick={goToLink(item.url)} style={styles.element}>
{item.name}
</div>
)
export default () => {
const goToLink = url => () => {
console.log("Redirecting to", url)
}
return (
<div style={styles.root}>
<ToggleMenuBox goToLink={goToLink}/>
</div>
)
}
const styles = {
root: {
display: 'flex',
flexDirection: 'row',
width: 'calc(100% - 40px)',
backgroundColor: 'gray',
flexWrap: 'wrap',
borderRadius: 10,
padding: 5,
margin: '0 auto',
},
element: {
width: '33%',
textAlign: 'center',
cursor: 'pointer'
}
}
I have two variables having json data as below.
var json1=
[{ name: 'AAA', id: 100},
{ name: 'BBB', id: 100 },
{ name: 'CCC', id: 101},
{ name: 'DDD', id: 102} ]
var json2=
[ { name: 'EEE', id: 101}
]
I need get combination of both variables as below.
var jsonCombined=
[{ name: 'AAA', id: 100},
{ name: 'BBB', id: 100 },
{ name: 'CCC', id: 101},
{ name: 'EEE', id: 101},
{ name: 'DDD', id: 102} ]
I tried to concatenate ,but it added to the last position.
Any help willbe appreciated.
Method one
If you know that json1 is already sorted by id values then you could iterate through the objects in json2 and use the .splice method to insert them.
var json1=
[{ name: 'AAA', id: 100},
{ name: 'BBB', id: 100 },
{ name: 'CCC', id: 101},
{ name: 'DDD', id: 102} ]
var json2=
[ { name: 'EEE', id: 101}
]
var jsonCombined = json1.slice(); //make a copy of json1
for (let obj of json2) {
for (let i = 0; i < jsonCombined.length; i++) {
if (jsonCombined[i]['id'] == obj['id']) {
jsonCombined.splice(i + 1, 0, obj);
break;
}
}
}
console.log(jsonCombined);
Method two
On the other hand, if you do not know that json1 is sorted then you can just combine the two json arrays and sort the objects based on their ids.
var json1=
[{ name: 'AAA', id: 100},
{ name: 'BBB', id: 100 },
{ name: 'CCC', id: 101},
{ name: 'DDD', id: 102} ]
var json2=
[ { name: 'EEE', id: 101}
]
var jsonCombined = json1.concat(json2).sort((a,b) => a['id'] > b['id'] ? 1 : -1);
console.log(jsonCombined);
try this
var combinedjson = [...json1, ...json2].sort((a, b) => a.id > b.id ? 1 : -1);
I have a JSON with product items with a code, name and quantity. Sometimes items are duplicated (same code and name, different quantity). I'd like to sum the quantity of them in a single one.
Ex:
FROM
{ items: [{ code: 1, name: 'A', quantity: 2.0 }, { code: 1, name: 'A', quantity: 3.0 }, { code: 2, name: 'B', quantity: 4.0 }] }
TO
{ items: [{ code: 1, name: 'A', quantity: 5.0 }, { code: 2, name: 'B', quantity: 4.0 }] }
This should work:
items_hash = { items: [{ code: 1, name: 'A', quantity: 2.0 }, { code: 1, name: 'A', quantity: 3.0 }, { code: 2, name: 'B', quantity: 4.0 }] }
items_hash[:items] = items_hash[:items].each_with_object([]) do |item, collected_items|
if item_in_collected_items = collected_items.find { |i| i[:code] == item[:code] }
item_in_collected_items[:quantity] += item[:quantity]
else
collected_items << item
end
end
p items_hash
#=> { items: [{ code: 1, name: 'A', quantity: 5.0 }, { code: 2, name: 'B', quantity: 4.0 }] }
Code
def group_em(h)
h.transform_values do |a|
a.each_with_object({}) do |g,h|
h.update([g[:code], g[:name]]=>g) do |_,o,n|
g.merge(quantity: o[:quantity] + n[:quantity])
end
end.values
end
end
Examples
h = { items: [{ code: 1, name: 'A', quantity: 2.0 },
{ code: 1, name: 'A', quantity: 3.0 },
{ code: 2, name: 'B', quantity: 4.0 }] }
group_em(h)
#=> { items: [{ code: 1, name: 'A', quantity: 5.0 },
# { code: 2, name: 'B', quantity: 4.0 }] }
h = { items: [{ code: 1, name: 'A', quantity: 2.0 },
{ code: 1, name: 'A', quantity: 3.0 },
{ code: 1, name: 'C', quantity: 6.0 },
{ code: 2, name: 'B', quantity: 4.0 }] }
group_em(h)
#=> {:items=>[{:code=>1, :name=>"A", :quantity=>5.0},
# {:code=>1, :name=>"C", :quantity=>6.0},
# {:code=>2, :name=>"B", :quantity=>4.0}]}
h = { items: [{ code: 1, name: 'A', quantity: 2.0 },
{ code: 1, name: 'A', quantity: 3.0 },
{ code: 1, name: 'C', quantity: 6.0 },
{ code: 2, name: 'B', quantity: 4.0 }],
returns: [{ code: 2, name: 'B', quantity: 1.0 },
{ code: 1, name: 'A', quantity: 3.0 },
{ code: 1, name: 'C', quantity: 1.0 },
{ code: 2, name: 'B', quantity: 2.0 }]
}
group_em(h)
#=> {:items=>[{:code=>1, :name=>"A", :quantity=>5.0},
# {:code=>1, :name=>"C", :quantity=>6.0},
# {:code=>2, :name=>"B", :quantity=>4.0}],
# :returns=>[{:code=>2, :name=>"B", :quantity=>3.0},
# {:code=>1, :name=>"A", :quantity=>3.0},
# {:code=>1, :name=>"C", :quantity=>1.0}]}
Explanation
See Hash#transform_values, Enumerable#each_with_object, Hash#merge and the form of Hash#update (aka merge!) that employs a block to determine the values of keys that are present in both hashes being merged. Here that block is:
do |_,o,n|
g.merge(quantity: o[:quantity] + n[:quantity])
end
The values of the three block variables, _, o and n, are defined in the doc. I've used an underscore (a valid local variable) as the first variable--the common key--to signify that it is not used in the block calculation. That is common practice.
Note that:
h.update([g[:code], g[:name]]=>g)
is shorthand for:
h.update({ [g[:code], g[:name]]=>g })
I have created a jsfiddle over here.
There is a row (no.4) in the the store having empty/null values, but the grid display appears to be collapsed.
code snippet:
function(Grid, Memory) {
var data = [
{ id: 1, name: 'Peter', age:24 },
{ id: 2, name: 'Paul', age: 30 },
{ id: 3, name: 'Mary', age:46 },
{ id: '', name: '', age:'' }
];
var store = new Memory({ data: data });
var options = {
columns: [
/*{ field: 'id', label: 'ID' },*/
{ field: 'name', label: 'Name' },
{ field: 'age', label: 'Age' }
],
store: store
};
new Grid(options, 'gridcontainer');
}
I would like to have blank rows in the grid with the same height as other populated rows.
Is it possible in dGrid?
I believe the reason why blank rows do not have the same height as other rows is that dGrid doesn't actually set a specific height that a row should have. In situations where a cell may need a 2nd row, then the cell would grow in height. If you want a set height, you can add a css attribute to your fiddle that does something like:
#gridcontainer .dgrid-content .dgrid-cell {
height: 24px;
}