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

Aggregate on Subtotal

Dear all,

We have create a grid view with grouping and aggregates as follow

@Html.EJS().DropDownList("MEMBER").Placeholder("Select a memeber to REJECT").Width("200").PopupHeight("200px").DataSource(
                (IEnumerable<STAFF_LIST>)ViewBag.staffList).Fields(new DropDownListFieldSettings
                {
                    Text = "EMPLOYEE_NAME",
                    Value = "EMPLOYEE_ID"
                }).SortOrder((string)ViewBag.sort).Query((string)ViewBag.query).Render()
            @Html.EJS().Button("btnReject").Content("Reject").IsPrimary(true).IsToggle(true).Render()
        </div>
        <br />
        @Html.EJS(
        ).Grid(
          "gDailyTimeSheet"
        ).DataSource(
        ds => ds.Url(@Url.Action("TeamDatasource", "Master", new { date = TempData["sheetDate"].ToString(), EMPLOYEE_ID = TempData["EMPLOYEE_ID"].ToString() }))
              .Adaptor("UrlAdaptor")
        ).AllowGrouping(
        ).AllowSorting(
        ).Columns(
          col =>
          {
              col.Field("WEEK_DATE").HeaderText("WEEK_DATE").Width("100").Visible(false).DefaultValue(TempData["sheetDate"].ToString()).Add();
              col.Field("EMPLOYEE_ID").HeaderText("EMPLOYEE_ID").Width("100").Visible(false).DefaultValue(TempData["EMPLOYEE_ID"].ToString()).Add();
              col.Field("EMPLOYEE_NAME").HeaderText("Team Member").Width("100").DefaultValue(TempData["EMPLOYEE_ID"].ToString()).Add();
              col.Field("TASK_PROJECT").HeaderText("Project").Width("300").DefaultValue(" ")
                  .EditType("dropdownedit")
                      .Edit(
                          new
                          {
                              @params = new
                              {
                                  fields = new
                                  {
                                      text = "TASK_PROJECT",
                                      value = "TASK_PROJECT"
                                  },
                                  dataSource = @ViewBag.projectList
                              }
                          }
                      ).Add();
              col.Field("TASK_ID").HeaderText("TASK").Width("400").DefaultValue(" ")
                  .EditType("dropdownedit")
                      .Edit(
                          new
                          {
                              @params = new
                              {
                                  fields = new
                                  {
                                      text = "TASK_ID",
                                      value = "TASK_ID"
                                  },
                                  dataSource = @ViewBag.taskList
                              }
                          }
                      ).Add();
              col.Field("TASK_TYPE").HeaderText("Type").Width("200").DefaultValue(" ")
                  .EditType("dropdownedit")
                      .Edit(
                          new
                          {
                              @params = new
                              {
                                  value = "NORMAL",
                                  fields = new { text = "TASK_TYPE", value = "TASK_TYPE" },
                                  dataSource = @ViewBag.taskType
                              }
                          }
                      ).Add();
              col.Field("SUNDAY").HeaderText(ViewBag.Sunday).Width("100").Format("0.0").DefaultValue("0.0").EditType("numericedit").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
              col.Field("MONDAY").HeaderText(ViewBag.Monday).Width("100").Format("0.0").DefaultValue("0.0").EditType("numericedit").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
              col.Field("TUESDAY").HeaderText(ViewBag.Tuesday).Width("100").Format("0.0").DefaultValue("0.0").EditType("numericedit").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
              col.Field("WEDNESDAY").HeaderText(ViewBag.Wednesday).Width("100").Format("0.0").DefaultValue("0.0").EditType("numericedit").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
              col.Field("THURSDAY").HeaderText(ViewBag.Thursday).Width("100").Format("0.0").DefaultValue("0.0").EditType("numericedit").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
              col.Field("FRIDAY").HeaderText(ViewBag.Friday).Width("100").Format("0.0").DefaultValue("0.0").EditType("numericedit").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
              col.Field("SATURDAY").HeaderText(ViewBag.Saturday).Width("100").Format("0.0").DefaultValue("0.0").EditType("numericedit").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
          }
        ).EditSettings(
          edit =>
          {
              edit.AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Batch).ShowDeleteConfirmDialog(true);
          }
        ).Load(
          "load"
        ).GroupSettings(group => group.ShowDropArea(true).Columns(new string[] { "EMPLOYEE_NAME" })
        ).Aggregates(
          agg =>
          {
              agg.Columns(new List<Syncfusion.EJ2.Grids.GridAggregateColumn>() {
                    new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "SUNDAY", Format ="0.0" , Type = "Sum", FooterTemplate = "${Sum}" }
                    , new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "MONDAY", Format ="0.0" ,  Type = "Sum", FooterTemplate = "${Sum}" }
                    , new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "TUESDAY", Format ="0.0" ,  Type = "Sum", FooterTemplate = "${Sum}" }
                    , new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "WEDNESDAY", Format ="0.0",   Type = "Sum", FooterTemplate = "${Sum}" }
                    , new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "THURSDAY", Format ="0.0",   Type = "Sum", FooterTemplate = "${Sum}" }
                    , new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "FRIDAY", Format ="0.0",   Type = "Sum", FooterTemplate = "${Sum}" }
                    , new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "SATURDAY", Format ="0.0",   Type = "Sum", FooterTemplate = "${Sum}" }
                 }).Add();
          }
        ).Toolbar(
          toolbarItems
        ).AllowTextWrap(
        true
        ).ToolbarClick("toolbarClick").Render()

Please help to advance how to display an aggregate subtotal on each of grouping instead of the grand total thx.

6 Replies

MF Mohammed Farook J Syncfusion Team November 26, 2018 06:24 AM UTC

Hi Kenneth, 

Query : how to display an aggregate subtotal on each of grouping 

We have analyzed your query and we suggest to use groupCaptionTemplate property of the grid to provide aggregation based on a grouped data. Please refer to the below documentation and online demo for your reference. 



Please get back to us for further assistance. 
 
Regards, 
J Mohammed Farook 
 
 



KT Kenneth Tang November 26, 2018 07:38 AM UTC

Dear Farook,

Thank a lot!

KennethT


KT Kenneth Tang November 26, 2018 08:26 AM UTC

Dear Farook,

We have success to use the code that you provide. But we also want to collapse all grouping after retrieving data.
When we implement with the sample in https://www.syncfusion.com/kb/8308/how-to-collapse-all-the-group-caption-rows-in-initial-rendering-of-grid 
by adding in

view

.ActionComplete("Complete").DataBound("dataBound").Render()

and script 

 function Complete(args) {
            if (args.requestType == "paging") {
                this.collapseAll();
            }
        }

        function dataBound(args) {
            if (args.requestType == "paging") {
                this.collapseAll();
            }
        }

There have a javascript error when we load the page, please advance how to fix it, thx.

KennethT


MF Mohammed Farook J Syncfusion Team November 26, 2018 09:07 AM UTC

Hi Kenneth, 

You can dynamically collapse grid grouped records by using ‘’ groupModule.collapseAll()” method of Grid. Please find the code example 


function Complete(args) { 
      if (args.requestType == "paging") { 
           this.groupModule.collapseAll(); 
      
 



Please find the API documentation for your reference. 
 
 
Regards, 
J Mohammed Farook 
 
 



KT Kenneth Tang November 26, 2018 03:12 PM UTC

Dear Farook ,

Thank for info, one more question that we want to add a blur event after input Sunday thru Saturday column to valid the weekly total. How could we achieve?

Thank a lot!

KennethT 


MF Mohammed Farook J Syncfusion Team November 27, 2018 09:12 AM UTC

Hi Kenneth, 
 
We can render the custom component for Grid edit by using edit Template feature. Please find the code example and documentation for your reference. 
 
 
Code example : 
 
 
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col => 
    { 
        col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).ValidationRules(new { required = "true" }).Add(); 
        col.Field("CustomerID").HeaderText("Customer Name").Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).Width("150").Add(); 
        col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 
        col.Field("ShipCountry").HeaderText("Ship Country").ValidationRules(new { required = "true", minLength = 3 }).Width("150").Add(); 
    }).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 
 
<script> 
        var elem; 
        var dObj; 
        function create(args) { 
            elem = document.createElement('input'); // element create 
            elem.onblur = blurFun; // bind blur function 
            return elem; 
        } 
        function write(args) { 
           elem.value = args.rowData['CustomerID'] // write the component 
        } 
 
        function destroy() { 
            elem.remove(); // remove the element when save the grid edited record 
        } 
        function read(args) { 
            return elem.value; // read the edited value 
        } 
        function blurFun(event) { 
            debugger 
            var gridObj = document.getElementById('Grid')['ej2_instances'][0]; 
            var column = gridObj.getColumnByField(event.target.id.replace(gridObj.element.id, '')); 
        } 
</script> 
 
 
 
 
In above sample we have render the own input element for CustomerID column while editing. Also we have bind the blur function for own editor input element.  Please find the documentation for your more reference. 
 
 
Regards, 
J Mohammed Farook.  
 


Loader.
Live Chat Icon For mobile
Up arrow icon