Telerik MVC Grid - 跨越所有页脚单元格

Question

我正在寻找一种方法来创建一个跨越Telerik MVC Grid中所有列的页脚。

我已经尝试了模板，但它们只能跨越分配给它们的列...有什么想法吗？

- Greg

Answer 1

从我所看到的来看，Telerik MVC Grid中的页脚模板仅适用于每列。没有任何属性可以控制页脚。

在Telerik发布具有此功能的未来版本之前，建议您在网格的OnLoad事件中使用JavaScript构建自己的页脚。有不同的方法可以实现这一点。我的下面的示例使用jQuery + jQuery.tmpl()。

请注意，如果您的网格处于Ajax模式下，此示例仅适用。这是因为Telerik MVC Grid呈现的HTML代码在Ajax或服务器模式下使用时不同。如果您在服务器模式下使用网格，请查看网格呈现的HTML语法以调整您的JavaScript代码。

网格定义

Html.Telerik().Grid(dataSource)
    .Name("grid")
    .Columns(column =>
        {
            column.Bound(a => a.Col1);
            column.Bound(a => a.Col2);
        })
    .DataBinding(bind => bind.Ajax().Select("action", "controller"))
    .ClientEvents(x =>
    {
        x.OnLoad("OnLoad");
    })
    .Render();

OnLoad函数

<script type="text/javascript">
    function OnLoad(e)
    {
        var gridContent = $(".t-grid-content", this);
        $("#gridFooterTemplate").tmpl().insertAfter(gridContent);
    }
</script>

jQuery模板

<script id="gridFooterTemplate" type="text/x-jquery-tmpl"> 
    <div class="t-grid-footer">
        <div class="t-grid-footer-wrap">
            <table cellspacing="0">
                <colgroup>
                    <col colspan="2">
                </colgroup>
                <tbody>
                    <tr class="t-footer-template">
                        <td>this is the footer</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</script>

- Alexandre Jobin

---

会尝试一下并且告诉你，感谢帮助。我甚至没想到使用jQuery模板，现在看来这正是使用它们的完美时机。 - Greg

Answer 2

更新...... 必须调整输出，现在运行得非常流畅。
在 thead 之前添加了一个 tfoot：

<script type="text/javascript">  
    function OnLoad(e) {  
        var gridContent = $(".t-grid-header", this);  
        $("#gridFooterTemplate").tmpl().insertBefore(gridContent);  
    }
</script>  

<script id="gridFooterTemplate" type="text/x-jquery-tmpl">   
        <tfoot class="t-footer-template">  
        <tr>  
            <td colspan="7"><span style="padding-top: 5px; font-size: .8em;">* Test Type: P = Pre-Test, O = Post Test, A= Anomalous</span></td>  
        <tr/>  
        </tfoot>
</script>

- Greg