Category / Section
How to batch save Grid changes in button click?
1 min read
In Batch Editing mode of Grid, the edited record details are saved by using an external button with the batchSave() method of the Grid.
Initializing Button control
HTML
<input type="button" value="Save" onclick="SaveHandler()" />
Grid Initialization
JavaScript
<div id="Grid"></div>
$("#Grid").ejGrid({
// the datasource "window.gridData" is referred from jsondata.min.js
dataSource: window.gridData,
allowPaging: true,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: "batch" },
toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
columns: [
{ field: "OrderID", headerText: "Order ID", isPrimaryKey: true, width: 100 },
{ field: "CustomerID", headerText: "Customer ID", width: 130 },
{ field: "Freight", headerText: "Freight", width: 100, format: "{0:C}" },
{ field: "ShipCity", headerText: "Ship City", width: 100 },
{ field: "ShipCountry", headerText: "Ship Country", width: 100, },
]
});
MVC
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.data)
.AllowPaging()
.EditSettings(edit => edit.AllowEditing().AllowAdding().AllowDeleting().EditMode(EditMode.Batch))
.ToolbarSettings(toolbar =>
{
toolbar.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.Add);
items.AddTool(ToolBarItems.Edit);
items.AddTool(ToolBarItems.Delete);
items.AddTool(ToolBarItems.Update);
items.AddTool(ToolBarItems.Cancel);
});
})
.Columns(col =>
{
col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(100).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(100).Add();
col.Field("Freight").Width(100).Format("{0:c2}").Add();
col.Field("ShipCity").HeaderText("Ship City").Width(100).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width(100).Add();
})
)
[In controller]
namespace EJGrid.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
var DataSource = OrderRepository.GetAllRecords();
ViewBag.data = DataSource;
return View();
}
}
}
ASP
<ej:Grid ID="FlatGrid" runat="server" AllowSorting="True" AllowPaging="True">
<ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" />
<ej:Column Field="Freight" HeaderText="Freight" Format="{0:C}" />
<ej:Column Field="ShipCity" HeaderText="Ship City" />
<ej:Column Field="ShipCountry" HeaderText="Ship Country" />
</Columns>
<EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="Batch"> </EditSettings>
</ej:Grid>
[CS]
public partial class _Default : Page
{
List<Orders> order = new List<Orders>();
protected void Page_Load(object sender, EventArgs e)
{
this.OrdersGrid.DataSource = new NorthwindDataContext().Orders;
this.OrdersGrid.DataBind();
}
}
batchSave() method
It is used to save the modified changes to data source in Grid control when the Edit mode is in Batch.
In the click event of the button, the Grid object is created for the instance and the save request is sent using the batchSave() method of the Grid.
JS
<script type="text/javascript">
function SaveHandler() {
var obj = $("#Grid").ejGrid("instance")
obj.batchSave()
}
</script>
