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 add auto calculated Total column

Thread ID:

Created:

Updated:

Platform:

Replies:

128585 Jan 30,2017 03:57 PM Feb 2,2017 02:21 AM ASP.NET MVC 6
loading
Tags: Grid
Khaled
Asked On January 30, 2017 03:57 PM

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 [Syncfusion]
Replied On January 31, 2017 05:17 AM

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. 


Khaled
Replied On January 31, 2017 10:28 AM

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
Replied On January 31, 2017 12:28 PM

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 [Syncfusion]
Replied On February 1, 2017 04:33 AM

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. 


Khaled
Replied On February 1, 2017 10:14 AM

Amazing customer support! 

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

Venkatesh Ayothi Raman [Syncfusion]
Replied On February 2, 2017 02:21 AM

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


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.

;