显示剑道网格​​中的下拉列表

时间:2013-11-21 10:55:58

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

我想根据List ::

中的值显示Kendo中的DropdownList

因为我使用Kendo Grid作为::

     @(Html.Kendo().Grid(Model)
                    .Name("Reference")
                    .TableHtmlAttributes(new { style = "height:20px; " })
                    .Columns(columns =>
                    {
                        columns.Bound(p => p.ReferenceID).Hidden(true).ClientTemplate("#= ReferenceID#" + "<input type='hidden' class='ReferenceID' value='#=ReferenceID#' />");
                        columns.Bound(p => p.ReferenceName).Title("Reference").Width(10).ClientTemplate("#= ReferenceName#" + "<input type='hidden' class='ReferenceName' value='#=ReferenceName#' />");
columns.Bound(p => p.ReferenceDescription).Title("Description").Width(10).ClientTemplate("#= ReferenceDescription#" + "<input type='hidden' class='ReferenceDescription' value='#=ReferenceDescription#' />");
                      columns.Bound(p => p.DefaultReferenceValue).Title("Value").Width(7);
                    columns.Bound(p => p.ReferenceValue).Title("Valid Value").Width(7).EditorTemplateName("ReferenceValidValue");
                    .Editable(ed => ed.Mode(GridEditMode.InCell))
                    .Navigatable()
                    .Sortable()
                    .Scrollable(scr => scr.Height(200))
                    .Scrollable()
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Batch(true)
                        .ServerOperation(false)
                        .Events(events => events.Error("error_handler"))
                        .Model(model =>
                                {
                                    model.Id(p => p.ReferenceID);
                                }
                        )
                        .Create("Reference_Create", "Document")
                        .Read("Reference_Read", "Document")
                        .Update("Reference_Update", "Document")
                        .Destroy("Reference_Destroy", "Document")

                    )
                        )

和ViewModel为::

public class ReferenceViewModel
    {
        public long ReferenceID { get; set; }
        public string ReferenceName { get; set; }
        public List<ReferenceValidValueViewModel> ReferenceValue { get; set; }
    }

    public class ReferenceValidValueViewModel 
    {
        public long ReferenceValidValueID { get; set; }
        public long ReferenceID { get; set; }
        public string ValidValue { get; set; }
    }

我得到的结果像这样:: enter image description here

但我想要Dropdown那些列表是最后一栏

请帮帮我。

现在我得到像这样的东西:: enter image description here

为此,我使用了编辑模板“ReferenceValidValue”作为::

@model IEnumerable<Invoice.Models.ViewModels.ReferenceValidValueViewModel>

@(Html.Kendo().DropDownList()
    .Name("ReferenceValue") //The name of the dropdownlist is mandatory. It specifies the "id" attribute of the widget.
    .DataTextField("ValidValue") //Specifies which property of the Product to be used by the dropdownlist as a text.
    .DataValueField("ReferenceValidValueID") //Specifies which property of the Product to be used by the dropdownlist as a value.

    .SelectedIndex(0) //Select first item.
)

现在请帮我解决这个问题。如何在下拉列表中显示值列表。

2 个答案:

答案 0 :(得分:0)

您可以在网格中使用ForeignKey来显示网格中的下拉列表,

喜欢这个,

columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categoryList"], "CategoryID", "Category").Title("Organization Size").HeaderHtmlAttributes(new { @class = "fontbold" }).Width(170).HtmlAttributes(new { @title = "#= Category #" });

阅读此链接以获取下拉演示:http://demos.kendoui.com/web/grid/foreignkeycolumn.html

答案 1 :(得分:0)

此代码可能对您有所帮助:

var stationComboList = StationVM.GetComboList();
var transponderComboList = TransponderVM.GetComboList();

var grid = Html.Kendo().Grid<GroupStationTransponderVM>()
               .Name("grdGroupStationTransponder")
               .Columns(columns =>
                   {
                       columns.Bound(t => t.ntbOrdinal).Title("Orden").Width(80);
                       columns.ForeignKey(t => t.dllStationId, stationComboList, "Id", "Description").Title("Estaciones a utilizar").Width(180);
                       columns.ForeignKey(t => t.dllTransponderId, transponderComboList, "Id", "Description").Title("Transponders a utilizar").Width(200);
                       columns.Bound(t => t.cpColor).ClientTemplate("<div class='circle' style='background-color: #: cpColor #'></div>").Width(73);
                       columns.Command(command =>
                           {
                               command.Edit().CancelText("Cancelar").UpdateText("Confirmar"); 
                               command.Destroy();
                           }).Width(210).HtmlAttributes(new { style = "text-align: center;" });
                   })
               .ToolBar(toolbar => toolbar.Create())

               .Editable(editable => editable.Mode(GridEditMode.InLine))
               .Pageable()
               .Navigatable()
               .Sortable()
               .Scrollable()                                   
               .Resizable(r=>r.Columns(false))
               .DataSource(dataSource => dataSource
                                             .Ajax()
                                             .PageSize(15)
                                             .ServerOperation(false)
                                             .Events(events => events.Error("error_handler"))
                                             .Model(model =>
                                                 {
                                                     model.Id(t => t.Id);
                                                     model.Field(t => t.ntbOrdinal).DefaultValue(1);
                                                     model.Field(t => t.dllStationId).DefaultValue(42);
                                                     model.Field(t => t.dllTransponderId).DefaultValue(1);                    
                                                     model.Field(t => t.cpColor).DefaultValue(("#000000"));
                                                 })                                                               
                                             .Create(create => create.Action("GroupStationTransponder_Create", "Group"))
                                             .Read("GroupStationTransponder_Read", "Group")
                                             .Update("GroupStationTransponder_Update", "Group")
                                             .Destroy("GroupStationTransponder_Destroy", "Group")
    )
               .Events(events => events.DataBound("onGrdDataBound")
                                       .Edit("onListClearError")
                                       .Save("onListClearError")
                                       .Cancel("onListClearError")
                                       .Remove("onListClearError")
    ).ToComponent();
     grid.Render();

 }

正如您在顶部看到的,我为每个组合列表定义了两个条形。在VM中,您可以定义类似.GetComboList()的方法:

public static IEnumerable<ComboItem> GetComboList()
{
    //here you should set you logic for getting the datasource of the combo
    return ComboItem.EnumerableFromDataTable(Transponder.GetComboList());
}