Develop Reference

CDK Drag&Drop nested lists

I have two objects, Users and Info.
I intend to present users in different columns (individualize them) and within each User I intend to put the respective information where the User ID is the same as the IDUser in the info object. Basically, I intend to present the Obejto Info information within the list of each user, respectively.
At the moment I have two lists (users and info) I want to drag and drop between placing them vertically and horizontally, but without success.
Someone can help me solve this problem in order to pass the cards from one column to another (from user to user).
Example: In the column named Name1 I intend to place the card with the text Expand in the column named Name2.
Thank you
DEMO
html
<div style="width:100%; height:100%; display:flex; justify-content:center">
<div *ngFor="let usr of Users" style="width: 20%;">
<div class="card">
<div class="card-header" style="display: flex; align-items: center; justify-content: center;">
<span>{{usr.name}}</span>
</div>
<div class="card-body" style="height:100%" cdkDropList
cdkDropListOrientation="vertical" [cdkDropListData]="Info"
(cdkDropListDropped)="drop($event)">
<div *ngFor="let item of Info">
<div *ngIf="usr.id == item.idUser" cdkDrag>
<div class="card">
<div class="card-header" style="padding: 0px;">
<span>{{item.text}}</span>
</div>
<div class="card-body" style="padding: 0px;position: relative;">
<span>{{item.text}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.ts
Users = [
{ id: 1, name: "Name1" },
{ id: 2, name: "Name2" },
{ id: 3, name: "Name3" }
];
Info = [
{ idUser: 1, text: "Expand1" },
{ idUser: 1, text: "Expand11" },
{ idUser: 2, text: "Expand2" },
{ idUser: 2, text: "Expand22" },
{ idUser: 3, text: "Expand33" },
{ idUser: 3, text: "Expand33" }
];
drop(event: CdkDragDrop<string[]>) {
console.log("TO", event.previousContainer.data[event.previousIndex]);
console.log("FROM", event.previousContainer.data[event.currentIndex]);
if (event.previousContainer === event.container) {
moveItemInArray(
event.container.data,
event.previousIndex,
event.currentIndex
);
} else {
transferArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex
);
}
}

You can do multiple changes to your approach to solve this issue:
You technically just have a single data source for data and that will not work so transform your data structure so that each user will have an array to UserInfo items.
Use cdkDropListGroup on container element which contains all cdkDropList
and that's all!
import {
Component
} from "#angular/core";
import {
CdkDragDrop,
moveItemInArray,
transferArrayItem
} from "#angular/cdk/drag-drop";
#Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
Users = [{
id: 1,
name: "Name1",
items: [{
idUser: 1,
text: "Expand1"
}, {
idUser: 1,
text: "Expand11"
}]
},
{
id: 2,
name: "Name2",
items: [{
idUser: 2,
text: "Expand2"
}, {
idUser: 2,
text: "Expand22"
}]
},
{
id: 3,
name: "Name3",
items: [{
idUser: 3,
text: "Expand33"
}, {
idUser: 3,
text: "Expand33"
}]
}
];
drop(event: CdkDragDrop < string[] > ) {
if (event.previousContainer === event.container) {
moveItemInArray(
event.container.data,
event.previousIndex,
event.currentIndex
);
} else {
transferArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex
);
}
}
}
<div style="width:100%; height:100%; display:flex; justify-content:center" cdkDropListGroup>
<div *ngFor="let usr of Users" style="width: 20%;">
<div class="card">
<div class="card-header" style="display: flex; align-items: center; justify-content: center;">
<span>{{usr.name}}</span>
</div>
<div class="card-body" style="height:100%" cdkDropList id="{{usr.id}}" cdkDropListOrientation="vertical" [cdkDropListData]="usr.items" (cdkDropListDropped)="drop($event)">
<div *ngFor="let item of usr.items">
<div cdkDrag>
<div class="card">
<div class="card-header" style="padding: 0px;">
<span>{{item.text}}</span>
</div>
<div class="card-body" style="padding: 0px;position: relative;">
<span>{{item.text}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Take a look at this stackblitz forked from yours.

Highchart as a modal

I am currently working on a webpage with highchart. I need to show the same highchart as a modal on click of a button. I am using html bootstrap and javascript
This is what I have done
<div class="container" id = "container1" style = "width: 30%; height: 50%; margin: auto 0 0 0; position: relative; float: left"></div>
<div class="container" id = "container2" style = "width: 30%; height: 50%; margin: auto 0 0 0; position: relative; float: left"></div>
<div class="container" id = "container3" style = "width: 30%; height: 50%; margin: auto 0 0 0; position: relative; float: left"></div>
</div>
<button type="button" class="btn" data-toggle="modal" data-target="#myModal">click to zoom</button>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal fade" role= "dialog" id = "myModal" style = "width: 50%; height: 70%; position: absolute; float: center">
</div>
JS:
$(document).ready(function() {
var title = {
text: 'Cycle Profile'
};
var subtitle = {
text: 'Source: cimtool'
};
var xAxis = {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};
var yAxis = {
title: {
text: 'Temperature (\xB0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};
var tooltip = {
valueSuffix: '\xB0C'
}
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
};
var series = [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
26.5, 23.3, 18.3, 13.9, 9.6]
},
{
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
24.1, 20.1, 14.1, 8.6, 2.5]
},
{
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
17.9, 14.3, 9.0, 3.9, 1.0]
},
{
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,
16.6, 14.2, 10.3, 6.6, 4.8]
},
{
name: 'India',
data: [5.9, 2.2, 7.7, 6.5, 13.9, 13.2, 14.0,
14.6, 16.2, 8.3, 8.6, 6.8]
}
];
var json = {};
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;
$('#container1').highcharts(json);
$('#container2').highcharts(json);
$('#container3').highcharts(json);
$('#container6').highcharts(json);
$('#myModal').highcharts(json);
});

Please show us what you have tried and your sample code. Any how I have created a fiddle including bootstarp and jquery aswell.
Where you can see one button please click on that, it will open modal popup. That model contains high chart (basic line).
HTML :
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div class="container">
<h2>Activate Modal with JavaScript</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="myBtn">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div id="container"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
JS :
$(document).ready(function(){
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
});
High chart as modal JS Fiddle

PieChart for every row in dynamically created table

I have a dynamically created table and on click of view button in each row a modal opens that have the pie chart with no of leaves taken by people till date in categories like sick, vacation, maternity, paternity for the particular year.on click of 1st button the pie chart shows up https://imgur.com/a/wpNa3 but but if I click on any button other than 1st then I get a blank page.https://imgur.com/a/jcZjE .Why blank page is appearing??please help me.
<td>
<button type="button" class="btn btn-default btn-sm view" data-toggle="modal" data-target="#{{pl.id}}_3"><i class="fa fa-eye" aria-hidden="true" style="color:black"></i></button>
<!-- Modal -->
<div class="modal fade" id= "{{pl.id}}_3" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><b>{{pl.employee.emp_name|title }}</b> Leave Details</h4>
</div>
<div class="modal-body">
<p>Applied leave from {{pl.start_date}} to {{pl.end_date}} for {{ pl.end_date|timeuntil:pl.start_date }} </p>
<p>Leave applied on : {{pl.date_created}}</p>
<p><div id="container" class="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
My jquery Code:
$(document).on('click','.view', function(e){
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Total number of leaves applied till now'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Sick Leaves',
y: 56.33
}, {
name: 'Casual Leaves',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Vacation Leaves',
y: 10.3
}, {
name: 'Maternity Leaves',
y: 4.77
}, {
name: 'Paternity Leaves',
y: 0.91
}]
}]
});
});
I am using classname on click due to duplicacy in Id's but still its not workin g..Where am I doing wrong?

How to take data into piechart from database?

I have a dynamically created table and on click of view button in each row a modal opens that have the pie chart with no of leaves taken by people till date in categories like sick, vacation, maternity, paternity for the particular year.Please help me how to take data from database..and on click of 1st button the pie chart shows up
but if I click on any button other than 1st then I get a blank page.
<td>
<button type="button" class="btn btn-default btn-sm view" data-toggle="modal" data-target="#{{pl.id}}_3"><i class="fa fa-eye" aria-hidden="true" style="color:black"></i></button>
<!-- Modal -->
<div class="modal fade" id= "{{pl.id}}_3" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><b>{{pl.employee.emp_name|title }}</b> Leave Details</h4>
</div>
<div class="modal-body">
<p>Applied leave from {{pl.start_date}} to {{pl.end_date}} for {{ pl.end_date|timeuntil:pl.start_date }} </p>
<p>Leave applied on : {{pl.date_created}}</p>
<p><div id="container" class="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
My jquery Code:
$(document).on('click','.view', function(e){
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Total number of leaves applied till now'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Sick Leaves',
y: 56.33
}, {
name: 'Casual Leaves',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Vacation Leaves',
y: 10.3
}, {
name: 'Maternity Leaves',
y: 4.77
}, {
name: 'Paternity Leaves',
y: 0.91
}]
}]
});
});

Modal fade has some time delay so you have to call your function by using set time out
create a new function and call it setTimeout(function(){ myFunc(); }, 500); This will work on your modal.

Bootstrap Tab Not Loading Content

I have the following problem, I'm making an application in Visual Studio 2013, and have used Bootstrap 3 for this, I have a Master Page with the libraries and I have the following page that loads the Content of the page.
I'm trying to display graphics in 3 Tabs, however only shows me the graph of the active panel and not load others.
Do not know what else to do, I understand that the problem is related with Bootstrap and can not find documentation of how fix it. If you were using Morris.js could use the Redraw function, however I am using DevExpress Charts
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<script src="Scripts/js/knockout-3.0.0.js"></script>
<script src="Scripts/js/globalize.min.js"></script>
<script src="Scripts/js/dx.chartjs.js"></script>
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Tab Panel<span class="badge pull-right">Area 500</span></h3>
</div>
<div class="panel-body">
<script type="text/javascript">
$(function () {
var dataSource = [
{ country: "Russia", area: 12 },
{ country: "Canada", area: 7 },
{ country: "USA", area: 7 },
{ country: "China", area: 7 },
{ country: "Brazil", area: 6 },
{ country: "Others", area: 55 }
];
$("#chartTab1").dxPieChart({
dataSource: dataSource,
series: [
{
argumentField: "country",
valueField: "area",
label: {
visible: true,
connector: {
visible: true,
width: 1
}
}
}
],
title: "Area of Countries"
});
})
</script>
<script type="text/javascript">
$(function () {
var dataSource = [
{ country: "Russia", area: 12 },
{ country: "Canada", area: 7 },
{ country: "USA", area: 7 },
{ country: "China", area: 7 },
{ country: "Brazil", area: 6 },
{ country: "Others", area: 55 }
];
$("#chartTab2").dxPieChart({
dataSource: dataSource,
series: [
{
argumentField: "country",
valueField: "area",
label: {
visible: true,
connector: {
visible: true,
width: 1
}
}
}
],
title: "Area of Countries"
});
})
</script>
<script type="text/javascript">
$(function () {
var dataSource = [
{ country: "Russia", area: 12 },
{ country: "Canada", area: 7 },
{ country: "USA", area: 7 },
{ country: "China", area: 7 },
{ country: "Brazil", area: 6 },
{ country: "Others", area: 55 }
];
$("#chartTab3").dxPieChart({
dataSource: dataSource,
series: [
{
argumentField: "country",
valueField: "area",
label: {
visible: true,
connector: {
visible: true,
width: 1
}
}
}
],
title: "Area of Countries"
});
})
</script>
<ul class="nav nav-tabs" id="myTab">
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="Tab1">
<div id="chartTab1"></div>
</div>
<div class="tab-pane" id="Tab2">
<div id="chartTab2"></div>
</div>
<div class="tab-pane" id="Tab3">
<div id="chartTab3"></div>
</div>
</div>
<script>
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
</script>
</div>
</div>
</div>
</div>
</div>
</asp:Content>

you are using both the data-api and the programmatic api in your code. remove this script from your code
<script>
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
</script>
your data-toggles in your html will take care of your tabs.