ASP.NET MVC Kendo Grid Add New using Popup

Question

I'm going to create a web page to manage my users using ASP.NET MVC Kendo Grid. When I click the Add New button in Kendo Grid nothing is happened and the button does not work. How can I solve the problem?

Here is my UserViewModel class:

public class UserViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }

    [ScriptIgnore]
    public byte[] Photo { get; set; }
    public string Photo64
    {
        get
        {
            return Photo != null ? Convert.ToBase64String(Photo) : null;
        }
    }

    public bool Leave { get; set; }
}

Here is my Read and Create actions:

public ActionResult Users_Read([DataSourceRequest]DataSourceRequest request)
{
    using (var db = new DBEntities())
    {
         var users = from u in db.Users
                     select new UserViewModel
                     {
                         Id = u.Id,
                         Name = u.Name,
                         Photo = u.Photo,
                         Leave = u.Leave ?? false
                     };
         DataSourceResult result = users.ToDataSourceResult(request);
         return Json(result);
    }
}

public ActionResult Users_Create([DataSourceRequest]DataSourceRequest request, UserViewModel user)
{
    if (ModelState.IsValid)
    {
        using (var db = new DBEntities())
        {
             var entity = new User
             {
                 Name = user.Name
                 Photo = user.Photo,
                 Leave = user.Leave
             };

             db.Users.Add(entity);
             db.SaveChanges();
             user.Id = entity.Id;
        }
    }                
    return Json(new[] { user }.ToDataSourceResult(request, ModelState));
}

Here is my View:

@(Html.Kendo().Grid<MyApp.Models.User>()
              .Name("grid")
              .Columns(c =>
              {
                  c.Bound(u => u.Id).Visible(false);
                  c.Bound(u => u.Photo).ClientTemplate(
                        "# if (Photo64 == null) { #" +
                            "<img src='" + Url.Content("~/Images/") + "no_profile_photo.jpg' />" +
                        "# } else { #" +
                            "<img src='data:image/jpg;base64,#=Photo64#' />" +
                        "# } #"
                    );
                  c.Bound(u => u.Name);
                  c.Bound(u => u.Leave).ClientTemplate(
                        "<input type='checkbox' onclick='return false' value='#= Id #' " +
                            "# if (Leave) { #" +
                                "checked='checked'" +
                            "# } #" +
                         "/>"
                    );
                  c.Command(cmd => { cmd.Edit(); cmd.Destroy(); });
              })
              .ToolBar(toolbar => toolbar.Create())
              .Editable(editable => editable.Mode(GridEditMode.PopUp))
              .DataSource(dataSource => dataSource
                  .Ajax()
                  .Model(m =>
                  {
                      m.Id(user => user.Id);
                      m.Field(user => user.Name);
                      m.Field(user => user.Photo);
                      m.Field(user => user.Leave);
                  })
                  .Create(create => create.Action("Users_Create", "User"))
                  .Read(read => read.Action("Users_Read", "User"))
                  .Update(update => update.Action("Users_Update", "User"))
                  .Destroy(destroy => destroy.Action("Users_Destroy", "User"))
               )
              .Pageable()
              .Sortable()
              .Filterable()
)

Answer 1

Your Users_Read method returns a kendo datasource of type UserViewModel, but then the grid is defined as of type Grid<MyApp.Models.User> which is causing the error.