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.
Unfortunately, activation email could not send to your email. Please try again.

How to make calculated column

Thread ID:

Created:

Updated:

Platform:

Replies:

130960 Jun 13,2017 10:34 AM Jun 19,2017 12:34 AM ASP.NET Core 5
loading
Tags: Grid
Zhen Liu
Asked On June 13, 2017 10:34 AM

I have a grid that needs to have a total price column which is calculated from quantity and unit price columns user typed in. How can I do this?
I also need a grand total on the bottom of the grid.

Mani Sankar Durai [Syncfusion]
Replied On June 14, 2017 07:56 AM

Hi Zhen, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we have prepared a sample based on your requirement that can be downloaded from the below link. 
In this sample we have shown the total value for the last column based on sum of two column value using column template feature in grid. Also we have shown the summary for the template column using custom summary feature in grid.  
Refer the code example 
<ej-grid id="FlatGrid" datasource="ViewBag.data" allow-paging="true" show-summary="true" action-complete="complete"> 
    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="@(EditMode.Normal)"></e-edit-settings> 
    <e-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string>() {"add","edit","delete","update","cancel" })"></e-toolbar-settings>   
    <e-columns> 
... 
         <e-column field="EmployeeID" header-text="Employee ID" text-align="Right"  width="75"></e-column> 
        <e-column field="Freight" header-text="Freight" format="{0:C}" width="75"></e-column> 
        <e-column field="Sum" header-text="Sum" template="<span>{{:EmployeeID + Freight }}</span>" allow-editing="false" text-align="Right" width="75"></e-column> 
    </e-columns> 
    <e-summary-rows> 
        <e-summary-row title="Total sum"> 
            <e-summary-columns> 
                <e-summary-column summary-type="Custom" display-column="Sum" custom-summary-value= "currency" /> 
            </e-summary-columns> 
        </e-summary-row> 
        
    </e-summary-rows> 
</ej-grid> 
 
<script> 
    var frightval, empval; 
    var totalval, sumval = []; 
    function currency() { 
        var gridObj = $("#FlatGrid").ejGrid("instance"); 
        sumval = []; 
        for (i = 0; i < gridObj.model.dataSource.length; i++) { 
            frightval = gridObj.model.dataSource[i].Freight; 
            empval = gridObj.model.dataSource[i].EmployeeID; 
            totalval = frightval + empval; 
            sumval.push(totalval); 
        } 
        var result = ej.sum(sumval); 
        return (result);                //it will return the total summary value for the template column. 
    } 
   function complete (args) { 
        if (args.requestType == "beginedit") {         // when editing the value in two columns we have changed the value at run time for the total value column(i.e template column) 
            row = args.row; 
            $(args.row.find("input")).bind('keypress keyup', function (e) { 
                if(e.keyCode >= 48 && e.keyCode <= 57 || e.keyCode == 8)  {    //you can prevent as per the user need where key code 37 is left arrow and 39 is right arrow.  
                    ... 
                    var value = columnA + columnB; 
                    row.find(".e-templatecell").text(value); 
                } 
            }); 
        } 
    } 
</script> 
 
Refer the documentation link. 
Link: 


Please let us know if you need further assistance. 

Regards, 
Manisankar durai. 


Zhen Liu
Replied On June 15, 2017 08:27 AM

Thanks Mani, the calculation on each row is working, although it doesn't apply the currency format properly. However the summary is always zero in my code. I guess it is because that I am using e-datamanager with the grid. Is there any way that I can get the summary to work with e-datamanager?

            <ej-grid id="FlatGrid"  show-summary="true" action-complete="complete" begin-edit="beginedit">

                <e-datamanager json="(IEnumerable<object>)ViewBag.datasource" update-url="/Adjustments/LineUpdate?adjustmentId=@Model.Id" insert-url="/Adjustments/LineInsert?adjustmentId=@Model.Id" remove-url="/Adjustments/LineDelete?adjustmentId=@Model.Id" adaptor="remoteSaveAdaptor" />

                <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="@(EditMode.Normal)"></e-edit-settings>

                <e-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string>() {"add","edit","delete","update","cancel" })"></e-toolbar-settings>

                <e-columns>

                    <e-column field="Id" is-primary-key="true" visible="false"></e-column>

                    <e-column field="AdjustmentId" visible="false"></e-column>

                    <e-column field="CurrencyId" visible="false"></e-column>

                    <e-column field="ProductCode" datasource="(IEnumerable<object>)ViewBag.productcodes" edit-type="@(EditingType.Dropdown)" header-text="Product" width="80"></e-column>

                    <e-column field="Piece" header-text="Piece" width="10"></e-column>

                    <e-column field="Volume" header-text="Volume" width="10"></e-column>

                    <e-column field="Weight" header-text="Weight" width="10"></e-column>

                    <e-column field="UnitCost" header-text="Price" format="{0:C2}" width="10"></e-column>

                    <e-column field="Total" header-text="Total Price" template="<span>{{:Volume * UnitCost }}</span>" format="{0:C2}" allow-editing="false" text-align="Right" width="10"></e-column> 

            </e-columns>

                <e-summary-rows>

                    <e-summary-row title="Total">

                        <e-summary-columns>

                            <e-summary-column summary-type="Custom" display-column="Total" format="{0:C2}" custom-summary-value="currency" />

                      </e-summary-columns>

                    </e-summary-row>


                </e-summary-rows> 

            </ej-grid>



Mani Sankar Durai [Syncfusion]
Replied On June 16, 2017 08:03 AM

Hi Zhen, 

We have checked the provided code and we can set the summary value when using remoteSaveAdaptor by the following way. 
Refer the code example 
  ... 
    function currency() { 
        var gridObj = $("#FlatGrid").ejGrid("instance"); 
        sumval = []; 
        var data = this.model.dataSource.dataSource.json;  //helps to retrieve whole data when using remoteSaveAdaptor in grid. 
        for (i = 0; i < data.length; i++) { 
            frightval = data[i].Freight; 
            empval = data[i].EmployeeID; 
            totalval = frightval + empval; 
            sumval.push(totalval); 
        } 
        var result = ej.sum(sumval); 
        return (result); 
    } 
... 

To retrieve the whole data we can get it from JSON property of adaptor only when using remoteSaveAdpaptor in grid. 
We have also prepared a sample that can be downloaded from the below link. 

Please let us know if you need further assistance. 

Regards, 
Manisanka Durai. 


Zhen Liu
Replied On June 16, 2017 08:16 AM

This works, thank you very much!

Mani Sankar Durai [Syncfusion]
Replied On June 19, 2017 12:34 AM

HI Zhen, 

We are happy to hear that your problem has been solved. 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


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.

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.

;