Question

我正在尝试找到一种方法来创建一个跨越Telerik MVC网格中所有列的页脚。

我已经尝试了模板，但是它们只跨越了他们被分配到的列...任何想法？

Answer 1

我可以看到，Telerik MVC网格中的页脚模板仅按列。我们可以使用任何属性来完全控制页脚。

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

请注意，此示例仅在您的网格处于Ajax模式时才有效。这是因为如果您在Ajax或服务器模式下使用它，Telerik MVC网格呈现的html代码会有所不同。 如果您在服务器模式下使用网格，请查看网格呈现的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>

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>

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

2 个答案:

网格定义

OnLoad功能

jQuery模板