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}" }))
)
)
@{ var Id = new { id = "{0}" }; }
<kendo-grid name="grid" height="430">
<columns>
<column field="ProductID" />
<column field="ProductName" />
<column field="UnitsInStock" />
<column title="Commands" width="200">
<commands>
<column-command text="Edit" name="edit"></column-command>
<column-command text="Delete" name="destroy"></column-command>
</commands>
</column>
</columns>
<toolbar>
<toolbar-button name="create"></toolbar-button>
</toolbar>
<editable mode="inline" />
<datasource type="DataSourceTagHelperType.WebApi">
<schema>
<model id="ProductID">
<fields>
<field name="ProductID" editable="false"></field>
</fields>
</model>
</schema>
<transport>
<read url="@Url.Action("Get", "Product")"/>
<create url="@Url.Action("Post", "Product")"/>
<update url="@Url.Action("Put", "Product")" data ="@Id"/>
<destroy url="@Url.Action("Delete", "Product")" data="@Id"/>
</transport>
</datasource>
</kendo-grid>
- Build and run the application.