WebAPI Editing

You can implement the CRUD (Create, Read, Update, Destroy) data operations and a WebAPI controller for the Telerik UI Grid for ASP.NET Core.

For runnable examples, refer to the demos on editing of the Grid.

Defining a Schema.Model.Id is mandatory for the proper execution of the Update, Create and Destroy of the Grid.

  1. Add a new class to the ~/Models folder. The following example uses the ProductViewModel name.

    public class ProductViewModel
    {
        public int ProductID { get; set; }
        // The ProductName property is required.
        [Required]
        public string ProductName { get; set; }
        // Use the Integer editor template for the UnitsInStock property.
        [UIHint("Integer")]
        public short? UnitsInStock { get; set; }
    }
    
  2. Open Controllers/ProductsController.cs.

  3. Update the Get method as demonstrated by The following example.

    public DataSourceResult Get([DataSourceRequest]DataSourceRequest request)
    {
        return db.Products.ToDataSourceResult(request);
    }
    
  4. Update the Post method as demonstrated in The following example.

    [HttpPost]
    public IActionResult Post(ProductViewModel product)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState.Values.SelectMany(v => v.Errors).Select(error => error.ErrorMessage));
        }
    
        service.Create(product);
    
        return new ObjectResult(new DataSourceResult { Data = new[] { product }, Total = 1 });
    }
    
  5. In the view, configure the Grid to use the Products WebAPI controller.

    @(Html.Kendo().Grid<KendoGridWebApiCRUD.Models.Product>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(product => product.ProductID).Width(100);
            columns.Bound(product => product.ProductName);
            columns.Bound(product => product.UnitsInStock).Width(250);
            columns.Command(commands =>
            {
                commands.Edit(); // The "edit" command will edit and update data items.
                commands.Destroy(); // The "destroy" command removes data items.
            }).Title("Commands").Width(200);
        })
        .ToolBar(toolbar => toolbar.Create()) // The "create" command adds new data items.
        .Editable(editable => editable.Mode(GridEditMode.InLine)) // Use inline edit mode.
        .DataSource(dataSource => dataSource
            .WebApi()
            .Model(model =>
            {
                model.Id(product => product.ProductID); // Specify the property which is the    unique identifier of the model.
                model.Field(product => product.ProductID).Editable(false); // Make the  ProductID property not editable.
            })
    
            .Read(read => read.Action("Get", "Product"))
            .Create(create => create.Action("Post", "Product"))
            .Update(update => update.Action("Put", "Product", new { id = "{0}"} ))
            .Destroy(destroy => destroy.Action("DELETE", "Product", new { id = "{0}" }))    
    
        )
        .Pageable()
    )
    
  6. Build and run the application.

See Also

In this article
Not finding the help you need? Improve this article