- Home
- Forum
- ASP.NET Core - EJ 2
- Can't use sparkline inside grid
Can't use sparkline inside grid
I'm trying to put a sparkline into the first column of a grid, using https://ej2.syncfusion.com/aspnetcore/SparkLine/SparkGrid#/material as a guide. Here is the (slightly muddled) code:
- Tried putting "XXX" in the column template to make sure it was getting used. (success)
- Tried putting a sparkline directly inside the template (didn't work)
- Tried putting a sparkline above the grid (worked)
- Tried using a hardcoded dataset for the sparkline (didn't work)
- Tried putting a plain HTML paragraph into the template div (didn't work)
- Tried adding another ej2 control, a switch, instead of the sparkline (didn't work)
- wrote the id of the record to the console to make sure gridLoaded function was executing (worked)
Any ideas on what I'm doing wrong? The code is pretty sim
Having some trouble with the code formatting. Here it is again:
@using Syncfusion.EJ2;
@using Syncfusion.EJ2.Charts;
@model IEnumerable<IotPlatform.Shared.FrontendApi.Models.Recording>
@{
ViewData["Title"] = "Recordings";
}
@{
var sortColumns = new List<object>();
sortColumns.Add(new { field = "startTime", direction = "Descending" });
}
<!DOCTYPE html>
<h1>Recordings</h1>
@{ }
<div>
<script type="text/x-template" id="sparklineTemplate">
<div id='sparkline_${id}'>
@*XXX*@
@*<ejs-sparkline id="sparkline" height="50px" width="100px" dataSource="@Model" yName="temperatureAvg" loaded="sparklineLoaded"></ejs-sparkline>*@
</div>
</script>
@*<ejs-sparkline id="sparkline" height="50px" width="100px" dataSource="@Model" yName="temperatureAvg" loaded="sparklineLoaded"></ejs-sparkline>*@
<ejs-grid id="Grid" dataSource="@Model" created="gridLoaded" allowPaging="true" allowSorting="true" enableColumnVirtualization="false" queryCellInfo="cellFormat">
<e-grid-pagesettings pageSize="20"></e-grid-pagesettings>
<e-grid-sortsettings columns="sortColumns"></e-grid-sortsettings>
<e-grid-columns>
<e-grid-column field="sparklinePoints" template="#sparklineTemplate" headerText="" width="150"></e-grid-column>
<e-grid-column field="id" visible="false"></e-grid-column>
<e-grid-column field="startTime" headerText="Start Time" width="100"></e-grid-column>
<e-grid-column field="sampleCount" headerText="Sample Count" width="200"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<p></p>
</div>
<script type="text/javascript">
function gridLoaded(args) {
console.error('Grid was loaded!');
var grid = document.getElementById('Grid').ej2_instances[0];
var rows = grid.dataSource;
for (var idx = 0; idx < rows.length; idx++) {
var rec = rows[idx];
var line = new ej.charts.Sparkline({
height: '50px',
width: '100px',
fill: '#3CCE10',
lineWidth: 2,
valueType: 'Numeric',
dataSource: lineData
});
//$("<p>Hello!</p>").appendTo('#sparkline_' + rec.id);
line.appendTo('#sparkline_' + rec.id);
//var switchObj = new ej.buttons.Switch({ label: 'My Label' });
//switchObj.appendTo('#sparkline_' + rec.id);
console.error(rec.id);
// console.error(switchObj.checked);
}
}
function rowSelected(e) {
window.location.rel='nofollow' href = '@Url.Action("Detail")' + '/' + e.data.id;
}
function sparklineLoaded(args) {
args.sparkline.loaded = null;
args.sparkline.refresh();
}
function cellFormat(args) {
if (args.column.field === "temperatureSparklinePoints") {
args.cell.style.control = new ej.charts.Sparkline({
height: '50px',
width: '150px',
dataSource: args.data["temperatureSparklinePoints"]
});
}
}
var lineData = [0, 6, 5, 2, 1, 7, 2];
</script>
|
Index.cshtml
@using Syncfusion.EJ2;
<div class="control-section">
<div id="sparkline" class="row">
<div class="cols-sample-area">
<script type="text/x-template" id="columnTemplate1">
<div id="spkline${EmployeeID}" />
</script>
<script type="text/x-template" id="columnTemplate2">
<div id="spkarea${EmployeeID}" />
</script>
<script type="text/x-template" id="columnTemplate3">
<div id="spkwl${EmployeeID}" />
</script>
<div id="grid">
<ejs-grid id="grid" dataSource="ViewBag.OrderDS" allowSelection="false" enableColumnVirtualization="false" enableHover="true" height="400">
<e-grid-columns>
<e-grid-column headerText="Tax per annum" template="#columnTemplate1" textAlign="@Syncfusion.EJ2.Grids.TextAlign.Center" width="100"></e-grid-column>
<e-grid-column headerText="One Day Index" template="#columnTemplate2" textAlign="@Syncfusion.EJ2.Grids.TextAlign.Center" width="100"></e-grid-column>
<e-grid-column field="EmployeeID" headerText="ID" textAlign="Right" width="60"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" width="100"></e-grid-column>
<e-grid-column field="OrderDate" headerText="Order Date" width="100" textAlign="@Syncfusion.EJ2.Grids.TextAlign.Center"></e-grid-column>
<e-grid-column field="ShipCountry" headerText="Ship Country" width="100"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
</div>
</div>
</div>
<div class="control-section">
<div id="sparkline" class="row">
<div class="cols-sample-area">
<script type="text/x-template" id="ord_columnTemp1">
<div id="spkline${EmployeeID}" />
</script>
<script type="text/x-template" id="ord_columnTemp2">
<div id="spkarea${EmployeeID}" />
</script>
<script type="text/x-template" id="cus_columnTemp1">
<div id="spkline${EmployeeID}" />
</script>
<script type="text/x-template" id="cus_columnTemp2">
<div id="spkarea${EmployeeID}" />
</script>
</div>
</div>
</div>
<script>
setTimeout(function () {
for (var i = 1; i < 20; i++) {
var line = new ej.charts.Sparkline({
height: '50px',
width: '150px',
lineWidth: 2,
valueType: 'Numeric',
fill: '#3C78EF',
dataSource: getSparkData('line', i)
});
line.appendTo('#spkline' + i);
var column = new ej.charts.Sparkline({
height: '50px',
width: '150px',
type: 'Column',
valueType: 'Numeric',
fill: '#3C78EF',
negativePointColor: '#f7a816',
dataSource: getSparkData('column', i)
});
column.appendTo('#spkarea' + i);
}
}, 500);
window.winloss = function () {
var windata = [];
var r;
for (var i = 1; i <= 12; i++) {
r = Math.random();
if (r <= 0.2) {
windata.push(-Math.random() * 10);
}
else {
windata.push(Math.random() * 10);
}
}
return windata;
};
window.getSparkData = function (type, count) {
if (type === 'line') {
return window.lineData[count];
}
else {
return window.columnData[count];
}
};
window["lineData"] = [
[0, 6, 4, 1, 3, 2, 5],
[5, 4, 6, 3, 1, 2, 0],
[6, 4, 0, 3, 2, 5, 1],
[4, 6, 3, 0, 1, 2, 5],
[3, 5, 6, 4, 0, 1, 2],
[1, 3, 4, 2, 5, 0, 6],
[2, 4, 0, 3, 5, 6, 1],
[5, 4, 6, 3, 1, 2, 0],
[0, 6, 4, 1, 3, 2, 5],
[6, 4, 0, 3, 2, 5, 1],
[4, 6, 3, 0, 1, 2, 5],
[3, 5, 6, 4, 0, 1, 2],
[1, 3, 4, 2, 5, 0, 6],
[2, 4, 0, 3, 5, 6, 1],
[5, 4, 6, 3, 1, 2, 0],
[0, 6, 4, 1, 3, 2, 5],
[6, 4, 0, 3, 2, 5, 1],
[4, 6, 3, 0, 1, 2, 5],
[2, 4, 0, 3, 5, 6, 1],
[3, 5, 6, 4, 0, 1, 2],
[1, 3, 4, 2, 5, 0, 6]
];
window["columnData"] = [
[0, 6, -4, 1, -3, 2, 5],
[5, -4, 6, 3, -1, 2, 0],
[6, 4, 0, 3, -2, 5, 1],
[4, -6, 3, 0, 1, -2, 5],
[3, 5, -6, -4, 0, 1, 2],
[1, -3, 4, -2, 5, 0, 6],
[2, 4, 0, -3, 5, -6, 1],
[5, 4, -6, 3, 1, -2, 0],
[0, -6, 4, 1, -3, 2, 5],
[6, 4, 0, -3, 2, -5, 1],
[4, 6, -3, 0, 1, 2, 5],
[3, -5, -6, 4, 0, 1, 2],
[1, 3, -4, -2, 5, 0, 6],
[2, -4, 0, -3, 5, 6, 1],
[5, 4, -6, 3, 1, -2, 0],
[0, 6, 4, -1, -3, 2, 5],
[6, -4, 0, -3, 2, 5, 1],
[4, 6, -3, 0, -1, 2, 5],
[6, 4, 0, -3, 2, -5, 1],
[3, 5, 6, -4, 0, 1, 2],
[1, 3, -4, 2, -5, 0, 6]
];
</script>
|
Thanks, this was really helpful. When I changed from using the "created" event as in the example to using a timer as above, it worked. I still had trouble when using paging (I think because I was using the data source from the grid as the list) so I ended up switching to using the dataBound event, which worked great.
Thanks,
J.
