kendo drop down return object object

Question

I have a problem with kendo drop-down list.Drop down returns the object object, but i need string. Can somebody help me. Here codes. I'm sorry for my english, i'm from Russia

MyScript.js:(get data from Admin controller)

 $(document).ready(function () {
    $("#grid").kendoGrid({

        dataSource: {
            type: 'odata',
            serverSorting: true,
            serverFiltering: true,
            serverPaging: true,

            transport: {
                read: {
                    url: "/api/Admin",
                    dataType: "json",
                    contentType: "application/json",
                },
                create: {
                    url: "/api/Admin",
                    dataType: "json",
                    type: "POST"
                },
                update: {
                    url: function (AdminModel) {
                        return "/api/Admin/" + "?roles=" + AdminModel.Roles
                    },
                    dataType: "json",
                    type: "PUT"
                },
                destroy: {
                    url: function (AdminModel) {
                        return "/api/Admin/" + "?name=" + AdminModel.Name
                    },
                    dataType: "json",
                    type: "DELETE"
                },
                parameterMap: function (model, operation) {
                    if (operation !== "read" && model) {
                        return kendo.stringify(model);
                    }
                }
            },
            schema: {
                data: function (response) {
                    if (response.value !== undefined)
                        return response.value;
                    else {
                        delete response["odata.metadata"];
                        return response;
                    }
                },
                total: function (response) {
                    return response['odata.count'];
                },
                model: {
                    id: "ID",
                    fields: {
                        ID: { editable: false },
                        Name: { type: "string", editable: false, nullable: false, validation: { required: true } },
                        Roles: { type: "string", editable: false },
                        NewRole: { type: "string" },

                    }
                }
            }
        },


        height: 560,
        sortable: true,
        pageable: true,
        editable: "popup",
        columns: [
           { field: "ID", width: 50 },
           { field: "Name", title: "Name", width: 120 },
           { field: "Roles", title: "Roles", width: 120},
           { field: "NewRole", hidden:true,title: "NewRole", editor: RoleDropDownEditor, template: "#=NewRole#" },
           { command: ["destroy", "edit"], title: " ", width: "120px" }
        ]
    });
});
My Drop Down List(get data from Role controller)
function RoleDropDownEditor(container, options) {
    $('<input required  data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({

            dataTextField: "Role",
            dataValueGield: "Id",
            autoBind: false,
            dataSource: {
                transport: {
                    read: {

                        url: "/api/Role",
                        dataType: "json",
                        contentType: "application/json",

                    },
                    schema: {
                        model: {
                            fields: {
                                Id:{type:"string"},
                                Role: { type: "string" }

                            }
                        }
                    }
                }


            }

        });
}

Controller

Web API class Role.cs

    using MyCMS.Models;
using System.Web.Security;

namespace MyCMS.Controllers
{
    public class RoleController : ApiController
    {
        private UsersContext db = new UsersContext();

        public class MyRole
        {
            public string Id { get; set; }
            public string Role { get; set; }
        }

        // GET api/usermanage

        public List<MyRole> Get()
        {
            var result = new List<MyRole>();
            foreach (var role in Roles.GetAllRoles())
            {
                result.Add(new MyRole{ Id = role, Role = role});
            }
            return result;
        }
    }
}

View

    <head>
    <title></title>
</head>

<div id="grid"></div>

@section Scripts{

    @Styles.Render("~/Content/kendo/2013.2.716/css")
    @Scripts.Render("~/bundles/kendo")
    @Scripts.Render("~/bundles/Admin")

}

Answer 1

Check out this post and this Kendo Doc. Setting the ValuePrimitive to 'true' solved this problem for me.

Apparently if the field in your model is null, Kendo tries to assign the whole item to the field. Setting the ValuePrimitive to true prevents that and it just assigns the value field instead.