We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to change Summary Type dynamically in PivotClient

Platform: jQuery |
Control: ejPivotClient |
Published Date: September 26, 2018 |
Last Revised Date: June 14, 2019

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.

       Summary type icon in Toolbar of PivotClient

     

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.

      Measure selection from summary type dialog

       

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);
}

 

 

 

 

 

 

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile