使用两个或多个带MVC包装器的列的KendoUI Grid自定义页脚

时间:2014-07-21 17:25:30

标签: kendo-ui kendo-grid kendo-asp.net-mvc

我有一个Kendo Grid,想要使用两列来创建ClientFooterTemplate(Value2)。

所以,我有:

@(Html.Kendo().Grid<MyGridDto>().Name("grid")
                  .Columns(columns =>
                  {
                      columns.Bound(p => p.Value1)
                       .ClientFooterTemplate("#= sum #");
                      columns.Bound(p => p.Value2);
                       .ClientFooterTemplate ( HERE I WANT TO GET SUM OF VALUE3 / SUM VALUE 2)
                      columns.Bound(p => p.Value3).Visible(false);

                  } 
                  .DataSource(dataSource => dataSource
                      .Ajax()  
                      .Aggregates(aggregates =>
                      {
                          aggregates.Add(p => p.Value1).Sum();
                          aggregates.Add(p => p.Value2).Sum();
                          aggregates.Add(p => p.Value3).Sum();
                      })            
                      .Read(read => read.Action("List", "MyController))                      )
 )

MyGridDto

public class MyGridDto
{
     public decimal Value1 { get; set; }
     public decimal Value2 { get; set; }
     public decimal Value3 { get; set; }         
}

我想使用Value3的总和/ Value2的和来显示Value2页脚。我怎么能这样做?

由于

1 个答案:

答案 0 :(得分:1)

您可以通过将ValueComputed的值转换为数据源请求端的临时变量并添加页脚行来实现此目的:

 <div class="k-grid k-widget">
    <table class="k-focusable" id="totals" >
        <tr>
            <td/>
            <td/>
            <td>
                Total price: <span data-bind="text: priceTotal" />
            </td>
        </tr>
    </table>
 </div>

有关详细信息,请参阅以下示例:

Kendo UI Grid With Table Footer by Darren Bell

您可能需要单独创建数据源,并且必须在创建数据源后绑定viewmodel。


修改

根据您的更新,我使用与上一个表格页脚示例相同的逻辑创建了一个可供参考的工作示例。请在下面的链接中找到工作示例:

<强> Kendo UI Grid Custom Calculated Footer

如果这不是您想要的,请告诉我!

编辑2:

<强> Client Footer only