Kendo child grid call jquery function row template in MVC, it's work in jquery but how it's work in MVC grid

Question

I'm facing kendo child grid columns template issue can anyone help to find out the problem,

below my code for grid and Child grid

https://demos.telerik.com/aspnet-mvc/grid/detailtemplate

// Parent grid code
<div class="row">
   <div class="col-md-12">
      <div class="table-responsive">
         @(Html.Kendo().Grid<VehicleMain>()
         .Name("VehicleGrid")
         .NoRecords("No Record Found.")
         .Columns(columns =>
         {                                                                                                       
         columns.Bound(e => e.VehAssetNo).Title("ASSET NO").Width("11%");
         columns.Bound(e => e.BranchCode).Title("Branch").Width("11%");        
         );
         })         
         .Sortable()
         .Filterable()
         .ClientDetailTemplateId("template")         
         .DataSource(dataSource => dataSource
         .Ajax()        
         .Read(read => read.Action("GetVehicleMainBySearch", "VehicleMain", new { area = "" }))        
         .Model(VehicleMain => VehicleMain.Id(x => x.VehId))
         )
         )
      </div>
   </div>
</div>

//Child grid code here I'm facing issue to binding jquery function in the row template

<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().Grid<VehicleSub>()
.Name("grid_#=VehId#") // template expression, to be evaluated in the master context
.NoRecords("No Record Found.")
.Columns(columns =>
{
columns.Bound(o => o.JobType).Title("Job Type").Width("12%");
columns.Bound(o => o.VehSubDatePerformed).Title("Date Performed").Format("{0:MM/dd/yyyy}").Width("12%");
columns.Bound(o => o.VehSubAmountSpent).Title("Amount Spent").Width("16%");
columns.Bound(o => o.VehSubODO).Title("ODO READING").Width("20%");
columns.Bound(o => o.VehSubNote).Title("Note").Width("20%");
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(Constant.KendoDefaultPageSize)
.ServerOperation(false)
.Read(read => read.Action("GetVehicleSubHistory", "VehicleMain", new { VehId = "#=VehId#" }))
)
.ToClientTemplate()
)
</script>

Just want to call this function here the jquery code

function odoTotal() {
    var gridVehIddata = dataSource.data();
    var VehSubODOfirst = 0;
    var VehSubODOlast = 0;
    var datalength = (gridVehIddata.length) - 1;
    VehSubODOfirst = gridVehIddata[0].VehSubODO;
    VehSubODOlast = gridVehIddata[datalength].VehSubODO;

    return VehSubODOfirst - VehSubODOlast;
}

Above function, I want to call in the Child grid with the VehSubODO column filed but every time just function name print, not function execute if I work with jquery kendo grid then it's work can anyone suggest how can I solve this.

I have tried this solution but not work.

columns.Bound(o => o.VehSubODO).Title("ODO READING").Width("20%").FooterTemplate("odoTotal()");

columns.Bound(o => o.VehSubODO).Title("ODO READING").Width("20%").ClientFooterTemplate("odoTotal()");

In both cases, I gotten the same result as mention in the below image.

G_P G_P · Accepted Answer · 2020-08-15T17:59:35

You need to wrap the call to the js function within the ClientFooterTemplate, like so:

columns.Bound(o => o.VehSubODO).Title("ODO 
READING").Width("20%").ClientFooterTemplate("#= odoTotal()#");

Also, you may need to escape the # characters since you want that javascript function called within the child grid scope (more info here) like so:

columns.Bound(o => o.VehSubODO).Title("ODO 
READING").Width("20%").ClientFooterTemplate("\\#= odoTotal()\\#");

Kendo child grid call jquery function row template in MVC, it's work in jquery but how it's work in MVC grid

1 Answers