如何在不保存到数据库的情况下将数据添加到Telerik UI for ASP.NET MVC中的网格中？

Question

Do you guys know how to insert data in telerik without the data being inserted to database ? Because I need to hold the data first and then create a button to submit all the data to database.

Here is my grid

@(Html.Kendo().Grid<COGS.Models.Invoice>()
        .Name("invoice-grid")
            .Events(e => {
                e.Edit("onEdit");
            }   
        )
        .DataSource(DataSource => DataSource
            .Ajax() 
            .Model(model => model.Id(data => data.InvoiceNumber))
            .Read(read => read
                    .Action("ReadInvoiceData", "Home"))
                    .Create(create => create.Action("CreateInvoiceData", "Home"))
                    .Update(update => update.Action("UpdateInvoiceData", "Home"))
                    .Destroy(destroy => destroy.Action("DeleteInvoiceData", "Home"))
        )
        .Columns(columns =>
                {
                    columns.Bound(data => data.InvoiceNumber);
                    columns.Bound(data => data.Date).EditorTemplateName("Date").Format("{0:MM/dd/yyyy}");
                    columns.Bound(data => data.RecievedDate).EditorTemplateName("Date").Format("{0:MM/dd/yyyy}");
                    columns.Command(command =>
                    {
                        command.Edit();
                        command.Destroy();
                    }).Title("Command").Width("250px");
                }
        )
        .ToolBar(toolbar =>
        {
            toolbar.Create().Text("Add New Invoice");
        })
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Pageable()
        .Sortable()
    )

and here is my controllers

public ActionResult ReadInvoiceData([DataSourceRequest] DataSourceRequest request)
    {
        IQueryable<Invoice> data = connection.Invoices.Where(x => x.Status == 1 && x.WaybillNumber == null);
        DataSourceResult result = data.ToDataSourceResult(request);
        return Json(result, JsonRequestBehavior.AllowGet);
    }

public ActionResult CreateInvoiceData([DataSourceRequest] DataSourceRequest request, Invoice invoice)
    {
        if (ModelState.IsValid)
        {
            var entity = new Invoice
            {
                InvoiceNumber = invoice.InvoiceNumber,
                Date = invoice.Date,
                RecievedDate = invoice.RecievedDate,
                WaybillNumber = invoice.WaybillNumber,
                Status = invoice.Status
            };

            connection.Invoices.Add(entity);
            connection.SaveChanges();
        }
        return Json(new[] { invoice }.ToDataSourceResult(request, ModelState));
    }

public ActionResult UpdateInvoiceData([DataSourceRequest] DataSourceRequest request, Invoice invoice)
    {
        if (ModelState.IsValid)
        {
            var entity = new Invoice
            {
                InvoiceNumber = invoice.InvoiceNumber,
                Date = invoice.Date,
                RecievedDate = invoice.RecievedDate,
                WaybillNumber = invoice.WaybillNumber,
                Status = invoice.Status
            };

            connection.Invoices.Attach(entity);
            connection.Entry(entity).State = EntityState.Modified;
            connection.SaveChanges();
        }
        return Json(new[] { invoice }.ToDataSourceResult(request, ModelState));
    }

public ActionResult DeletePOData([DataSourceRequest] DataSourceRequest request, PurchaseOrder purchaseOrder)
    {
        if (ModelState.IsValid)
        {
            var entity = new PurchaseOrder
            {
                PONumber = purchaseOrder.PONumber,
                Date = purchaseOrder.Date,
                Origin = purchaseOrder.Origin,
                Vendor = purchaseOrder.Vendor,
                Status = purchaseOrder.Status
            };

            connection.PurchaseOrders.Attach(entity);
            connection.PurchaseOrders.Remove(entity);
            connection.SaveChanges();

        }
        return Json(new[] { purchaseOrder }.ToDataSourceResult(request, ModelState));
    }

EDIT : I have manage to add data without being inserted to database with remove this line

connection.SaveChanges();

from create function in controllers, but now how do i create a button to save all the data in grid to database ?, i assume it will use javascript to do that

Answer 1

Following is an example from KendoUI documentation website: http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-sync

<script>
var dataSource = new kendo.data.DataSource({
  batch: true,
  transport: {
    read:  {
      url: "http://demos.telerik.com/kendo-ui/service/products",
      dataType: "jsonp" //"jsonp" is required for cross-domain requests; use "json" for same-domain requests
    },
    update: {
      url: "http://demos.telerik.com/kendo-ui/service/products/update",
      dataType: "jsonp" //"jsonp" is required for cross-domain requests; use "json" for same-domain requests
    },
    destroy: {
      url: "http://demos.telerik.com/kendo-ui/service/products/destroy",
      dataType: "jsonp" //"jsonp" is required for cross-domain requests; use "json" for same-domain requests
    }
  },
  schema: {
    model: { id: "ProductID" }
  }
});
dataSource.fetch(function() {
  var product = dataSource.at(0);
  product.set("UnitPrice", 20);
  var anotherProduct = dataSource.at(1);
  anotherProduct.set("UnitPrice", 20);
  var yetAnotherProduct = dataSource.at(2);
  dataSource.remove(yetAnotherProduct);
  dataSource.sync(); // makes a request to http://demos.telerik.com/kendo-ui/service/products/update" and http://demos.telerik.com/kendo-ui/service/products/destroy
});
</script>

So in javascript, you have to find the grid widget, get its dataSource and invoke the sync method on it.

var grid = $("#mygrid.k-grid").data('kendoGrid');
var ds = grid.dataSource;
ds.sync();