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

Question

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

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

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", "VehicleMain", 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 列，但每次只打印函数名称，如果我使用 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()");

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

Answer 1

你需要在ClientFooterTemplate中封装对js函数的调用，像这样：

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