Update aggregate values for a calculated field / column

[Erik]

Hi,

I have a sub-grid where only a few columns are editable (InCell/batch mode).

I'm trying to display and update aggregate values for a calculated field/column.

I have tried 2 approaches, but got stuck with both:

1) Using the ViewModel

I have added calculated field to my ViewModel class

public int Quantity { get; set; }
public decimal UnitCost { get; set; }
public decimal TotalAmount
{
    get { return (decimal) Quantity * UnitCost; }
}

This does allow me to define an aggregate value for TotalAmount in the DataSource section, and that displays correctly initially.

But if I modify Quantity or UnitCost (both editable columns in the grid, using InCell editing), the value of TotalCost doesn't get updated accordingly. 

Can I force a refresh of the contents of the row and the aggregate values (e.g. in onSave() function?) *without* saving the edits, and if so: how?

 

2) Using a calculated column

Following the instructions of your colleague in this post: 

https://www.telerik.com/forums/asp-net-kendo-ui-grid-calculated-column

... I defined a Template-type column with calculated values.

function calculateField(data) {
    var totalCost = data.Quantity * data.UnitCost;
    return totalCost;
}

But that value doesn't get updated either when I change the values of Quantity or UnitCost.

Furthermore, I don't know if it's possible to define/display aggregate values for a column of type Template?

Appreciate your help,

Erik

[Anton Mironov]

Hello, Erik,

 

Thank you for the provided code snippets.

In order to apply the calculated property, a good approach is represented below:

https://www.telerik.com/forums/asp-net-kendo-ui-grid-calculated-column#jVIqUfvHyEGsVOQZHQa5nA

 

Find more information about updating aggregates on change in the following article: 

https://docs.telerik.com/kendo-ui/knowledge-base/update-aggregates-on-change

 

Please let me know if I can assist you any further.

 

Regards,
Anton Mironov
Progress Telerik

[Erik]

Hi Anton,

Thx for your reply.

(Note that I had already included that first link in my post; I was the last person to ask a question in that thread, lol)

Two more questions if I may... :-)

1) If I use a calculated column, as described in that post, using

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

How can I aggregate on such a column? The aggregates are defined in the DataSource section, and what I tried so far (trying to refer to a template column) resulted in errors.

2) The article you refer to for updating the aggregates (and many other examples I have found) all start the javascript function by retrieving the grid, e.g. 

var grid = $("#grid").data("kendoGrid");

But I'm trying to do this is a sub-grid, which has a variable ID

.Name("gridParent_#=ChildId#") // template expression, to be evaluated in the master context

 

Can you pls. explain how to get the grid data of the appropriate sub-grid in javascript?

Thx for your help,

Erik

 

[Anton Mironov]

Hi, Erik,

I will go ahead and target each of the questions:

1. For template column aggregations a good approach is to use a ClientFooterTemplate. Target all values from the column by className and call the template function for the footer. Here is an example of the implementation:
   

   columns.Template("#=calculateField(data)#").HtmlAttributes(new { @class = "templateColumn" }).ClientFooterTemplate("#=sumTemplateColumn()#");
   
   
   function sumTemplateColumn() {
               var templateValuesArr = Array.from($('.templateColumn').get(), e => e.innerHTML);
   
               var sum = 0;
               for (i = 0; i < templateValuesArr.length; i++) {
                   sum += parseInt(templateValuesArr[i]);
               }
               return sum;
       }

   
   
2. In order to access the child grid, note, it needs to be observable(to be opened) first. In the event handler method, you can find the corresponding grid by searching for the closest (to the target) element with class .k-grid. Try this approach:
   

   $("#grid").on("click", ".btn-refresh", function(e) {
       var childGrid = $(e.target).closest(".k-grid").data("kendoGrid");
   });

I will be glad to assist you further.

 

Best Regards,
Anton Mironov
Progress Telerik