Kendo子网格在MVC中调用jquery函数行模板，它可以在jquery中工作，但如何在MVC网格中工作

问题描述

我面临着剑道子网格列模板的问题，任何人都可以帮助找出问题所在，

在我的网格和子网格代码下面

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>

//此处的子网格代码我面临在行template中绑定jquery函数的问题

<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",new { VehId = "#=VehId#" }))
)
.ToClientTemplate()
)
</script>

只想在这里将此函数称为jquery代码

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;
}

在函数上方，我想使用VehSubODO列来调用Child网格，但是每次仅打印函数名称，而不是函数执行（如果我使用jQuery kendo网格，那么有人可以建议我这样做）解决这个问题。

我已经尝试过此解决方案，但是没有用。

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

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

在两种情况下，我得到的结果与下图中提到的结果相同。

解决方法

您需要将对js函数的调用包装在ClientFooterTemplate中，如下所示：

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

此外，您可能需要转义＃个字符，因为您希望像在子网格范围（more info here）中那样调用javascript函数，

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