kendo ui grid not loading multiselect column properly

Question

I'm want a kendomultiselect in one of the columns in my Kendo UI grid.

        <div id="grid"></div>
    <script>
$(document).ready(function () {
    dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: '@Url.Action("GetCustomers", "Customer")',
                dataType: "json"
            },
            update: {
                url: '@Url.Action("SaveCustomer", "Customer")',
                dataType: "json",
                type: "POST"
            },
            destroy: {
                url: '@Url.Action("RemoveCustomer", "Customer")',
                dataType: "json",
                type: "POST"
            },
            create: {
                url: '@Url.Action("CreateCustomer", "Customer")',
                        dataType: "json",
                        type: "POST"
                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read") {
                            return options;
                        }
                    }
                },
                pageSize: 20,
                schema: {
                    model: {
                        id: "CustomerId",
                        fields: {
                            CustomerId: { editable: false },
                            CustomerName: { validation: { required: true } },
                            CountryCode: { validation: { required: true } },
                            CustomerERPId: { validation: { required: true } },
                            Suppliers: { validation: { required: true } },
                        }
                    }
                }
            });

            $("#grid").kendoGrid({
                dataSource: dataSource,
                navigatable: true,
                pageable: true,
                height: 550,
                toolbar: ["create"],
                columns: [
                    {
                        field: "CustomerName",
                        title: "CustomerName",
                        width: 200
                    }, {
                        field: "CountryCode",
                        title: "CountryCode",
                        width: 50
                    },
                    {
                        field: "CustomerERPId",
                        title: "CustomerERPId",
                        width: 100
                    },
                    {
                        field: "Suppliers",
                        title: "Suppliers",
                        width: 200,
                       editor: supplierMultiSelect, template: kendo.template($("#supplierTemplate").html())
                    },
                    { command: ["edit", "destroy"], title: "&nbsp;", width: "200px" }
                ],
                editable: "inline",
            });
        });

        function supplierMultiSelect(container, options) {
            $('<input data-text-field="SupplierName" data-value-field="SupplierId" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoMultiSelect({
                    autoBind: true,
                    dataSource: {
                        type: "json",
                        transport: {
                            read: {
                                url: '@Url.Action("GetSuppliers", "Customer")',
                                dataType: "json"
                        }
                    }
                },
            });
        }
    </script>

This is the result! enter image description here as you can se the multiselect works as it should when i want to update a row. But the problem is that is doesn't fill in the values in the grid when it's not in "edit-mode".

EDIT:

I added a template:

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

But now it won't bind the data correctly to my action method!

enter image description here

Lars Höppner Lars Höppner · Accepted Answer · 2015-02-17T12:07:02

Your template

"#=Suppliers.SupplierName#"

doesn't work because Suppliers is an array of elements. So you need something like:

"#= Suppliers.map(function(el) { return el.SupplierName; }).join(', ') #"

kendo ui grid not loading multiselect column properly

1 Answers