# Deferred Batch Updates

Develop powerful and lightweight web applications using ASP.NET MVC controls. Learn more about the ComponentOne MVC controls in ASP.NET MVC documentation.

## Content



FlexGrid provides support for deferred batch updates through ODataCollectionViewService class which allows MVC applications to use OData data sources. It supports CRUD operations by committing changes (edits, adds, and deletes) immediately to the database.

To defer batch updates, you can set the **DeferCommits** property to **true**. This causes the ODataCollectionView to track any changes made to the data and prevent any commits to the database until you click the Commit button to commit the changes to the database or click the Cancel button to discard the changes without committing them as shown in the following example where the code creates an ODataCollectionView with deferred commits:

![Image showing deferred batch updates](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/odatadefercommit.png)

### Add Model

```csharp
public partial class Category
{
    public int CategoryID { get; set; }
    public string CategoryName { get; set; }
    public string Description { get; set; }
}
```

### Add Controller

```csharp
public ActionResult Index()
{
     return View();
}
```

### Add View for the Controller

```razor
@using ODataDeferCommmit_MVC.Models
@model IEnumerable<Category>
@section Scripts{
    <script type="text/javascript">
        var cv, oDataDeferCommits, minHeight;
        c1.documentReady(function () {
            oDataDeferCommits = wijmo.Control.getControl('#oDataDeferCommits');
            cv = oDataDeferCommits.collectionView;
        });
        function commitEdits() {
            cv.commitChanges(function (r) {
                setQueryMessage('Commit Done');
            });
            var isChanged = (cv.itemsEdited && cv.itemsEdited.length);
            if (isChanged) {
                setQueryMessage('Commit Updating');
            } else {
                setQueryMessage('Commit NoChange');
            }
        }
        function cancelChanges() {
            cv.cancelChanges();
            setQueryMessage('');//clear message
        }
        function setQueryMessage(message, className) {
            var element = document.getElementById('queryMessage');
            element.innerHTML = message;
            element.className = className;
        }
    </script>
}
<input type="button" value="Commit" class="btn" onclick="commitEdits()" />
<input type="button" value="Cancel" class="btn" onclick="cancelChanges()" />
<span id="queryMessage"></span>
@(
Html.C1().FlexGrid<Category>()
    .Id("oDataDeferCommits").AutoGenerateColumns(false)
    .Columns(columns => columns
        .Add(c => c.Binding("@odata.id").Header("OData Id").IsReadOnly(true))
        .Add(c => c.Binding("@odata.editLink").Header("OData edit link").IsReadOnly(true))
        .Add(c => c.Binding("AirlineCode").Header("Airline Code"))
        .Add(c => c.Binding("Name")))
    .BindODataSource(odsb =>
                        odsb.ServiceUrl("https://services.odata.org/V4/(S(3vn0jej2dr3ebcgodm1zxcys))/TripPinServiceRW/")
                        .TableName("Airlines")
                        .Keys("AirlineCode")
                        .DeferCommits(true))
)
```