c# - kendo multiselect in grid not binding correct -

c# - kendo multiselect in grid not binding correct -

im using mvc kendo grid , in grid want utilize multiselect. somehow when grid have fetched info says undefined multiselect value when press update button in grid finds right values multiselect.

here viewmodel im binding grid suppliers 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 longer 2 characters.")] public string countrycode { get; set; } public string customererpid { get; set; } [uihint("suppliermultieditor")] public icollection<supplierviewmodel> suppliers { get; set; } }

here view grid:

<div> <script type="text/kendo" id="suppliertemplate"> <ul> #for(var = 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; (var property in data) { if ($.isarray(data[property])) { serializearray(property, data[property], data); } } } function serializearray(prefix, array, result) { (var = 0; < array.length; i++) { if ($.isplainobject(array[i])) { (var property in array[i]) { result[prefix + "[" + + "]." + property] = array[i][property]; } } else { result[prefix + "[" + + "]"] = array[i]; } } } </script>

and here 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") )

too low score comment, think might have alter kendo script.

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

it loops through items in array, case supplierviewmodel, , suspect doesn't have property called "name". alter data[i].name whichever property 1 want display , should work, looks suppliername; data[i].suppliername.

c# asp.net-mvc grid kendo-asp.net-mvc kendo-multiselect