Kendo Grid CRUD operations

Question

I'm using a Kendo (for jQuery) Grid in an MVC Core project with Add, Edit, Delete using ajax JSON and SQL Server, but the Update, Destroy and Create actions are not called.

Here is my view:

<div id="grid" class="k-rtl applicationFontLight"></div>

<script>
    $(document).ready(function () {
        dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/Persons/Read",
                    dataType: "json"
                },
                update: {
                    url: "/Persons/Update",
                    dataType: "json"
                },
                destroy: {
                    url: "/Persons/Destroy",
                    dataType: "json"
                },
                create: {
                    url: "/Persons/Create",
                    dataType: "json"
                },
                parameterMap: function (options, operation) {
                    if (operation !== "read" && options.models) {
                        return { models: kendo.stringify(options.models) };
                    }
                }
            },
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "id",
                    fields: {
                        Id: { editable: false, nullable: true },

                        firstName: {
                            type: "string",
                            validation: {
                                required: {
                                    message: "Required"
                                }
                            }
                        },

                        lastName: {
                            type: "string",
                            validation: {
                                required: {
                                    message: "Required"
                                }
                            }
                        },

                        birthDate: {
                            type: "string",
                            validation: {
                                required: {
                                    message: "Required"
                                }
                            }
                        }
                    }
                }
            }
        })

        $("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: true,
            toolbar: [{ name: "create", text: "New" }],
            columns: [
                { field: "firstName", title: "Name", width: "80px" },
                { field: "lastName", title: "Last Name", width: "120px" },
                { field: "birthDate", title: "Birth Date", width: "80px" },
                {
                    command: [{
                        name: "edit",
                        text: {
                            edit: "Edit",
                            update: "Update",
                            cancel: "Cancel"
                        }
                    }
                        , {
                        name: "destroy",
                        text: "Delete"
                    }
                    ], width: "200px"
                }
            ],
            editable: "inline"
        });
    });
</script>

And my Controller Code:

public class PersonsController : Controller
{
    private readonly DataContext _context;

    public PersonsController(DataContext context)
    {
        _context = context;
    }

    // GET: Persons
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Read()
    {
        var persons = _context.Persons.ToList();
        return Json(persons);
    }

    public async Task<IActionResult> Create([Bind("Id,FirstName,LastName,BirthDate")] Person person)
    {
        if (ModelState.IsValid)
        {
            _context.Add(person);
            await _context.SaveChangesAsync();
            return Json(person);               
        }
        return View(person);
    }

    public async Task<IActionResult> Update(int id, [Bind("Id,FirstName,LastName,BirthDate")] Person person)
    {
        if (id != person.Id)
        {
            return NotFound();
        }

        if (ModelState.IsValid)
        {
            try
            {
                _context.Update(person);
                await _context.SaveChangesAsync();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!PersonExists(person.Id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }
            return  Json(person);
        }
        return View(person);
    }

    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Destroy(int id)
    {
        var person = await _context.Persons.FindAsync(id);
        _context.Persons.Remove(person);
        await _context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }

    private bool PersonExists(int id)
    {
        return _context.Persons.Any(e => e.Id == id);
    }
}

The other actions (besides the Read action) are not called and give me this error in the browser console:

Unexpected character encountered while parsing value: m. Path '', line 0, position 0.
or view Destroy not found...

Answer 1

Replace the following code:

                    command: [{
                    name: "edit",
                    text: {
                        edit: "Edit",
                        update: "Update",
                        cancel: "Cancel"
                    }
                }
                    , {
                    name: "destroy",
                    text: "Delete"
                }
                ], width: "200px"

Try the default column command, then try the toolbar create.

command: ["edit","destroy"], title: " ", width: "200px"