Question

I’m trying to find a way to create a footer that will span all columns in an Telerik MVC Grid.

I’ve tried the templates, but they only span the column they’re are assigned to … any ideas?

Answer 1

For what i can see, the footer template in the Telerik MVC Grid is per column only. There’s no property that we can play with to have full control on the footer.

Until Telerik release a future version with this feature, i suggest you to build your own footer with javascript on the OnLoad event of the grid. There’s different ways to accomplish this. My example below use jQuery + jQuery.tmpl().

Please note that this example will only work if your grid is in Ajax mode. Its because the html code that is rendered by the Telerik MVC Grid is different if you use it in Ajax or Server mode. If you use your grid in Server mode, look at the html syntax that is rendered by the grid to ajust your javascript code.

Grid definition

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 function

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

jQuery Template

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