This is a migrated thread and some comments may be shown as answers.
ASP.Net Kendo UI Grid Calculated column
6 Answers 545 Views
This is a migrated thread and some comments may be shown as answers.
Armulator
Top achievements
Rank 1
Armulator asked on 27 Sep 2013, 01:12 AM
I need to create a calculated column in Kendo Grid within ASP.Net. Something like this: http://jsbin.com/ojomul/89/edit where Full name is a calculated column. I tried doing this using using kendo server controls but unable to make it work. Here is my code:What I need is have the Total column calculated by the javascript function and update the UI automatically. Thanks

@(Html.Kendo().Grid(Model)   
  .Name("Grid")
  .Columns(columns =>
  {
      columns.Bound(p => p.ProductId).Groupable(false);
      columns.Bound(p => p.ProductName);
      columns.Bound(p => p.UnitPrice);
      columns.Bound(p => p.Quantity);
      columns.Bound(p => p.Tax);
      columns.Bound(p => p.Total).ClientTemplate("#= calculate() #");
 
  })
  .Groupable()
  .Pageable()
  .Sortable()
  .Scrollable()
  .Filterable()
  .Editable(e=>e.Mode(GridEditMode.InCell))
 
  .DataSource(dataSource => dataSource
      .Ajax()
      .Read(read => read.Action("Products_Read", "Product"))
      .PageSize(20)
      .Model(model =>
      {
          model.Id(p => p.ProductId);
          model.Field(p => p.ProductName);
          model.Field(p => p.UnitPrice);
          model.Field(p => p.Quantity);
          model.Field(p => p.Tax);
 
 
      })
 
 
  ))
 
<script type="text/javascript">
 
function calculate(e) {
 
    var result = p.UnitPrice * p.Quantity * p.Tax;
    return result;
}
</script>

6 Answers, 1 is accepted

Sort by
0
Accepted
Vladimir Iliev
Telerik team
answered on 30 Sep 2013, 11:05 AM
Hi Armulator,

 
You can define Template column and set it's ClientTemplate to call function which returns the full name - please check the example below: 

.Columns(columns =>
{
    columns.Template(c => { }).ClientTemplate("#=calculateField(data)#");

//Passed data contains current row model
function calculateField(data) {
  return data.first + " " + data.last;
}
Regards,
Vladimir Iliev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Russell
Top achievements
Rank 1
answered on 05 Oct 2015, 07:39 AM

Hi Vladimir,

Thanks for the help but I wanna know how to do it in the child grid.

I have a parent and child grid and want to do it in the child grid for every row.

Can you please give me a hint for it?
0
Vladimir Iliev
Telerik team
answered on 07 Oct 2015, 06:55 AM
Hi Ernest,

The same approach can be used for the child Grid as well - you should just escape the template syntax with double backslash (as mentioned in point 11 in this help article) as demonstrated below:

.Columns(columns =>
{
    columns.Template(c => { }).ClientTemplate("\\#=calculateField(data)\\#");

Regards,
Vladimir Iliev
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Erik
Top achievements
Rank 1
answered on 14 May 2020, 03:03 PM

This does not seem to work anymore.

Template(c => { }) results in error Cannot convert lambda expression to type 'string' because it is not a delegate type

How should I define a calculated column?

0
Alex Hajigeorgieva
Telerik team
answered on 18 May 2020, 10:41 AM

Hi, Eric,

I tested the snippet provided by my colleague with an Ajax() bound MVC grid and it works well.

However, the error that you are sharing sounds like it could come from the ASP.NET Core Grid which requires a slightly different syntax and features only a string overload:

So for ASP.NET Core, you can use this:

columns.Template("#=calculateField(data)#");

function calculateField(data) {
        return data.UnitPrice * data.UnitsInStock;
    }

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Erik
Top achievements
Rank 1
answered on 19 May 2020, 03:47 AM

Hi Alex,

Thx for that.

You are right, I was trying to get this to work in ASP.NET Core.

I sometimes get confused between forum posts on the different versions, my bad.

Erik

Tags
Grid
Asked by
Armulator
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Russell
Top achievements
Rank 1
Erik
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or