)
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. (Last updated on: June 24, 2019).
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 pass custom object from client-side to server-side?

Platform: jQuery |
Control: ejPivotChart |
Published Date: July 2, 2019 |
Last Revised Date: July 2, 2019

This KB illustrates that how to pass custom object from client-side to server-side.

Solution

Passing Custom Object information from Client-Side to Server-Side:

The events “beforeServiceInvoke” and “afterServiceInvoke” are triggered at client-side, before and after the service call, respectively. At such instances, you can assign and retrieve the custom object value through the customObject property, available within the model of the control.

JavaScript

$("#PivotChart").ejPivotChart({
                url: "/OLAPService.svc", beforeServiceInvoke: "OnServiceInvoke", afterServiceInvoke: "OnServiceReturn"
            });
var mdxQuery = new Array(); var clickCount = 0;
mdxQuery.push("SELECT NON EMPTY ({{Hierarchize({DrilldownLevel({[Customer].[Customer Geography].[All Customers]})})} * {[MEASURES].[Internet Sales Amount]}} ) dimension properties member_type ON COLUMNS, NON EMPTY ({{Hierarchize({DrilldownLevel({[Date].[Fiscal].[All Periods]})})}} ) dimension properties member_type ON ROWS FROM [Adventure Works]  CELL PROPERTIES VALUE, FORMAT_STRING, FORMATTED_VALUE");
        }
function OnServiceInvoke(args) {
                            // Passes custom object to WCF service
                            this.model.customObject = { mdx: mdxQuery[clickCount] };
                        }
function OnServiceReturn(args) {
                            // Receives modified custom object from WCF service
                            var returnedObject = this.model.customObject;
}

MVC

@Html.EJ().Pivot().PivotChart("PivotChart1").Url(Url.Content("~/wcf/OlapChartService.svc")).ClientSideEvents(clientSideEvent => clientSideEvent.BeforeServiceInvoke("OnServiceInvoke").AfterServiceInvoke("OnServiceReturn"))
<script type="text/javascript">
var mdxQuery = new Array(); var clickCount = 0;
mdxQuery.push("SELECT NON EMPTY ({{Hierarchize({DrilldownLevel({[Customer].[Customer Geography].[All Customers]})})} * {[MEASURES].[Internet Sales Amount]}} ) dimension properties member_type ON COLUMNS, NON EMPTY ({{Hierarchize({DrilldownLevel({[Date].[Fiscal].[All Periods]})})}} ) dimension properties member_type ON ROWS FROM [Adventure Works]  CELL PROPERTIES VALUE, FORMAT_STRING, FORMATTED_VALUE");
function OnServiceInvoke(args) {
     // Passes custom object to WCF service
     this.model.customObject = { mdx: mdxQuery[clickCount] };
  }
function OnServiceReturn(args) {
     // Receives modified custom object from WCF service
     var returnedObject = this.model.customObject;
}
<script/>

ASP

<ej:PivotChart ID="PivotChart1" runat="server" Url="../wcf/OlapChartService.svc">
   <ClientSideEvents  beforeServiceInvoke ="OnServiceInvoke" afterServiceInvoke="OnServiceReturn"/>
 </ej:PivotChart>
<script type="text/javascript">
var mdxQuery = new Array(); var clickCount = 0;
mdxQuery.push("SELECT NON EMPTY ({{Hierarchize({DrilldownLevel({[Customer].[Customer Geography].[All Customers]})})} * {[MEASURES].[Internet Sales Amount]}} ) dimension properties member_type ON COLUMNS, NON EMPTY ({{Hierarchize({DrilldownLevel({[Date].[Fiscal].[All Periods]})})}} ) dimension properties member_type ON ROWS FROM [Adventure Works]  CELL PROPERTIES VALUE, FORMAT_STRING, FORMATTED_VALUE");
function OnServiceInvoke(args) {
   // Passes custom object to WCF service
       this.model.customObject = { mdx: mdxQuery[clickCount] };
}
function OnServiceReturn(args) {
  // Receives modified custom object from WCF service
  var returnedObject = this.model.customObject;
}
<script/>

Processing Custom Object information at Server-Side:

At server-side, you can receive the custom object value and process accordingly. Here PivotChart utilizes the MDX and renders its respective information.

C#

Dictionary<string, object> dict = new Dictionary<string, object>();
public Dictionary<string, object> InitializeChart(string action, object customObject)
{
  OlapDataManager DataManager = null;
  dynamic customData = serializer.Deserialize<dynamic>(customObject.ToString());
   DataManager = new OlapDataManager(connectionString);
   DataManager.MdxQuery = customData["mdx"].ToString();
   dict =  htmlHelper.GetJsonData(action, DataManager);
   //Here we can modify the custom object which will be sent back to client-side. You can receive the information at AfterServiceInvoke event at client-side. 
   dict.Add("customObject", serializer.Serialize(customData));
   return dict;
}

 

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
Live Chat Icon