Kendo UI - SubGrid Inside弹出编辑器Grid

时间:2013-10-31 20:13:01

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

我目前正在使用带有Razor引擎的MVC4 KendoUI项目C#。 在网上搜索了很多后,我找不到实现这个目标的方法:

我有一个基于我的模型的Kendo网格,它是一个具有一些属性的“Satelite”对象的集合,其中一个属性是“Transponder”对象的列表。

我的“Satelite”视图包含一个可编辑的Kendo网格的CRUD,这个网格没有显示所有字段,我希望在可编辑模式下的行为,您可以编辑和更新其所有属性,所以我想出了一个编辑器模板,然后当用户单击“编辑”按钮时,我显示一个自定义局部视图,其中包含要更新的所有字段。这对我来说很有效,除非我为“Transponder”列表创建另一个网格,但似乎无法正常工作。我能够成功地加载网格执行读取操作,但是当我点击“转发器”网格中的“删除”按钮时,该项目从网格中消失但不会转到控制器而在服务器端不执行任何操作。如果我再次更新和编辑,该项目仍然存在。

我还想知道你们是否认为我正在采取正确的方法,或者你知道一种更直接的方法。

最相似的情况我发现它是Example

这不完全是我想要的但是要让你知道我想要达到的目的。

以下是“Satelite”CRUD视图:

@model IEnumerable<Test_MVC_DTV.Models.Satelite>

@{
    ViewBag.Title = "Satelites";
}

<style>
        #organizer { 
            width: auto;
            margin: 0 auto;
        }

    .k-edit-form-container { width: auto; height: auto;}
    </style>


<div id="organizer">
        @(Html.Kendo().PanelBar()
            .Name("panelbar")
            .ExpandMode(PanelBarExpandMode.Multiple)
            .HtmlAttributes(new { style = "min-width: 800px; width: auto;margin: auto;" })
            .Items(panelbar =>
                {
                    panelbar.Add()
                            .Text("Satélites")
                            .Expanded(true)

                            .Content(@<div style="padding: 10px;">
                                          <section>
                                              Nombre: <input style="margin-left: 7px" id="txtNombre"/> 
                                              <button style="margin-left: 10px" class="k-button" id="btnBuscar">BUSCAR</button>

                                          </section>
                                      </div>);

                })

        ) 
    </div>

@(Html.Kendo().Grid(Model)    
      .Name("grdSatelites")
      .Columns(columns =>
          {
              columns.Bound(p => p.SateliteId).Groupable(false);
              columns.Bound(p => p.Denominacion);
              columns.Bound(p => p.Comentario);

              columns.Command(cmd =>
                  {
                      cmd.Edit().Text("Editar").CancelText("Cancelar").UpdateText("Actualzar");
                      cmd.Destroy().Text("Eliminar");

                  })
                .HtmlAttributes(new {style="text-align:center;"})
                .Width(210);

          })
        .Editable(editable =>
          {
              editable.Mode(GridEditMode.PopUp).Window(wdw=>wdw.Title("Editor Satelite"));
              editable.TemplateName("SatelitesEditor");

          })
      .Events(e=>e.Edit("OnEdit"))
      .Pageable()
      .Sortable()      
      .Scrollable()
      .Filterable()
      .Selectable()
      .ToolBar(toolbar => toolbar.Create().Text("Agregar") )

      .DataSource(dataSource => dataSource 
                                    .Ajax()
                                    .PageSize(5)
                                    .ServerOperation(false)
                                    .Model(model =>
                                    {
                                        model.Id(p => p.SateliteId);
                                        model.Field(p => p.SateliteId).Editable(false);
                                    })
                                    .Read(read => read.Action("Satelites_Read", "Home").Type(HttpVerbs.Post))
                                    .Create(create => create.Action("Satelites_Create", "Home"))
                                    .Destroy(destroy => destroy.Action("Satelites_Delete", "Home"))
                                    .Update(update => update.Action("Satelites_Update", "Home"))
      )

    )

<script>

    $(function () {

        $("#btnBuscar").click(function () {
            var $filter = new Array();
            var $nombre = $("#txtNombre").val();
            if ($nombre) {
                $filter.push({ field: "Nombre", operator: "contains", value: $nombre });
            }
            var grid = $("#kendoGrid").data("kendoGrid");
            grid.dataSource.filter($filter);
        });
    });

    function OnEdit(e) {
        $('#grdTransponders').data().kendoGrid.dataSource.read({ SateliteId: e.model.SateliteId });

    }
</script>

以下是编辑模板:

@model Test_MVC_DTV.Models.Satelite

<div style="padding: 10px; margin: 10px">
            @Html.Label("Denominación:")
            @Html.EditorFor(m => m.Denominacion )

            @Html.Label("Ubicacion Orbital:")
            @Html.EditorFor(m => m.UbicacionOrbital )

            @Html.Label("Comentario:")
            @Html.EditorFor(m => m.Comentario )



    @(Html.Kendo().Grid(Model.Transponders)
            .Name("grdTransponders")
            .Columns(columns =>
            {
                columns.Bound(p => p.TransponderID).Groupable(false);
                columns.Bound(p => p.Polaridad);
                columns.Bound(p => p.Haz);
                columns.Bound(p => p.UsuarioAsignado);
                columns.Bound(p => p.color);
                columns.Command(cmd =>
                {
                    cmd.Edit().Text("Editar").UpdateText("Actualizar").CancelText("Cancelar");
                    cmd.Destroy().Text("Eliminar");

                })
                         .HtmlAttributes(new { style = "text-align:center;" })
                         .Width(210);

            })
            .Editable(editable => {
                                      editable.Mode(GridEditMode.PopUp);
                                      editable.TemplateName("TranspondersEditor");
            })

            .ToolBar(toolbar => toolbar.Create().Text("Agregar") )
            .AutoBind(false)
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(5)
                .ServerOperation(false)               
                .Model(model =>
                    {
                        model.Id(p => p.TransponderID);
                        model.Field(p => p.TransponderID).Editable(false);
                    })
                .Read(read => read.Action("Transponders_Read", "Home").Type(HttpVerbs.Post))
                .Create(create => create.Action("Transponders_Create", "Home"))
                .Destroy(destroy => destroy.Action("Transponders_Delete", "Home"))
                .Update(update => update.Action("Transponders_Update", "Home"))
            )
            .Pageable()

    )
    </div>

我的卫星和转发器操作控制器

region Transponders

        public ActionResult ABMTrandpondersParaSatelite(int? SateliteId)
        {
            return View(listaSatelites.Single(x => x.SateliteId == SateliteId));
        }


        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Transponders_Read([DataSourceRequest] DataSourceRequest request, int SateliteId)
        {

            return Json(listaSatelites.Single(x=>x.SateliteId==SateliteId).Transponders.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Transponders_Update([DataSourceRequest] DataSourceRequest request, Transponder transponder, int IdSatelite)
        {
            if (transponder != null && ModelState.IsValid)
            {
                // var satelites = (List<Satelite>)GetSatelites();
                var satelite = listaSatelites.Single(o => o.SateliteId == IdSatelite);
                var transponderTarget = satelite.Transponders.Single(o => o.TransponderID == transponder.TransponderID);

                if (transponderTarget != null)
                {
                    int targetIndex = satelite.Transponders.IndexOf(transponderTarget);
                    satelite.Transponders[targetIndex].TransponderID = transponder.TransponderID;
                    satelite.Transponders[targetIndex].Polaridad = transponder.Polaridad;
                    satelite.Transponders[targetIndex].Haz = transponder.Haz;
                    satelite.Transponders[targetIndex].UsuarioAsignado = transponder.UsuarioAsignado;
                    satelite.Transponders[targetIndex].NumeroTranslacionIRD = transponder.NumeroTranslacionIRD;
                    satelite.Transponders[targetIndex].Comentario = transponder.Comentario;
                    satelite.Transponders[targetIndex].FrecuenciaBajada = transponder.FrecuenciaBajada;
                    satelite.Transponders[targetIndex].FrecuenciaSubida = transponder.FrecuenciaSubida;
                    satelite.Transponders[targetIndex].FrecuenciaBandaL = transponder.FrecuenciaBandaL;
                    satelite.Transponders[targetIndex].numeroXPSatelite = transponder.numeroXPSatelite;
                    satelite.Transponders[targetIndex].color = transponder.color;
                }
            }

            return Json(ModelState.ToDataSourceResult());
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Transponders_Delete([DataSourceRequest] DataSourceRequest request, Transponder transponder, int IdSatelite)
        {
            if (transponder != null && ModelState.IsValid)
            {
                var satelite = listaSatelites.Single(o => o.SateliteId == IdSatelite);
                var transponderTarget = satelite.Transponders.Single(o => o.TransponderID == transponder.TransponderID);

                if (transponderTarget != null)
                {
                    satelite.Transponders.Remove(transponderTarget);
                }
            }

            return Json(ModelState.ToDataSourceResult());
        }



endregion Trandsponder

region Satelites

        public static List<Transponder> listaTransponders = (List<Transponder>)Builder<Transponder>.CreateListOfSize(6).All().Build();


        public static List<Satelite> listaSatelites = (List<Satelite>) Builder<Satelite>
                                    .CreateListOfSize(13)
                                    .All()
                                    .With(x => x.Transponders = listaTransponders)
                                    .Build();

        public ActionResult Satelites() 
        {
            ViewBag.Message = "Satélites";
            return View(GetSatelites());
        }

        [HttpPost]
        public ActionResult Satelites_Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(listaSatelites.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }

        private static IEnumerable<Satelite> GetSatelites()
        {
            return listaSatelites;
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Satelites_Update([DataSourceRequest] DataSourceRequest request, Satelite satelite)
        {
            if (satelite != null && ModelState.IsValid)
            {
               // var satelites = (List<Satelite>)GetSatelites();
                var target = listaSatelites.Where(o => o.SateliteId == satelite.SateliteId).FirstOrDefault();

                if (target != null)
                {
                    int targetIndex = listaSatelites.IndexOf(target);
                    listaSatelites[targetIndex].SateliteId = satelite.SateliteId;
                    listaSatelites[targetIndex].Denominacion = satelite.Denominacion;
                    listaSatelites[targetIndex].Comentario = satelite.Comentario;
                }
            }

            return Json(ModelState.ToDataSourceResult());
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Satelites_Delete([DataSourceRequest] DataSourceRequest request, Satelite satelite)
        {
            if (satelite != null && ModelState.IsValid)
            {
                // var satelites = (List<Satelite>)GetSatelites();
                var target = listaSatelites.Where(o => o.SateliteId == satelite.SateliteId).FirstOrDefault();

                if (target != null)
                {
                    listaSatelites.Remove(target);
                }
            }

            return Json(ModelState.ToDataSourceResult());
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Satelites_Create([DataSourceRequest] DataSourceRequest request, Satelite satelite)
        {
            if (satelite != null && ModelState.IsValid)
            {
                satelite.SateliteId = listaSatelites.Max(z => z.SateliteId) + 1;
                listaSatelites.Add(satelite);
            }
            return Json(new[] { satelite }.ToDataSourceResult(request, ModelState));
        }

        endregion //satelites

卫星级和转发器类

 public class Satelite
    {
        public int SateliteId { get; set; }
        [Required]
        public string Denominacion { get; set; }
        [Required]
        public string Comentario { get; set; }
        public double UbicacionOrbital { get; set; }
        public List<Transponder> Transponders { get; set; } 

    }
    public class Transponder
    {
        [Required]    
        public int TransponderID { get; set; }
        public Enumeradores.Polaridad Polaridad { get; set; }
        public Enumeradores.Haz Haz { get; set; }
        [Required]
        public string UsuarioAsignado { get; set; }
        public string NumeroTranslacionIRD { get; set; }
        public string Comentario { get; set; }
        public int FrecuenciaBajada { get; set; }
        public int FrecuenciaSubida { get; set; }
        public int FrecuenciaBandaL { get; set; }
        public int numeroXPSatelite { get; set; }
        [UIHint("Color")]
        public string color { get; set; }
    }

任何帮助都将非常感谢并提前感谢。

PS:抱歉我的英语水平很差

1 个答案:

答案 0 :(得分:1)

我建议在KendoUI CodeLibrary中查看以下示例来演示此类行为: