Update aggregate values for a calculated field / column

4 posts, 0 answers
  1. Erik
    Erik avatar
    15 posts
    Member since:
    Jun 2018

    Posted 31 May 2020 Link to this post

    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

  2. Anton Mironov
    Admin
    Anton Mironov avatar
    168 posts

    Posted 03 Jun 2020 Link to this post

    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

    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.
  3. Erik
    Erik avatar
    15 posts
    Member since:
    Jun 2018

    Posted 05 Jun 2020 Link to this post

    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

     

  4. Anton Mironov
    Admin
    Anton Mironov avatar
    168 posts

    Posted 09 Jun 2020 Link to this post

    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

    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.
Back to Top