1. Home
  2. Forum
  3. ASP.NET MVC
  4. Editable Summary / Footer Row?

Editable Summary / Footer Row?

Hi,
I'm using the EJGrid to create the sales invoice but the thing is I need to add a flat discount row which applies to the entire invoice (1 invoice => 1 discount)
Is there anyway to do this? I was looking around in custom summary part but there was nothing about this
I attached a screenshot for more clarity.
The discount value has to be accessible and is calculated to the grand total amount
The code for the grid is as following
@(Html.EJ().Grid<object>("PurchaseDetails")
.ToolbarSettings(tools =>
{
tools.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.Add);
items.AddTool(ToolBarItems.Edit);
items.AddTool(ToolBarItems.Update);
items.AddTool(ToolBarItems.Delete);
items.AddTool(ToolBarItems.Cancel);
});
})
.EditSettings(edit => edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Normal).ShowAddNewRow())
.AllowTextWrap(true)
.AllowReordering()
.ShowSummary()
.SummaryRow(row =>
{
row.Title("Grand Total").SummaryColumns(col => { col.SummaryType(SummaryType.Sum).Format("{0:C2}").DisplayColumn("SubTotal").DataMember("SubTotal").Add(); }).Add();
})
.Locale("id-ID")
.Columns(col =>
{
col.Field("ID").IsIdentity(true).IsPrimaryKey(true).Visible(false).Add();
col.Field("SKU").HeaderText("SKU").Add();
col.Field("ProductID").Visible(false).Add();
col.Field("Product").HeaderText("Nama Barang").Add();
col.Field("Qty").EditType(EditingType.Numeric).DefaultValue(1).HeaderText("Qty").Format("{0:N0}").Add();
col.Field("Discount").EditType(EditingType.Numeric).DefaultValue(0).Format("{0:N2}").HeaderText("Diskon%").Add();
col.Field("PurchasePrice").EditType(EditingType.Numeric).Format("{0:C0}").HeaderText("Harga/Unit").Add();
col.Field("SubTotal").HeaderText("Total").Format("{0:C2}").AllowEditing(false).Add();
}).ClientSideEvents(eve => eve.DataBound("Refresh").ActionComplete("complete")))
Thanks!

Attachment: syncfusion_custom_footer_row_8f0c49ba.rar

1 Reply
VN Vignesh Natarajan Syncfusion Team November 17, 2017 05:30 PM UTC

Hi Andrias, 

Thanks for using Syncfusion products. 

We have analyzed your query and we suspect that you want to less that discount value before displaying the total value. We have achieved your requirement through SummaryTemplate and CustomSummary feature of the grid.  

Kindly refer the below code snippet 

.SummaryRow(row => 
          { 
              row.Title("Discount") 
                 .SummaryColumns(col => 
                 { 
                     col.DisplayColumn("Freight") 
                         
                        .Template("#summaryTemplate") 
                        .Format("{0:C}") 
                        .Add(); 
                 }).Add(); 
              row.Title("Sum").SummaryColumns(col => { col.SummaryType(SummaryType.Custom).CustomSummaryValue("Discount").DisplayColumn("Freight").Format("{0:C2}").Add(); }).Add(); 
 
          }) 
                . 
                . 
                . 
                . 
<script id="summaryTemplate" type="text/x-jsrender">    
            
        <div style="padding-top:5px;text-align:right">="{{:~summary(val)}}</div>         
    </script> 
    <script type="text/javascript">   
        var Value = { 
            summary: function (val) { 
                var discount = 200; 
                return (discount); 
            } 
        }; 
        $.views.helpers(Value);      
         
        function Discount() { 
            var Discountedvalue = ej.sum(ej.dataUtil.distinct(this.model.dataSource, "Freight")) - Value.summary(); 
            return (Discountedvalue) 
        }                 
    </script> 

Refer the below screenshot for the output 

 

For your convenience we have prepared a sample which can be downloaded from below link 


Refer our online documentation for your reference 


Regards, 
Vignesh Natarajan  


Loader.
Up arrow icon