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.
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")
)