How to put field value in footer Kendo grid?

Question

I want to get a value from a field in my grid, and put it in the footer of the grid. Is there a smart way to do it like

       columns: [
            {field: "product", title: "Product"},
            {field: "price", title: "Price"},
            {field: "priceDoubledInFooter", title:"priceDoubledInFooter",footerTemplate:#=price*price#},

        ]

Answer 1

I have prepared a simple dojo for you: http://dojo.telerik.com/UWOvi/2

This shows the contact names within the demo grid in a bootstrap popover when clicked.

Without knowing your specific needs I have included all the values from one column into the popover.

This is achieved by creating a function called getMeValues() that is assigned to the footerTemplate.

This function then does the following:

  function getMeValues(data)
  {
    var gridDS = $('#grid').data('kendoGrid').dataSource.data(); 

    var result = ''; 

    gridDS.forEach(function(row, index){
      result += index + '::' + row.ContactName + '<br/>';
    }); 

return '<button class="btn btn-primary" data-container="body" data-toggle="popover" data-title="I am some data" data-content="' +   result + '"/>' + ' Click Me</button>';

}

I gain access to the data within the dataSource for the grid and then iterate over the ContactName field and add that to a var. I finally then create a button which is placed in the footer which activates a popover to display the contents.

Then to get the newly created button to function I bind the popover event within the dataBound event of the grid so that it knows to activate the button for me.

Obviously change this example for your specific needs but if you have any further questions I'll be happy to help.