ASP.Net Kendo UI Grid Calculated column

[Armulator]

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>

[Vladimir Iliev]

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

[Russell]

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?

[Vladimir Iliev]

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

[Erik]

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?

[Alex Hajigeorgieva]

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

[Erik]

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