New to Telerik UI for ASP.NET Core? Download free 30-day trial

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.
        public string ProductName { get; set; }
        // Use the Integer editor template for the UnitsInStock property.
        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.

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

        .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.
        .ToolBar(toolbar => toolbar.Create()) // The "create" command adds new data items.
        .Editable(editable => editable.Mode(GridEditMode.InLine)) // Use inline edit mode.
        .DataSource(dataSource => dataSource
            .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">
        <column field="ProductID" />
        <column field="ProductName" />
        <column field="UnitsInStock" />
        <column title="Commands" width="200">
                <column-command text="Edit" name="edit"></column-command>
                <column-command text="Delete" name="destroy"></column-command>
        <toolbar-button name="create"></toolbar-button>
    <editable mode="inline" />
    <datasource type="DataSourceTagHelperType.WebApi">
            <model id="ProductID">
                    <field name="ProductID" editable="false"></field>
            <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"/>
  1. Build and run the application.

See Also

In this article