当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - Show Dropdown in Kendo Grid

问题描述:

I want to show DropdownList in Kendo Based on the Value I get in List::

for that I am Using Kendo Grid as::

 @(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")

)

)

and The ViewModel is as ::

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; }

}

I am Getting Result something Like This::

But I want Dropdown For those List which is the Last column

Please Help me on this.

Now I am getting Something Like this::

For this I have used an Editor Template "ReferenceValidValue" as::

@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.

)

Now Please help me on this How can I show the Dropdown with list of Values in it.

网友答案:

Hi use ForeignKey in grid to show dropdown in grid,

Ex like this,

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 #" });

Read this link for dropdown demo : http://demos.kendoui.com/web/grid/foreignkeycolumn.html

网友答案:

this code might help you:

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();

 }

As you can see on the top, I define two bars for each one of the combo list. In the VM you define a method like .GetComboList() :

public static IEnumerable<ComboItem> GetComboList()
{
    //here you should set you logic for getting the datasource of the combo
    return ComboItem.EnumerableFromDataTable(Transponder.GetComboList());
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: