Kendo UI User Footer - Updates Dynamically

Question

I need to display the user calculation in the Kendo GUI footer template. Embedded units will not work for business requirements. I found a way to display the results from a function in the footer using the code snippets shown below. The key points in this code are:

• Defined user function calculation (named calc).
• A link to a custom calculation function exists in footerTemplate (i.e. footerTemplate: "Total: # = window.calc () #").

---

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()#" }
        ]
    });
});

, , , " ", . , API- Kendo UI Grid.

, , - Grid, Grid.

    $("#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();
        }
    });

( ), . , , ( , -, ). , (yuck!).

http://trykendoui.telerik.com/oVEV/4.

, , . - ?

Answer 1

... :

footerTemplate: "Total:<span id='myId'> #=window.calc()#</span>"

, span ? . myId

, , ( , ). , , change kendo. . :

window.ds = new kendo.data.DataSource({
     data: [
         //omitted code...
     ],
     pageSize: 10,
     schema: {
         //omitted code...               
     },
     change: function(e){
          var total = window.calc();
          $("#myId").html(total.toString());
     }
});

;). .

Answer 2

, . , . , . Grid, HTML Excel.

let grid = $('#grid').getKendoGrid(); // Kendo Grid
let dataItem = grid.dataItem(tr); // tr: JQuery (selected Row) get Item
let index= grid.items().index(grid.select()); // Selected Row get Row Index in DataSource of the Grid
let rowItem = grid.dataSource.at(index);

dataItem = data.length > 0 && data.length === 1 ? data : dataItem; // data is the new item with the same properties as the item datasource of the Grid.
dataItem.dirty = true;
// You can update all properties with the below code or just one it depends what you want to do. Aggregate functions will be called and Groupfooter and footer also.
for (let [key, value] of Object.entries(dataItem )) {
    rowItem.set(key, value); //

}