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

Aggregate on Subtotal

Thread ID:

Created:

Updated:

Platform:

Replies:

141119 Nov 25,2018 02:02 PM UTC Nov 27,2018 09:12 AM UTC ASP.NET MVC - EJ 2 6
loading
Tags: Grid
Kenneth Tang
Asked On November 25, 2018 02:02 PM UTC

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.

Mohammed Farook J [Syncfusion]
Replied On 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 
 
 


Kenneth Tang
Replied On November 26, 2018 07:38 AM UTC

Dear Farook,

Thank a lot!

KennethT

Kenneth Tang
Replied On 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

Mohammed Farook J [Syncfusion]
Replied On 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 
 
 


Kenneth Tang
Replied On 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 

Mohammed Farook J [Syncfusion]
Replied On 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.  
 


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