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.
-
Add a new class to the
~/Models
folder. The following example uses theProductViewModel
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; } }
Open
Controllers/ProductsController.cs
.-
Update the
Get
method as demonstrated by The following example.public DataSourceResult Get([DataSourceRequest]DataSourceRequest request) { return db.Products.ToDataSourceResult(request); }
-
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 }); }
-
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() )
Build and run the application.