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

How to add auto calculated Total column

in my Grid, I have Price and Quantity, how can I add an auto-caculated total that will sum up both values in both columns?

6 Replies

VA Venkatesh Ayothi Raman Syncfusion Team January 31, 2017 10:17 AM UTC

Hi Khaled, 

Thanks for contacting Syncfusion support. 
We can calculate the price and quantity column using column template feature in Grid and we have already created a Help document for this. In this template, we can auto calculated the value using JSrender syntax. 
We have also created a sample for your requirement. In this sample, we have rendered the template column for calculating the price and quantity columns. Please refer to the code example and sample, 
Code example
@(Html.EJ().Grid<Object>("Grid") 
                .Datasource((IEnumerable<object>)ViewBag.DataSource) 
                .AllowPaging() 
                    
 
.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) //Enable the editsettings(inline editing) 
                .ToolbarSettings(toolbar => 
                   { 
                       toolbar.ShowToolbar().ToolbarItems(items => //Toolbar items 
                       { 
                           items.AddTool(ToolBarItems.Add); 
                           items.AddTool(ToolBarItems.Edit); 
                           items.AddTool(ToolBarItems.Delete); 
                           items.AddTool(ToolBarItems.Update); 
                           items.AddTool(ToolBarItems.Cancel); 
                       }); 
                   }) 
                .Columns(col => 
                { 
                    col.Field("SNO").IsPrimaryKey(true).Add(); 
                    col.Field("quantity").Add(); 
                    col.Field("Price").Add(); 
 
                    col.HeaderText("Calories In Take").Template("<span>{{:quantity * Price }}</span>").Add(); //Template column and we have calculated the values from price and quantity column 
                }) 
) 
 
Regards, 
Venkatesh Ayothiraman. 



KH Khaled January 31, 2017 03:28 PM UTC

thanks for answering, but the solution is missing for these 2 reasons:
1. Using Template stopped formatting the cell as currency. I can format currency normally in other cell like this:

            col.Field("UnitPrice").HeaderText("Unit Price").Format("{0:C}").Add();
2. Now it is displaying NaN when quantity and unitprice are 0. I've tried the following but couldn't. 
col.Field("Total").HeaderText("Total").Template("<span id='total'>{{:Quantity*UnitPrice}}</span>").DefaultValue(0).Format("{0:$###,###.##}").Add();

There is no much documentation on how to do a full Total example with formatting. There should be one!


KH Khaled January 31, 2017 05:28 PM UTC

your sample didn't run for me, it gave me this error:
Line 20:     <compilation debug="true" targetFramework="4.5">
Line 21:       <assemblies>
Line 22:         <add assembly="Syncfusion.Linq.Base, Version=14.2450.0.28, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
Line 23:         <add assembly="Syncfusion.EJ, Version=14.2450.0.28, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
Line 24:         <add assembly="Syncfusion.EJ.Export, Version=14.2450.0.28, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />

I copied and paste your entire sample the grid is only allowing me to enter values in the first row, the subsequent rows, the values I enter disappear. I don't have anything extra in my razor, it is a replica of what you have.


VA Venkatesh Ayothi Raman Syncfusion Team February 1, 2017 09:33 AM UTC

Hi Khaled, 
Thanks for the update. 
Query #1: “ Using Template stopped formatting the cell as currency. I can format currency normally in other cell like this” 
Yes, template column doesn’t support format and this is default behavior of Grid. For expression column (that means total columns), we can set the currency format using templateRefresh event in Grid. In this event triggers when doing some action or refresh the template column. Please refer to the code example, 
Code example
@(Html.EJ().Grid<Object>("Grid") 
                .Datasource((IEnumerable<object>)ViewBag.DataSource) 
                .AllowPaging() 
             . . . 
                   .ClientSideEvents(e=>e.TemplateRefresh("templateRefresh")) 
                .Columns(col => 
                { 
                    col.Field("SNO").IsPrimaryKey(true).Add(); 
                    col.Field("quantity").Add(); 
                    col.Field("Price").Format("{0:C}").Add(); 
 
                    col.HeaderText("Total").Template("{{:quantity * Price }}").Add(); //Template column and we have calculated the values from price and quantity column 
                }) 
) 
<script> 
 
    function templateRefresh(args) { 
        if (args.cell.innerHTML.split("$").length == 1) 
        args.cell.innerHTML = "$" + args.cell.innerHTML; //here we can apply the currency format 
    } 
</script> 

Query #2:” Now it is displaying NaN when quantity and unitprice are 0. I've tried the following but couldn't.  
We have already told in previous query, the template column doesn’t support the Format. So, there is no need to define the Format property and default value in template column and this is not recommended way.  
We have also created a sample for your requirement as well as video demo. Please refer to the code example, demo and sample, 
Code example
@(Html.EJ().Grid<Object>("Grid") 
                .Datasource((IEnumerable<object>)ViewBag.DataSource) 
                .AllowPaging() 
             . . . 
                   
                .Columns(col => 
                { 
                    col.Field("SNO").IsPrimaryKey(true).Add(); 
                    col.Field("quantity").Add(); 
                    col.Field("Price").Format("{0:C}").Add();//here we can applying the currency format for price column. 
 
                    col.HeaderText("Total").Template("{{:quantity * Price }}").Add(); //Template column and we have calculated the values from price and quantity column 
                }) 
) 
 

Query #3:” your sample didn't run for me, it gave me this error: 
This error happens when we referred the mismatched assembly reference. For eg., if we referred DLL version 14.4.0.15 (eg. EJ.MVC ). but in webconfig page we have define the assembly name with mismatched version (eg. Syncfusion.EJ.MVC(v14.3400.49)). This is reason for this issue. Please refer to the following steps to avoid these issues, 
We have listed the required Namespaces, DLLs, script and CSS files to work with the ASP.Net MVC Control. So we need to replace all the following files as a latest one. 
 
DLLs  
Syncfusion.EJ.dll 
Syncfusion.EJ.Mvc.dll 
Script files 
Syncfusion script files: 
ej.web.all.min.js 
External Script files: 
jquery.min.js 
jsrender.min.js 
jquery.validate.min.js 
CSS files 
ej.web.all.min.css 
 
You can find the scripts and css files in the following locations: 
Script Location: [installed Location]\Syncfusion\Essential Studio\XX.X.X.XX\JavaScript\assets\scripts\web 
CSS Location: [installed Location]\Syncfusion\Essential Studio\ XX.X.X.XX \JavaScript\assets\css\web 
DLL Location: [installed Location]\Syncfusion\Essential Studio\ XX.X.X.XX \Assemblies 
Please refer the latest version (XX.X.X.XX) required DLLs in your project and change the referred version in project Web.config file that is located under the project’s root directory. 
 [web.config] 
<compilation debug="true" targetFramework="4.5" > 
    <assemblies> 
                <add assembly="Syncfusion.EJ, Version= XX.XXXX.X.XX, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" /> 
                <add assembly="Syncfusion.EJ.Mvc, Version= XX.XXXX.X.XX, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" /> 
    </assemblies> 
</compilation> 
 
Once clear the browser cache, bin and obj folder before run the upgraded project. 
Regards, 
Venkatesh Ayothiraman. 



KH Khaled February 1, 2017 03:14 PM UTC

Amazing customer support! 

It worked for the most part. Now I am a fan :)


VA Venkatesh Ayothi Raman Syncfusion Team February 2, 2017 07:21 AM UTC

Hi Khaled, 
Thanks for the feedback. 
We are happy to hear that your requirement is achieved. 
Regards, 
Venkatesh Ayothiraman. 


Loader.
Up arrow icon