从Kendo网格内的对象列表创建下拉列表

Question

我有一个看起来像这样的viewmodel。我需要将此模型绑定到gridview，并为每一行创建一个来自MatchingCustomers列表的下拉列表。

public class CustomerMappingViewModel
{
     public CustomerViewModel Customer;
     public IEnumerable<MatchingCustomer> MatchingCustomers;
}

public class CustomerViewModel
{
   public int CustomerId {get;set;}
   public string Name {get;set;}
   public string Address {get;set;}
   public string City {get;set;}
   public string State {get;set;}
   public string PhoneNumber {get;set;}
}

public class MatchingCustomer
{
    public string Name {get;set;}
    public string Address {get;set;}
    public string City {get;set;}   
    public string PhoneNumber {get;set;}

    public string CustomerInfo
    {
        get { return Name + " - " + AdditionalName + " " + Address + ", " + City + ", " + State + " " + Zipcode + ", " + PhoneNumber; }
    }
}

这是网格视图

 @(Html.Kendo().Grid<CustomerMappingViewModel>()
                            .Name("CustomerGrid")
                            .Columns(columns =>
                            {
                                columns.Bound(c =>     c.Customer.Name).Title("Name");
                                columns.Bound(c => c.Customer.Address).Title("Address");
                                columns.Bound(c => c.Customer.City).Title("City");
                               **//I NEED A COLUMN HERE to bind to MatchingCustomers list as a dropdown with CustomerInfo as text and name as value  but not sure how.**                             

                            })
                            .Pageable()
                            .Sortable()
                            .Filterable()
                            .Scrollable(s => s.Height("auto"))
                            .DataSource(dataSource => dataSource
                                .Ajax()
                                .PageSize(50)
                                .Events(events => events.RequestEnd("onRequestEnd"))
                                                                .Model(model => model.Id(c => c.Customer.CustomerID))
                                                        .Read(read => read.Action("GetCustomers", "Customers"))
                    )
                )

任何帮助将不胜感激。

Answer 1

请尝试使用以下代码段。

查看

@(Html.Kendo().Grid<WebApplication2.Models.CustomerMappingViewModel>()
                            .Name("CustomerGrid")
                            .Columns(columns =>
                            {
                            columns.Bound(c => c.Customer.Name).Title("Name");
                            columns.Template(@<text></text>).ClientTemplate((@Html.Kendo().DropDownList()
                                    .AutoBind(false)
                                     .Name("ddl_1")
                                      .DataTextField("City")
                                         .DataValueField("Address")
                                         .ToClientTemplate()).ToHtmlString());
                            })
                            .Pageable()
                          .Events(events => events

            .DataBound("onDataBound")

        )
                            .Sortable()
                            .Filterable()
                            .Scrollable(s => s.Height("auto"))
                            .DataSource(dataSource => dataSource
                                .Ajax()
                                .PageSize(50)
                           .Model(model => model.Id(c => c.Customer.CustomerId))
                          .Read(read => read.Action("GetCustomers", "Home"))
)
)
<script>
    function onDataBound(arg) {
        var grid = $("#CustomerGrid").data("kendoGrid");
        var dataSource = grid.dataSource;
        var allData = dataSource.data();
        for (var i = 0; i < allData.length; i++) {
            var item = allData[i];
            var row = grid.tbody.find("tr[data-uid='" + item.uid + "']");
            $(row).find('[name="ddl_1"]').kendoDropDownList({
                dataTextField: "City",
                dataValueField: "Address",
                dataSource: item.MatchingCustomers,
            });
        }
    }

</script>

<强>控制器

public ActionResult GetCustomers([DataSourceRequest] DataSourceRequest request)
{
    List<CustomerMappingViewModel> lst = new List<CustomerMappingViewModel>();
    List<MatchingCustomer> lst1 = new List<MatchingCustomer>();
    lst1.Add(new MatchingCustomer() { City = "city1", Address = "add1" });
    lst1.Add(new MatchingCustomer() { City = "city2", Address = "add2" });
    lst.Add(new CustomerMappingViewModel() { Customer = new CustomerViewModel() { Name = "Jayesh1", CustomerId = 1 }, MatchingCustomers = lst1 });
    lst1 = new List<MatchingCustomer>();
    lst1.Add(new MatchingCustomer() { City = "city11", Address = "add11" });
    lst1.Add(new MatchingCustomer() { City = "city22", Address = "add22" });
    lst.Add(new CustomerMappingViewModel() { Customer = new CustomerViewModel() { Name = "Jayesh11", CustomerId = 12 }, MatchingCustomers = lst1 });

    return Json(lst.ToDataSourceResult(request));
}

如果有任何疑虑，请告诉我。