Category / Section
How to change Summary Type dynamically in PivotClient
3 mins read
This KB illustrates that how to change summary types dynamically in PivotClient.
Solution:
You can modify summary type of relational data (for both client and server modes) at run-time in PivotClient by following the below steps.
Step 1:
You can add a button in PivotClient Toolbar to change the summary type dynamically for the respective measures which are in value field. To create button inside the Toolbar, you can use “renderSuccess” event of PivotClient. Please follow the below codes for this customization.
JS
$("#PivotClient1").ejPivotClient({
//dataSource
renderSuccess: ”renderSuccess”
});
RAZOR
@Html.EJ().Pivot().PivotClient("PivotClient1").ClientSideEvents(oEve => { oEve.RenderSuccess("renderSuccess")})
ASPX
<ej:PivotClient ID="PivotClient1" runat="server" Title="Relational Browser" ClientIDMode="Static"> <ClientSideEvents RenderSuccess="renderSuccess" /> </ej:PivotClient>
JS
function renderSuccess (args) {
$(".e-reportToolbar").append('<div style="margin-top:2px;"><button class="customBtn" id="Btn1" style="background-color:white;">Summary</button></div>');
$("#Btn1").ejButton({
roundedCorner: true,
size: "mini",
type: ej.ButtonType.Button,
click: "OpenSummaryDialog"
});
}
Please find the below screenshot for the above customization.
Step 2:
Using the below code, you can design the summary type dialog on the click event of the customized button (here “Summary”). Please follow the below code snippet to design the summary type dialog.
JS (Relational Client Mode)
function OpenSummaryDialog(args) {
$(".e-dialog").remove();
var ejDialog = "<div id='summaryDialog'></div>"
var table = ej.buildTag("div#summaryTable", "<table>" +
"<tr>" +
"<td><label id=''>Summary Types:</label></td>" +
"<td><input id='drpdwn1'></input></td>"+
"</tr>" +
"<tr>" +
"<td><label id=''>Measures:</label></td>" +
"<td><input id='drpdwn2'></input></td>" +
"</tr>" +
"</table>")[0].outerHTML;
var OKBtn = ej.buildTag("button#OKBtn.e-dialogOKBtn", "", {}, { name: "OK" })[0].outerHTML;
var CancelBtn = ej.buildTag("button#CancelBtn.e-dialogCancelBtn", "", {}, { name: "Cancel" })[0].outerHTML;
var dialogFooter = ej.buildTag("div", OKBtn + CancelBtn, { "float": this.model.enableRTL ? "left" : "right", "margin": "20px 0px 6px" })[0].outerHTML;
$("#PivotClient1_PivotGrid").after(ejDialog);
$("#summaryDialog").append(table + dialogFooter);
$("#summaryDialog").ejDialog({ width: "auto", target: "#PivotClient1", enableResize: false, enableRTL: this.model.enableRTL, close: ej.proxy(ej.Pivot.closePreventPanel, this) });
$(".e-titlebar").prepend(ej.buildTag("div", "Summary Types", { "display": "inline" })[0].outerHTML)[0];
$("#OKBtn").ejButton({
roundedCorner: true,
size: "small",
type: ej.ButtonType.Button,
text: "OK",
click: "Apply"
});
$("#CancelBtn").ejButton({
roundedCorner: true,
size: "small",
type: ej.ButtonType.Button,
text: "Cancel"
});
$("#drpdwn1").ejDropDownList({
dataSource: [{ option: "Sum", value: "Sum" },
{ option: "Average", value: "Average" },
{ option: "Count", value: "Count" },
{ option: "Min", value: "Min" },
{ option: "Max", value: "Max" },
],
fields: { text: "value", value: "option" },
selectedIndices: [0],
enableRTL: this.model.enableRTL,
height: "30px",
});
var dataSource = [], value = [];
var pivotClient = $('#PivotClient1').data("ejPivotClient");
value = pivotClient.model.dataSource.values;
fvalue = "fieldCaption";
for (var j = 0; j < value.length; j++) {
{
dataSource.push(value[j][fvalue]);
}
}
$("#drpdwn2").ejDropDownList({
showCheckbox: true,
dataSource: dataSource,
});
}
JS (Relational Server Mode)
function OpenSummaryDialog(args) {
$(".e-dialog").remove();
var ejDialog = "<div id='summaryDialog'></div>"
var table = ej.buildTag("div#summaryTable", "<table>" +
"<tr>" +
"<td><label id=''>Summary Types:</label></td>" +
"<td><input id='drpdwn1'></input></td>"+
"</tr>" +
"<tr>" +
"<td><label id=''>Measures:</label></td>" +
"<td><input id='drpdwn2'></input></td>" +
"</tr>" +
"</table>")[0].outerHTML;
var OKBtn = ej.buildTag("button#OKBtn.e-dialogOKBtn", "", {}, { name: "OK" })[0].outerHTML;
var CancelBtn = ej.buildTag("button#CancelBtn.e-dialogCancelBtn", "", {}, { name: "Cancel" })[0].outerHTML;
var dialogFooter = ej.buildTag("div", OKBtn + CancelBtn, { "float": this.model.enableRTL ? "left" : "right", "margin": "20px 0px 6px" })[0].outerHTML;
$("#PivotClient1_PivotGrid").after(ejDialog);
$("#summaryDialog").append(table + dialogFooter);
$("#summaryDialog").ejDialog({ width: "auto", target: "#PivotClient1", enableResize: false, enableRTL: this.model.enableRTL, close: ej.proxy(ej.Pivot.closePreventPanel, this) });
$(".e-titlebar").prepend(ej.buildTag("div", "Summary Types", { "display": "inline" })[0].outerHTML)[0];
$("#OKBtn").ejButton({
roundedCorner: true,
size: "small",
type: ej.ButtonType.Button,
text: "OK",
click: "Apply"
});
$("#CancelBtn").ejButton({
roundedCorner: true,
size: "small",
type: ej.ButtonType.Button,
text: "Cancel"
});
$("#drpdwn1").ejDropDownList({
dataSource: [{ option: "Sum", value: "Sum" },
{ option: "Average", value: "Average" },
{ option: "Count", value: "Count" },
{ option: "Min", value: "Min" },
{ option: "Max", value: "Max" },
],
fields: { text: "value", value: "option" },
selectedIndices: [0],
enableRTL: this.model.enableRTL,
height: "30px",
});
var dataSource = [], value = [];
var pivotClient = $('#PivotClient1').data("ejPivotClient");
value = JSON.parse(pivotClient.getOlapReport()).PivotCalculations;
fvalue = "fieldCaption";
for (var j = 0; j < value.length; j++) {
{
dataSource.push(value[j][fvalue]);
}
}
$("#drpdwn2").ejDropDownList({
showCheckbox: true,
dataSource: dataSource,
});
}
Please find the below screenshot for the above customization.
Step 3:
After the summary type and measure selection through the summary type dialog, it will be reflected in the PivotGrid and PivotChart controls. Please find the below code snippet to apply the summary type in the respective controls.
JS (Relational Client Mode)
function Apply(args) {
var pivotClient = $('#PivotClient1').data("ejPivotClient");
if ($("#drpdwn1").val() != undefined) {
this.drilsumval = $("#drpdwn2").ejDropDownList("getSelectedValue");
var summarytyp = this.sumtyp = $("#drpdwn1").val();
if (summarytyp != null)
var summaryType = summarytyp.toLowerCase();
if (pivotClient._pivotGrid.model.operationalMode == ej.PivotGrid.OperationalMode.ClientMode) {
var len = $("#drpdwn2").ejDropDownList("getSelectedValue").split(",").length;
for (var i = 0; i < len; i++) {
var selectedValue = $("#drpdwn2").ejDropDownList("getSelectedValue").split(",")[i];
$.grep(pivotClient._pivotGrid.model.dataSource.values, function (item) {
return item.fieldName == selectedValue; })[0]["summaryType"] = summaryType;
}
pivotClient.refreshControl();
}
}
}
JS (Relational Server Mode)
function Apply(args) {
var pivotClient = $('#PivotClient1').data("ejPivotClient");
pivotClient.model.customObject = { "SummaryType": $("#drpdwn1").val(), "Measure": $("#drpdwn2").val(), "Report": JSON.parse(pivotClient.getOlapReport()).Report }
var serializedCustomObject = pivotClient.model.customObject;
pivotClient.doAjaxPost("POST", pivotClient.model.url + "/" + pivotClient.model.serviceMethodSettings.initialize, JSON.stringify({
"action": (pivotClient.model.enableDrillThrough && pivotClient.model.operationalMode == ej.Pivot.OperationalMode.ServerMode && pivotClient.model.analysisMode == ej.Pivot.AnalysisMode.Pivot) ? "initializeClient:getDataSet" : "initializeClient", "customObject": serializedCustomObject, "clientParams": pivotClient.model.enableMeasureGroups + "-" + pivotClient.model.chartType + "-" + pivotClient.model.enableKPI
}), pivotClient._renderControlSuccess);
}
