As I wrote this question I kept having a sense of deja vu. It turns out a really smart (and good looking) guy already asked this but when I searched the forum it didn't come up.
https://www.syncfusion.com/forums/130441/custom-summary-calc-using-other-summary-values
$(function () {
var data = [{ ColumnA: 1, ColumnB: 33, ColumnC: 20 },
---
];
$("#Grid").ejGrid({
dataSource: data,
allowSorting: true,
showSummary: true,
summaryRows: [{
title: "Sum",
summaryColumns: [{
summaryType: ej.Grid.SummaryType.Sum,
displayColumn: "ColumnC",
dataMember: "ColumnC",
}]
}],
columns: [
{ field: "ColumnA", headerText: "Column A", width: 75 },
{ field: "ColumnB", headerText: "Column B", width: 80 },
{ field: "ColumnC", headerText: "Column C", width: 75 },
{ headerText: "Calculated Column", template: "<span>{{:ColumnA * (ColumnB + ColumnC) }}</span>", width: 90 }
]
});
});
|
Given the below code, how could I set up a custom summary on the summary row that does some math on the group totals from columns A, B, and C? This time I attached a powerpoint, sample code, and data. I am so grateful for the support your team provides!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential Studio for JavaScript : Edit Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<link rel='nofollow' href="//cdn.syncfusion.com/15.3.0.26/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
<link rel='nofollow' href="15.3.0.26/themes/web/content/default.css" rel="stylesheet" />
<link rel='nofollow' href="15.3.0.26/themes/web/content/default-responsive.css" rel="stylesheet" />
<link rel='nofollow' href="//cdn.syncfusion.com/15.3.0.26/js/web/responsive-css/ej.responsive.css" rel="stylesheet" />
<!--[if lt IE 9]>
<script src="//cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="//cdn.syncfusion.com/js/assets/external/jquery-2.1.4.min.js"></script>
<!--<![endif]-->
<script src="//cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script>
<script src="//cdn.syncfusion.com/js/assets/external/jquery.validate.min.js"></script>
<script src="//cdn.syncfusion.com/js/assets/external/jquery.validate.unobtrusive.min.js"></script>
<script src="15.3.0.26/scripts/web/jsondata.min.js"></script>
<script src="//cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
<script type="text/javascript" src="//cdn.syncfusion.com/15.3.0.26/js/web/ej.web.all.min.js"></script>
<script src="15.3.0.26/scripts/web/properties.js" type="text/javascript"></script>
</head>
<body>
<div class="content-container-fluid">
<div class="row">
<div class="cols-sample-area">
<div id="Grid"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var data = [{ColumnA:1, ColumnB: 33, ColumnC: 20},{ColumnA:2, ColumnB: 81, ColumnC: 26},
{ColumnA:3, ColumnB: 27, ColumnC: 44},{ColumnA:4, ColumnB: 85, ColumnC: 35},
{ColumnA:5, ColumnB: 81, ColumnC: 56},{ColumnA:6, ColumnB: 99, ColumnC: 44},
{ColumnA:7, ColumnB: 11, ColumnC: 68},{ColumnA:8, ColumnB: 101, ColumnC: 58},
{ColumnA:9, ColumnB: 17, ColumnC: 90},{ColumnA:10, ColumnB: 45, ColumnC: 67}]
$("#Grid").ejGrid({
dataSource: data,
allowSorting: true,
showSummary: true,
summaryRows: [{
title: "Sum: ",
summaryColumns: [
{
summaryType: ej.Grid.SummaryType.Sum,
displayColumn: "ColumnA",
dataMember: "ColumnA"},
{
summaryType: ej.Grid.SummaryType.Sum,
displayColumn: "ColumnB",
dataMember: "ColumnB"},{
summaryType: ej.Grid.SummaryType.Sum,
displayColumn: "ColumnC",
dataMember: "ColumnC",
}]
}],
columns: [
{ field: "ColumnA", headerText: "Column A", width: 75 },
{ field: "ColumnB", headerText: "Column B", width: 80 },
{ field: "ColumnC", headerText: "Column C", width: 75 },
{ headerText: "Calculated Column", template: "<span>{{:ColumnA * (ColumnB + ColumnC) }}</span>", width: 90 }
]
});
});
</script>
</body>
</html>
I love that code sample. I can use that for other things, but it wasn't quite what I was looking for. Nevertheless I appreciate the time and energy spent creating it. Thank you!
$(function () {
var data =[
----
]
$("#Grid").ejGrid({
dataSource: data,
allowSorting: true,
showSummary: true,
summaryRows: [{
title: "Sum=",
summaryColumns: [{
---
{
summaryType: ej.Grid.SummaryType.Custom,
displayColumn: "ColumnC",
customSummaryValue: customCommitSummary
}
]
}],
columns: [
----
]
});
});
function customCommitSummary(args) {
var gridObj = $("#Grid").ejGrid('instance');
var ColA = ej.sum(gridObj.model.dataSource, "ColumnA"); //Sum the ColumnA’s value externally
var ColB = ej.sum(gridObj.model.dataSource, "ColumnB"); //Sum the ColumnB’s value externally
var ColC = ej.sum(gridObj.model.dataSource, "ColumnC"); //Sum the ColumnC’s value externally
if ((ColA + ColB) < ColC)
return 12345;
else
return 0;
}
|
No inconvenience was caused. I'm extremely grateful for your help!