剑道网格中的下拉菜单答案

【问题标题】：DropDown In Kendo Grid剑道网格中的下拉菜单
【发布时间】：2015-02-13 13:10:53
【问题描述】：

我需要在 Kendo Grid 中添加一个下拉菜单。我尝试使用 EditorTemplate 添加，但代码中有些地方不对，这就是为什么它对我不起作用。下拉列表有 3 个值（捐赠、退款、撤消）。下面是我的剑道网格，我需要在第一列显示下拉菜单。请帮忙。

  @(Html.Kendo().Grid<GA.CustomerCare.Web.Synergy.Models.CustomerOrderARInfo>
                    (Model.CustomerOrderARInfoResult)
                    .Name("SearchResultsGridParent")
                    .Columns(columns =>
                    {
                        columns.Bound(e => e.ActionList).Width(100).EditorTemplateName("ActionDropdownEditor");
                        columns.Bound(e => e.TransNumber).Width(85);
                        columns.Bound(e => e.OriginalTransNumber).Width(85);
                        columns.Bound(e => e.DateEntered).Width(115);
                        columns.Bound(e => e.TransDate).Width(85);
                        columns.Bound(e => e.TransType).Width(130);
                        columns.Bound(e => e.Status).Width(100);
                        columns.Bound(e => e.Amount).Width(100);
                        columns.Bound(e => e.AmountApplied).Width(100);
                        columns.Bound(e => e.AvailableFunds).Width(85);
                        columns.Bound(e => e.AdjustmentReason).Width(85);
                        columns.Bound(e => e.CcCheckGiftCard).Width(155);
                        columns.Bound(e => e.PaypalTransID).Width(135);
                        columns.Bound(e => e.Area).Width(85);
                        columns.Bound(e => e.EnteredBy).Width(115);
                        columns.Bound(e => e.Reference).Width(155);
                        columns.Bound(e => e.DateCapture).Width(155);
                        columns.Bound(e => e.AmountCapture).Width(155);

                    })
                    .Sortable(sortable => sortable
                    .AllowUnsort(true)
                    .SortMode(GridSortMode.MultipleColumn)
                    )
                    .Resizable(resize => resize.Columns(true))
                    .ColumnResizeHandleWidth(10)
                    .Scrollable(scrolling => scrolling.Height(190))
                    //.ClientDetailTemplateId("template")
                                                        //.HtmlAttributes(new { style = "height:430px;" })
                    .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("GetCustomerOrderAR", "Order", new { CustomerOrderID = Model.CustomerOrderID }))
                    )
                                                        )

下面是我在模型中使用的属性：

  [Display(Name = "ActionList")]
    public string ActionList { get; set; }

下面是我的 ActionDropdownEditor ：

@model string

   @(Html.Kendo().DropDownList()
            .Name("ActionList")  //Important, must match the column's name
        .Value(Model)
        .SelectedIndex(0)
        .BindTo(new string[] { "Donate", "Refund", "Undo" }))

【问题讨论】：

标签： kendo-ui kendo-grid kendo-dropdown

【解决方案1】：

我还尝试以与您相同的方式将 kendo Grid 与 DropDown 一起使用，并且效果很好。请用您的代码检查是否缺少某些引用。

column.Bound(p => p.ActionList).ClientTemplate("#= ActionList !=null ? ActionList : '' #").EditorTemplateName("_Sex").Title("ActionList");

我在 EditorTemplates 文件夹中提供我的整个下拉列表供您检查您的代码：

@using Kendo.Mvc.UI
@(Html.Kendo().DropDownListFor(m => m)
                .Name("ActionList").HtmlAttributes(new { @style = "font-size:12px", @class = "PaxType" })
                  .BindTo(new string[] { "Donate", "Refund", "Undo" }))

【讨论】：

【解决方案2】：

您可以通过在 ClientTemplate 中使用 html 将 DropDownList 放入 Kendo Grid。我使用以下方法实现了类似...

column.Bound(p => p.WFKeyType).Title("Type").ClientTemplate("<select class='form-control'><option value='' disabled='disabled' selected='selected'>Select Key Type</option><option value='String'>String</option><option value='Integer'>Integer</option><option value='DateTime'>DateTime</option><option value='Currency'>Currency</option><option value='Bool'>Bool</option></select>");

在网格列中生成一个下拉列表，其中包含“字符串”、“整数”、“日期时间”、“货币”和“布尔”作为选项。 'form-control' 类来自 Bootstrap，有助于使列看起来更干净。您的项目需要添加 Bootstrap 3 才能访问该类。

【讨论】：