网格中的kendo multiselect不正确绑定

时间:2014-10-17 08:20:27

标签: c# asp.net-mvc grid kendo-asp.net-mvc kendo-multiselect

即时通讯使用mvc kendo网格,在该网格中我想使用多选。不知何故,当网格获取数据时,多重选择值未定义,但是当我按下网格中的更新按钮时,它会找到多选的正确值。

enter image description here

这是viewmodel我将网格绑定到供应商用于多选的位置

    public class CustomerViewModel
{
    public CustomerViewModel()
    {
        Suppliers = new List<SupplierViewModel>();
    }

    public int CustomerId { get; set; }
    public string CustomerName { get; set; }
    [StringLength(2, ErrorMessage = "CountryCode cannot be longer than 2 characters.")]
    public string CountryCode { get; set; }
    public string CustomerERPId { get; set; }

    [UIHint("SupplierMultiEditor")]
    public ICollection<SupplierViewModel> Suppliers { get; set; }
}

这是我网格的视图:

   <div>
<script type="text/kendo" id="supplierTemplate">
    <ul>
        #for(var i = 0; i< data.length; i++){#
        <li>#:data[i].Name#</li>
        #}#
    </ul>
</script>
<script type="text/javascript">
    var supplierTemplate = kendo.template($("#supplierTemplate").html(), { useWithBlock: false });
    console.log("Supplier " + supplierTemplate);
</script>
@(Html.Kendo().Grid<CustomerViewModel>()
      .Name("CustomerGrid")
      .Columns(col =>
      {
          col.Bound(c => c.CustomerName);
          col.Bound(c => c.CountryCode).Filterable(false);
          col.Bound(c => c.Suppliers).ClientTemplate("#=supplierTemplate(Suppliers)#").Filterable(false);
          col.Command(command =>
          {
              command.Edit();
              command.Destroy();
          }).Width(220).Title("Edit/Delete");
      })
      .ToolBar(toolbar =>
      {
          toolbar.Create();
      })
      .Scrollable()
      .Filterable(ftb => ftb.Mode(GridFilterMode.Row))

      .Sortable()
      .HtmlAttributes(new { style = "height:525px" })
      .Pageable(pageable => pageable
          .Refresh(true)
          .PageSizes(true)
          .ButtonCount(5))
      .DataSource(dataSource => dataSource
          .Ajax()
          .Model(model =>
          {
              model.Id(s => s.CustomerId);
              model.Field(s => s.Suppliers).DefaultValue(new List<SupplierViewModel>());
          })
          .Create(update => update.Action("CreateCustomer", "Customer"))
          .Read(read => read.Action("GetCustomers", "Customer"))
          .Update(update => update.Action("SaveCustomer", "Customer"))
          .Destroy(destroy => destroy.Action("RemoveCustomer", "Customer"))
      )
      )

<script type="text/javascript">

    function serialize(data) {
        debugger;
        for (var property in data) {
            if ($.isArray(data[property])) {
                serializeArray(property, data[property], data);
            }
        }
    }

    function serializeArray(prefix, array, result) {
        for (var i = 0; i < array.length; i++) {
            if ($.isPlainObject(array[i])) {
                for (var property in array[i]) {
                    result[prefix + "[" + i + "]." + property] = array[i][property];
                }
            }
            else {
                result[prefix + "[" + i + "]"] = array[i];
            }
        }
    }
</script>

这里是多选

     @using CUST.Presentation.Cms.ViewModel
  @using Kendo.Mvc.UI
  @model IEnumerable<CUST.Presentation.Cms.ViewModel.SupplierViewModel>


 @(Html.Kendo().MultiSelect()
    .Name("Suppliers")
        .DataTextField("SupplierName")
        .DataValueField("SupplierId")
        .BindTo((IEnumerable<SupplierViewModel>)ViewData["CustSuppliers"])
    .Placeholder("No suppliers selected")
  )

1 个答案:

答案 0 :(得分:5)

评分太低,但我认为您可能需要更改kendo脚本。

<script type="text/kendo" id="supplierTemplate">
<ul>
    #for(var i = 0; i< data.length; i++){#
    <li>#:data[i].Name#</li>
    #}#
</ul>

它循环遍历数组中的所有项目,这是一个SupplierViewModel,我怀疑它没有名为&#34; Name&#34;的属性。将 data [i] .Name 更改为您要显示的属性,它应该有效,看起来像是SupplierName;所以 data [i] .SupplierName