How to add auto calculated Total column

[Khaled]

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?

[Venkatesh Ayothi Raman]

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 

                }) 

) 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/SYNCFU~2-863678973.7Z 

Regards, 

Venkatesh Ayothiraman. 

[Khaled]

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!

[Khaled]

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.

[Venkatesh Ayothi Raman]

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 

                }) 

) 

 

Demo: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Expression-1944670168 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionMvcApplication71810293867 

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. 

[Khaled]

Amazing customer support! 

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

[Venkatesh Ayothi Raman]

Hi Khaled, 

Thanks for the feedback. 

We are happy to hear that your requirement is achieved. 

Regards, 

Venkatesh Ayothiraman.