title: Custom Kendo UI Grid Footer - Update Dynamically
body: <p>I have a need to display a custom calculation in a Kendo UI Grid footer template.  The built-in aggregates won't work for the business requirements.  I have found a way to display results from a function in the footer template using code snippets shown below.  The key points in this code are:</p>
  
  <ol>
  <li>A custom calculation function (named calc) has been defined.</li>
  <li>A reference to the custom calculation function exists in the footerTemplate (i.e. footerTemplate: "Total: #=window.calc()#" ).</li>
  </ol>
  
  <hr>
  
  <pre><code>function calc() {
    // assume this to be dynamically determined  
    var field = "Value";
  
    // assume this to be dynamically determined
    var dataSource = window.ds;
  
    // some custom calc logic
    var newValue = 0;
  
    $.each(dataSource.data(), function(index, model) {
        newValue += model.get(field);
    });
  
    return newValue;
  }
  
  $(document).ready(function() {
      window.ds = new kendo.data.DataSource({
        data: [
          {Name:"One", Value:1},
          {Name:"Two", Value:1},
          {Name:"Three", Value:1},
          {Name:"Four", Value:1},
          {Name:"Five", Value:1}
        ],
        pageSize: 10,
        schema: {
          id: "Name",
          fields: {
            Name: { type: "string"},
            Value: { type: "number"}
          }                      
        }
      });
  
      $("#grid").kendoGrid({
          dataSource: window.ds,
          scrollable: false,
          pageable: true,
          editable: true,
          columns: [
            { field: "Name", title: "Name" },
            { field: "Value", title: "Value", 
             footerTemplate: "Total: #=window.calc()#" }
          ]
      });
  });
  </code></pre>
  
  <p>The problem that I'm fighting is that the calculated value needs to be updated on-the-fly when the user changes one of the values in the column.  This doesn't seem to be a straighforward way to make this happen in the Kendo UI Grid API.  </p>
  
  <p>What I've done so far is add a save handler to the Grid which makes a call to the Grid's refresh method.  </p>
  
  <pre><code>    $("#grid").kendoGrid({
          dataSource: window.ds,
          scrollable: false,
          pageable: true,
          editable: true,
          columns: [
            { field: "Name", title: "Name" },
            { field: "Value", title: "Value", 
             footerTemplate: "Total: #=window.calc()#" }
          ],
          save: function (e) {
            e.sender.refresh();
          }
      });
  </code></pre>
  
  <p>This works (the footer values are updated immediately after the user change a value in the column), but it has a drawback.  When changing a value and then clicking on another cell in the column, the newly clicked cell doesn't immediately go into edit mode (this functionality is apparently being short circuited by the call to the refresh method).  The user then has to click the cell a second time to have it enter edit mode (yuck!).</p>
  
  <p>There is a working example of this code at <a href="http://trykendoui.telerik.com/oVEV/4" rel="nofollow">http://trykendoui.telerik.com/oVEV/4</a>.</p>
  
  <p>The solution that I have so far is less than ideal.  Anyone know of a more elegant solution to this problem?</p>