Telerik MVC Grid - охватывает все ячейки нижнего колонтитула - PullRequest
Новая
       6

Telerik MVC Grid - охватывает все ячейки нижнего колонтитула

3 голосов
/ 20 сентября 2011

Я пытаюсь найти способ создать нижний колонтитул, который будет охватывать все столбцы в Telerik MVC Grid.

Я пробовал шаблоны, но они охватывают только столбец, которому они назначенычтобы ... есть идеи?

Ответы [ 2 ]

1 голос
/ 20 сентября 2011

Что я вижу, шаблон нижнего колонтитула в Telerik MVC Grid только для столбца.Нет свойства, с которым мы могли бы играть, чтобы иметь полный контроль над нижним колонтитулом.

До тех пор, пока Telerik не выпустит будущую версию с этой функцией, я предлагаю вам создать свой собственный нижний колонтитул с javascript для события OnLoad в сетке.Есть разные способы сделать это.В моем примере ниже используется jQuery + jQuery.tmpl () .

Обратите внимание, что этот пример будет работать, только если ваша сетка находится в режиме Ajax .Это связано с тем, что HTML-код, отображаемый с помощью Telerik MVC Grid, отличается, если вы используете его в режиме Ajax или Server. Если вы используете вашу сетку в режиме сервера , посмотрите на синтаксис 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>
0 голосов
/ 22 сентября 2011

Обновление .... Пришлось возиться с выходом, работает довольно гладко.
Добавил tfoot перед thead: 

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