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.
Syncfusion Feedback

All-rows aggregate in server side grid

Thread ID:

Created:

Updated:

Platform:

Replies:

150608 Jan 13,2020 01:07 PM UTC Jan 27,2020 12:22 PM UTC Vue 5
loading
Tags: Data Grid
Masoud Moghaddari
Asked On January 13, 2020 01:07 PM UTC

Hello there,

I would like to show an aggregate of all rows, but because I'm using server side model grid, I can only have the aggregate of loaded data.
Would you please kindly tell me what should I do to have the aggregate of all data?

Thanks
Masoud Moghaddari

Prasanna Kumar Viswanathan [Syncfusion]
Replied On January 14, 2020 08:55 AM UTC

Hi Masoud, 
 
Thanks for contacting Syncfusion support. 
 
For remote data in Grid, we need to handle the aggregate action in server side else the Grid will take only the current page records to calculate the aggregate.  
 
For DataManager the grid will request an AJAX POST for data. It will be sent to the specified data service for every grid actions with the needed parameters the details of aggregates. The DataManager request contains the details of aggregates, we need to handle it from server side and pass along with result and count.  
 
Please refer the example code to handle the aggregate action in server side(For URL Adaptor), 
 
public IActionResult UrlDatasource(DataManagerRequest dm) 
        { 
 
            IEnumerable DataSource = order; 
            DataOperations operation = new DataOperations(); 
 
. . . 
            List<string> str = new List<string>(); 
            if (dm.Aggregates != null) 
            { 
                for (var i = 0; i < dm.Aggregates.Count; i++) 
                    str.Add(dm.Aggregates[i].Field); 
            } 
            IEnumerable aggregate = operation.PerformSelect(DataSource, str); 
            int count = DataSource.Cast<Orders>().Count(); 
            if (dm.Skip != 0) 
            { 
                DataSource = operation.PerformSkip(DataSource, dm.Skip);   //Paging 
            } 
            if (dm.Take != 0) 
            { 
                DataSource = operation.PerformTake(DataSource, dm.Take); 
            } 
            return dm.RequiresCounts ? Json(new { result = DataSource, count = count, aggregate = aggregate }) : Json(DataSource); 
        } 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Prasanna Kumar N.S.V 


Masoud Moghaddari
Replied On January 23, 2020 11:20 AM UTC

Hi Prasanna,

Thanks for your efforts.
I've managed to show a custom aggregate which is calculated on the server. I've sen't the aggregate value with DataManager alongside "Items" & "Count" and everything works great when grid is initialized.
I used "executeQuery" on "DataManager" which allowed me to retrieve my custom aggregate value from server.
My only problem is that when I do filtering or search in the grid (they all are server-side), the aggregate won't be updated in the grid.
So far I have found that the "DataManager" won't be updated and when "
executeQuery" is executed again after search or filter, it performs it's related operation on the initial "DataManager" object, not the updated on after search and filter.
I've attached a simplified version of my code so you might be able to know what is going on.
Hope my description was enough for your understanding.

Thank you again.
Masoud Moghaddari


Attachment: grid_68feb500.zip

Balaji Sekar [Syncfusion]
Replied On January 24, 2020 12:35 PM UTC

Hi Masoud, 
 
Thanks for contacting us. 
 
While using remote data we need to handle the aggregate action in server side. Otherwise the Grid will take only the current page records to calculate the aggregate. While grid requesting server data from server the request contains the details of aggregates. We need to handle it from server side and pass along with result and count. Please refer the example code to handle the aggregate action in server side(For URL Adaptor), 
 
public IActionResult UrlDatasource(DataManagerRequest dm) 
        { 
 
            IEnumerable DataSource = order; 
            DataOperations operation = new DataOperations(); 
 
. . . 
            List<string> str = new List<string>(); 
            if (dm.Aggregates != null) 
            { 
                for (var i = 0; i < dm.Aggregates.Count; i++) 
                    str.Add(dm.Aggregates[i].Field); 
            } 
            IEnumerable aggregate = operation.PerformSelect(DataSource, str); 
            int count = DataSource.Cast<Orders>().Count(); 
            if (dm.Skip != 0) 
            { 
                DataSource = operation.PerformSkip(DataSource, dm.Skip);   //Paging 
            } 
            if (dm.Take != 0) 
            { 
                DataSource = operation.PerformTake(DataSource, dm.Take); 
            } 
            return dm.RequiresCounts ? Json(new { result = DataSource, count = count, aggregate = aggregate }) : Json(DataSource); 
        } 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Balaji Sekar. 


Masoud Moghaddari
Replied On January 25, 2020 05:13 AM UTC

Hi there,

You've just repeated the code you sent before!
I have successfully added aggregate from server, my problem is that the aggregate does not change when grid's data is updated. 
For example when I do a search or filter data, I receive grid's data again from server and update grid according to the updated data. But the aggregate won't be updated.
How can I update the aggregate every time I update grid's data?

Balaji Sekar [Syncfusion]
Replied On January 27, 2020 12:22 PM UTC

Hi Masoud, 
 
Thanks for your update. 
 
Based on the received records only WebApi adaptor summarizes the aggregates and displays them in Grid. If we return whole records to the client-end, concept of the load on demand will be declined. Henceforth, based on the current page records the summary were displayed. 
 
However, we can overcome this behavior using the custom adaptors and custom headers of the DataManager. Using the custom headers, required aggregate fields were shared to the server-end. Based on that selective fields with their records were returned to the client as aggregates along with the Items/count which will display the summary for total records. 
 
Please refer the below code example for information. 
 
[Vue] 
<template> 
  <div class="col-lg-12 control-section"> 
    <div> 
      <ejs-grid :dataSource="data" ref="grid" :load="load" :allowPaging="true"> 
        <e-columns> 
. . . 
              <e-column type="Custom" field="Freight" format="C2" :customAggregate="customAggregateFn"  :footerTemplate="sumTemplate"></e-column> 
            </e-columns> 
          </e-aggregate> 
        </e-aggregates> 
      </ejs-grid> 
    </div> 
  </div> 
</template> 
<script> 
import Vue from "vue"; 
import { 
  GridPlugin, 
  Sort, 
  Group, 
  Page, 
  Toolbar, 
  Aggregate 
from "@syncfusion/ej2-vue-grids"; 
import { DataManagerWebApiAdaptor,DataUtil } from "@syncfusion/ej2-data"; 
 
Vue.use(GridPlugin); 
class extendedApiAdaptor extends WebApiAdaptor { 
 
  processResponse( 
        data, ds, query, xhr, request, changes) { 
        var original = super.processResponse.apply(this, arguments); 
            var aggregateData = data.Aggregate; 
            return DataUtil.isNull(original.count) ? original.result : { result: original.result, count: original.count, aggregates: aggregateData }; 
    } 
} 
export default Vue.extend({ 
  data() { 
    return { 
      data: new DataManager({ 
        url: "api/Orders", 
        adaptor: new extendedApiAdaptor(), 
        crossDomain: true 
      }), 
      sumTemplate: function() { 
        return { 
          template: Vue.component("sumTemplate", { 
            template: `<span>Custom: {{data.Custom}}</span>`, 
            data: function() { 
              return { data: { data: {} } }; 
            } 
          }) 
        }; 
      } 
    }; 
  }, 
  methods: { 
    load : function (e) { 
       var aggregatesField = ['Freight'] 
this.$refs.grid.ej2Instances.dataSource.dataSource.headers = []; 
// add the required aggregates value to the header 
this.$refs.grid.ej2Instances.dataSource.dataSource.headers.push({ aggregates: JSON.stringify(aggregatesField) });  
    }, 
         customAggregateFn : function (data) { 
          console.log(data.aggregates); 
// here you will get all the data for the aggregate  
field and calculate your own aggregation 
           return  calculated value 
      } 
  }, 
  provide: { 
    grid: [SortGroupAggregatePageToolbar] 
  } 
}); 
</script> 
<style> 
</style> 

[Controller side] 
   public class OrderController : ApiController 
    { 
        // GET: api/Order 
        public object Get() 
        { 
             
            var queryString = System.Web.HttpContext.Current.Request.QueryString; 
           // get the values passed through request header 
            string agg = Request.Headers.GetValues("aggregates").ToList()[0]; 
            DataOperations ds = new DataOperations(); 
            object aggregate = null; 
            var data = OrdersDetails.GetAllRecords(); 
            if (agg != null) 
            { 
 
                List<string> aggregates = (List<string>)JsonConvert.DeserializeObject(agg, typeof(List<string>)); 
                aggregate = ds.PerformSelect(data, aggregates); 
            } 
             . . . 
           } 
            return new 
            { 
           //return the Aggregates along with result and count 
                Items = data.Skip(skip).Take(take), 
                Count = data.Count(), 
                Aggregate = aggregate 
                 }; 
        } 
 
Please get back to us, If you need further assistance. 
 
Regards, 
Balaji Sekar. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

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

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