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

• Editing Approaches by the Grid HtmlHelper for ASP.NET MVC (Demos)
• Server-Side API