Kendo Grid MVC Hierarchy with Aggregate_kendo clientfootertemplate-优快云博客

本文链接：https://blog.youkuaiyun.com/clear_zero/article/details/51211670

本文介绍了如何在Kendo Grid MVC中实现层级数据展示，并结合子表进行总计计算。由于官方文档不完整，内容主要来自于实践拼接。特别提示，使用IEnumerable绑定视图模型时，编辑后回传到控制器可能导致模型为null，需将母表数据放入单独的Model。此外，通过JavaScript展开数据行的方法也进行了说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

工作上用到，是用kendo grid显示两个有关联的表。母表可以编辑，子表显示一个数目的合计. Kendo自身的文档不全，这个是各种拼凑出来的。

注意

view 邦定model的时候用直接用Ienumable的话，当编辑完毕送回到controller的时候model是null. 需要把母表的list放到一个model里面
如果需要从javascript上面Expand

function dataBound() {

this.expandRow(this.tbody.find("tr.k-master-row").first());
           }

<pre name="code" class="csharp"><pre name="code" class="csharp">//Model
public class PriceChangeList
    {
        public IEnumerable<PriceChangeModel>   PriceChanges { get; set; } //这样写是为了能让model传回到controller
    }

public class PriceChangeModel
    {
        public int PriceChangeNumber { get; set; }
        public string  PriceChangeDescription { get; set; }
        public string Fescia { get; set; }
        public string Concession { get; set; }

        public double StartLeadHour { get; set; }

        public double EndLeadHour { get; set; }

    }

public class Site_PriceChange
    {
        public int PriceChangeNumber { get; set; }
        public string Fescia { get; set; }
        public string Concession { get; set; }

        public int SiteCode { get; set; }

        public string SiteDescription { get; set; }
    }

//Controller
        public ActionResult Home()
        {
            PriceChangeList pclist = new PriceChangeList{
                PriceChanges = new List<PriceChangeModel>()
                {
                 new PriceChangeModel {  PriceChangeNumber =1, PriceChangeDescription ="PC1", Fescia ="HOF" ,Concession ="WEB",StartLeadHour =24, EndLeadHour =24},
                 new PriceChangeModel {  PriceChangeNumber =2, PriceChangeDescription ="PC2", Fescia ="GB1" ,Concession ="GB1",StartLeadHour =48, EndLeadHour =48},
                 new PriceChangeModel {  PriceChangeNumber =2, PriceChangeDescription ="PC2", Fescia ="HOF" ,Concession ="NOR",StartLeadHour =48, EndLeadHour =48},
                 new PriceChangeModel {  PriceChangeNumber =3, PriceChangeDescription ="PC3", Fescia ="DEB" ,Concession ="NOR",StartLeadHour =36, EndLeadHour =24},
                 }
            };
            List<PriceChangeModel> lstpricechange = new List<PriceChangeModel>()
                {
                 new PriceChangeModel {  PriceChangeNumber =1, PriceChangeDescription ="PC1", Fescia ="HOF" ,Concession ="WEB",StartLeadHour =24, EndLeadHour =24},
                 new PriceChangeModel {  PriceChangeNumber =2, PriceChangeDescription ="PC2", Fescia ="GB1" ,Concession ="GB1",StartLeadHour =48, EndLeadHour =48},
                 new PriceChangeModel {  PriceChangeNumber =2, PriceChangeDescription ="PC2", Fescia ="HOF" ,Concession ="NOR",StartLeadHour =48, EndLeadHour =48},
                 new PriceChangeModel {  PriceChangeNumber =3, PriceChangeDescription ="PC3", Fescia ="DEB" ,Concession ="NOR",StartLeadHour =36, EndLeadHour =24},
                 };

            return View("PriceChangeHome",pclist);
        }

        [HttpPost]
        public string  Home(PriceChangeList lstpricechange)
        {
           //当view post的时候这个函数被触发
          //model会被传回来，用来更新数据库
            return "";
        }


        public ActionResult GetPriceChangeSite(int pricechangenumber,string fescia, string concession, [DataSourceRequest] DataSourceRequest request)
        {
            List<Site_PriceChange> lstpricechangesite = new List<Site_PriceChange>()
            {
                new Site_PriceChange {SiteCode=1, SiteDescription ="Site1",PriceChangeNumber =1, Fescia ="HOF" ,Concession ="WEB"  },
                new Site_PriceChange {SiteCode=2, SiteDescription ="Site2",PriceChangeNumber =1, Fescia ="HOF" ,Concession ="WEB"  },
                new Site_PriceChange {SiteCode=3, SiteDescription ="Site3",PriceChangeNumber =1, Fescia ="HOF" ,Concession ="WEB"  },

                new Site_PriceChange {SiteCode=4, SiteDescription ="Site4",PriceChangeNumber =2, Fescia ="GB1" ,Concession ="GB1"  },
                new Site_PriceChange {SiteCode=5, SiteDescription ="Site5",PriceChangeNumber =2, Fescia ="HOF" ,Concession ="NOR"  },
                new Site_PriceChange {SiteCode=6, SiteDescription ="Site6",PriceChangeNumber =2, Fescia ="HOF" ,Concession ="NOR"  },

                new Site_PriceChange {SiteCode=7, SiteDescription ="Site7",PriceChangeNumber =3, Fescia ="GB1" ,Concession ="GB1"  },
                new Site_PriceChange {SiteCode=8, SiteDescription ="Site8",PriceChangeNumber =3, Fescia ="HOF" ,Concession ="WEB"  },
                new Site_PriceChange {SiteCode=9, SiteDescription ="Site9",PriceChangeNumber =3, Fescia ="HOF" ,Concession ="WEB"  },
            };

            List <Site_PriceChange> lstcurrent = lstpricechangesite.Where(p => p.PriceChangeNumber == pricechangenumber && p.Fescia == fescia && p.Concession == concession).ToList<Site_PriceChange>();

            return Json(lstcurrent.ToDataSourceResult(request));

        }

//View
@model PriceChangeList //邦定model


@using (Html.BeginForm())
    {
        @(Html.Kendo().Grid<PriceChangeModel>(Model.PriceChanges)
            .Name("pricechangegrid")
            .Columns(col=>
            {
                col.Bound(p => p.PriceChangeNumber)
                    .Title("Price Change Number")
                    .ClientTemplate("#=PriceChangeNumber#" + "<input type='hidden' name='PriceChanges[#= index(data)#].PriceChangeNumber' value='#=PriceChangeNumber#' />");  <span style="color:#990000;"><strong>//Hidden field用来把Model和view邦定，否则传回到controller的model是Null</strong></span>
                col.Bound(p => p.PriceChangeDescription)
                    .Title("Description")
                    .ClientTemplate("#=PriceChangeDescription#" + "<input type='hidden' name='PriceChanges[#= index(data)#].PriceChangeDescription' value='#=PriceChangeDescription#' />");
                col.Bound(p => p.Fescia)
                    .Title("Fascia")
                    .ClientTemplate("#=Fescia#" + "<input type='hidden' name='PriceChanges[#= index(data)#].Fescia' value='#=Fescia#' />");
                col.Bound(p => p.Concession)
                    .Title("Concession")
                    .ClientTemplate("#=Concession#" + "<input type='hidden' name='PriceChanges[#= index(data)#].Concession' value='#=Concession#' />");
                col.Bound(p => p.StartLeadHour)
                    .Title("Start Lead Hour")
                    .ClientTemplate("#=StartLeadHour#" + "<input type='hidden' name='PriceChanges[#= index(data)#].StartLeadHour' value='#=StartLeadHour#' />");
                col.Bound(p => p.EndLeadHour)
                    .Title("End Lead Hour")
                     .ClientTemplate("#=EndLeadHour#" + "<input type='hidden' name='PriceChanges[#= index(data)#].EndLeadHour' value='#=EndLeadHour#' />");
            })
            .Scrollable ()
            .HtmlAttributes(new { style = "height:600px;" })
            .ClientDetailTemplateId ("pricechangesitegrid")  <span style="color:#3333ff;"><strong>//目表和子表的连接</strong></span>
            .DataSource (d =>d
                .Ajax ()
                // .Read (read => read.Action ("GetPriceChange","PriceChange"))
                .Model ( m => {
                    m.Id(p => p.PriceChangeNumber);
                    m.Id(p => p.Fescia);
                    m.Id(p => p.Concession);
                    m.Field(p => p.PriceChangeNumber).Editable(false);
                    m.Field(p => p.PriceChangeDescription).Editable(false);
                    m.Field(p => p.Fescia).Editable(false);
                    m.Field(p => p.Concession).Editable(false);
                })
                .ServerOperation (false)  <span style="color:#990000;"><strong>//这样写也是为了把model传回给controller</strong></span>
            )
            .Editable (e => e.Mode (GridEditMode.InCell))  <span style="color:#cc9933;"><strong>//母表可以编辑</strong></span>


        )


    <input type="submit" value="some value" class="submit btn blue-btn special-submit" />


}

@section scripts
{
        <script id="pricechangesitegrid" type="text/kendo-tmpl">  <span style="color:#3333ff;"><strong>//子表</strong></span>
            @(Html.Kendo().Grid<Site_PriceChange>()
                .Name("sitegrid_#=PriceChangeNumber##=Fescia##=Concession#")  <span style="color:#3333ff;"><strong>//表之间的relationship</strong></span>
                .Columns (col =>
                {
                    col.Bound(pcs => pcs.SiteCode)
                        .Title("Site Code")
                        .ClientFooterTemplate("Count:\\#=count\\#");   <span style="background-color: rgb(255, 255, 0);"><strong>//子表的合计'<span style="color:#ff0000;">\\</span>'这个符号很重要，如果没有的话.</strong></span>
                    col.Bound(pcs => pcs.SiteDescription).Title("Description");
                }
                )
                .DataSource (d => d
                    .Ajax ()
                    .Read (read => read.Action ("GetPriceChangeSite", "PriceChange", new { pricechangenumber = "#=PriceChangeNumber#", fescia= "#=Fescia#", concession= "#=Concession#" }))
                    .Aggregates(agg =>
                    {
                        agg.Add(pcs => pcs.SiteCode).Count();
                    })
                    .ServerOperation (false)
                )
                .ToClientTemplate ()
            )
        </script>
       <script type="text/javascript">
           function dataBound() {
               this.expandRow(this.tbody.find("tr.k-master-row").first());
           }

           function index(dataItem) {  <span style="color:#990000;"><strong>//javascript函数服务于母表的Hidden field</strong></span>
               var data = $("#pricechangegrid").data("kendoGrid").dataSource.data();
               debugger;
               return data.indexOf(dataItem);
           }
       </script>