2

im using a mvc kendo grid and in that grid i want to use a multiselect. Somehow when the grid have fetched the data is says undefined for the multiselect value but when i press the update button in the grid it finds the correct values for the multiselect.

enter image description here

Here is the viewmodel im binding my grid to where suppliers is for the multiselect

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

here is the view for my grid:

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

ANd here is the multiselect

     @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 Answer 1

5

Too low score to comment, but I think you might have to change the kendo script.

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

It loops through all the items in the array, which is this case is a SupplierViewModel, and I suspect that it doesn't have a property called "Name". Change the data[i].Name to whichever property is the one you want to display and it should work, which looks like it is SupplierName; so data[i].SupplierName.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.