Kendo UI：无法将 footerTemplate 添加到网格

Posted 2023-05-07

【中文标题】Kendo UI：无法将 footerTemplate 添加到网格

【英文标题】：Kendo UI: Not able to add footerTemplate to grid

【发布时间】：2013-04-16 20:47:09

【问题描述】：

我正在尝试在 footerTemplate 中显示字段的计数。 跟随是小提琴：

http://jsbin.com/ajoyug/8/edit

但是，如果没有 footerTemplate，它可以正常工作。但是一旦我添加了 footerTemplate，它就会停止工作。

在 aggregateResult 对象中，我得到了 count 的值。但是那我该如何将它添加到footerTemplate？

请帮帮我。

谢谢！！

【参考方案1】：

问题在于你的方法网格被渲染两次，第一次是在 Kendo UI initialization 上（在第一次 bind 中隐含），第二次是在你 bind实际数据。

第一次数据还是不可用，然后就失败了。

如果你想走那条路，你应该这样做：

<div id="myListView" data-role="grid" class="transaction-grid"
     data-columns="[
             field: 'name', title: 'Name', width:'20%' ,
             
                field: 'age',
                title: 'Age' , 
                width:'35%', 
                footerTemplate: 'Total Count: # if (data.age)  # #= age.count # #  #'  
            
            ]"
     data-bind="source: dataSource">
</div>

即检查data.age 是否可用，然后打印。

否则，我建议遵循 @UmankantPatil 的建议，不要使用 data-* 而是使用 javascript 来初始化小部件和绑定数据。

在你的 JSBin here的修改版本中检查它

【讨论】：

谢谢欧娜！！你和 Umakant 在这个问题上都是正确的......你的解决方案也很有效！！ :) 感谢您简要解释幕后发生的事情..

【参考方案2】：

我无法解释为什么它不起作用。但是我尝试过用其他方式来做你的例子，效果很好。

这里是链接。

http://jsbin.com/ajoyug/35/edit

【讨论】：

如果你想维护 mvvm 模式。然后这里还有另一种方法来做到这一点。 jsbin.com/ajoyug/46/edit

感谢 Umakant！我以正常的方式尝试了它，它工作正常..但是 MVVM 方式没有成功！谢谢..你和奥纳这次都是正确的:)