Kendo Ui Grid 中的自定义下拉菜单

Question

您好，我正在尝试向 Kendoui MVC 网格添加自定义下拉菜单。网格的所有示例都显示了如何使用外键关系执行此操作。我们的下拉菜单对数据执行操作（查看详细信息、编辑信息、删除记录），因此它与数据无关。所以在 index.aspx 我有：

  <% Html.Kendo().Grid<Training.Models.TrainingViewManagementModel>()
.Name("grid")
.Columns(columns =>
    {
        columns.Bound(x => x.SelectAction).Width(95).Title("Select Action").ClientTemplate("#=SelectAction#");
        columns.Bound(x => x.Record).Width(100);
        columns.Bound(x => x.Code).Width(65);
        columns.Bound(x => x.PeopleTrained).Width(75);
        columns.Bound(x => x.TrainingTypes).Width(100);
        columns.Bound(x => x.Trainer).Width(100);
        columns.Bound(x => x.TrainingDate).Format("{0:MM/dd/yyyy}").Width(100);
    })

.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:500px;" })
.DataSource(dataSource => dataSource
        .Ajax()            
        .PageSize(50)
        .Read("RetrieveTrainingManagementGrid", "Home")
                .Model(m =>
                {
                    m.Id(x => x.TrainingID);
                    m.Field(x => x.SelectAction).Editable(true);
                    m.Field(x => x.Record).Editable(false);
                    m.Field(x => x.Code).Editable(false);
                    m.Field(x => x.PeopleTrained).Editable(false);
                    m.Field(x => x.TrainingTypes).Editable(false);
                    m.Field(x => x.Trainer).Editable(false);
                    m.Field(x => x.TrainingDate).Editable(false);
                })
        ).Render();
%>

然后由于示例代码，我有以下编辑器模板：

<%=Html.Kendo().DropDownListFor(m=>m)
    .Name("SelectAction")
    .Events(e=>e.Change("onGridchange"))
    .DataTextField("DropDownName")
    .DataValueField("DropDownID")
    .DataSource(datasource =>datasource
        .Read("RetrieveDropdownOptionsKendo", "Home"))

 %> 

然后在模型中我确定我传入了正确的数据

public IEnumerable<TrainingViewManagementModel> RetrieveAirportManagementView()
        {
            return new List<TrainingViewManagementModel>()
            {
               new TrainingViewManagementModel {
                SelectAction = new List<DropDownOptions> { new DropDownOptions { DropDownID = 0, DropDownName = "Select an action"}},
                TrainingID = 561,
                Record = "2001-xxx",
                ID = 206,
                Code = "BMW",
                PeopleTrained = 0,
                TrainingTypes = "SCRUM, Hi",
                UserID = new Guid(),
                Trainer = "John dowle",
                TrainingDate = DateTime.Parse("2009-11-21"),
                IndividualPeople = "Bob Jim, Jim bob, Jane Bob"
            }
            };
        }

当我运行代码时，我会在下拉列中看到这个 [object Object]。我知道我遗漏了一些东西，但我从样本和文档中得到了相互矛盾的信息。提前致谢。

Answer 1

RetrieveAirportManagementView 方法必须返回 JsonResult 类型：

public JsonResult RetrieveAirportManagementView()
    {
        var list= new List<TrainingViewManagementModel>()
        {
           new TrainingViewManagementModel {
            SelectAction = new List<DropDownOptions> { new DropDownOptions { DropDownID = 0, DropDownName = "Select an action"}},
            TrainingID = 561,
            Record = "2001-xxx",
            ID = 206,
            Code = "BMW",
            PeopleTrained = 0,
            TrainingTypes = "SCRUM, Hi",
            UserID = new Guid(),
            Trainer = "John dowle",
            TrainingDate = DateTime.Parse("2009-11-21"),
            IndividualPeople = "Bob Jim, Jim bob, Jane Bob"
        }
        };return Json(list, JsonRequestBehavior.AllowGet);
    }

Answer 2

我遇到了完全相同的问题，我一直在努力寻找解决方案。最后，我设法使用稍微不同的方法使其工作。我没有使用 DropDownList，而是使用垂直菜单作为列中的客户端模板。在更多细节。我有一个像这样的模型产品

public class Product
    {

        [AutoIncrement]
        [Alias("id")]
        [DataMember]
        public int Id { get; set; }

        [DataMember]
        public string Name { get; set; }


        [DataMember]
        [ForeignKey(typeof(Store), OnDelete = "CASCADE")]
        public int StoreId { get; set; }

        [DataMember]
        [Reference]
        public Store Store { get; set; }


    }

在网格上，我想显示产品的 ID、名称、作为商店模型外键的 StoreId、商店的名称以及带有“打开产品”等选项的列，“打开商店”等。使用这种方法http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/faq#how-do-i-use-a-kendo-ui-widget-inside-a-grid-client-column-template?我最终得到了这个

@(Html.Kendo().Grid<PixieKendoMVC.Models.Product>()
    .Name("grid")
    .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
            .PageSize(20)
                .Events(events => events.Error("onGridError"))
           .Model(model =>
            {
                model.Id(p => p.Id);

            })
            .Read(read => read.Action("Get", "Product" ))
            .Create(create => create.Action("Create", "Product"))
            .Update(update => update.Action("Edit", "Product"))
            .Destroy(destroy => destroy.Action("delete", "Product"))
    )
                 .ToolBar(toolBar =>
                    {
                        toolBar.Create();
                        toolBar.Save();
                    })

    .Columns(columns =>
    {
        columns.Template(p => { }).Width(80).HtmlAttributes(new { @class = "templateCell" }).ClientTemplate(
                Html.Kendo().Menu().Orientation(MenuOrientation.Vertical)
                    .Name("menu_#=Id#")
                    .Items(its =>
                    {
                        its.Add().Text("do").Items(nested =>
                        {
                            nested.Add().Text("Action 1");
                            nested.Add().Text("Action 2");
                            nested.Add().Text("Action 3");
                        });

                    })
                    .ToClientTemplate().ToHtmlString()
                );

        columns.Bound(p => p.Id);
        columns.Bound(p => p.Name);
        columns.Bound(p => p.StoreId);
        columns.ForeignKey(p => p.StoreId, (System.Collections.IEnumerable)ViewData["stores"], "Id", "Name")
           .Title("Store").Width(150);

        columns.Command(command => command.Destroy()).Width(110);

    })
        .Events(ev => ev.DataBound("initMenus"))

    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
)
<span id="notification"></span>

<style type="text/css">
    .k-widget .templateCell {
        overflow: visible;
        width:80px;
        margin:10px;
        padding:10px;
    }

</style>

<script>
    function initMenus(e) {
        $(".templateCell").each(function () {
            eval($(this).children("script").last().html());
        });
    }
</script>

现在，您可以在各种菜单项上添加操作，而不仅仅是文本。还需要一些 CSS 样式，因此欢迎更正