Articles in this section
Category / Section

How to add new record with dynamic values in batch edit mode without batch save?

1 min read

By default, addRecord method will add an empty row to the Grid while the Batch edit mode is enabled. However, if the addRecord is called with object or data, it will save the record. In some scenarios, it is required to add rows with values or data but not to save. This case can be handled by calling the addRecord method followed by setDefaultData method of the Grid.

 

This KB demonstrates these methods in the button click events. Render the Grid control with the button.

 

HTML:

<input type="button" id="addEmpty">
<input type="button" id="addValues">
 
<div id="Grid"></div>

 

JavaScript:

<script type="text/javascript">
    $(function () {
        $("#addEmpty").ejButton({
            text: "Add Empty Row",
            click: "EmptyRow"
        })
        $("#addValues").ejButton({
            text: "Add Row with Defaults",
            click: "ValueAddedRow"
        })
        $("#Grid").ejGrid({
            dataSource: window.gridData,
            allowPaging: true,
            toolbarSettings: { showToolbar: true, toolbarItems: ["add","edit","delete","update","cancel"] },
            editSettings: {allowEditing: true, allowAdding: true, editMode: "batch"},
            columns: [
                 { field: "OrderID", headerText: "Order ID", isPrimaryKey: true },
                 { field: "CustomerID", headerText: "Customer ID" },
                 { field: "EmployeeID", headerText: "EmployeeID" },
                 { field: "OrderDate", format: "{0:MM/dd/yyyy}", headerText: "Order Date" }
            ]
        });
 
    });
</script>

 

Razor:

@Html.EJ().Button("addEmpty").Text("Add Empty Row").ClientSideEvents(e => e.Click("EmptyRow"))
@Html.EJ().Button("addValues").Text("Add Row with Defaults").ClientSideEvents(e => e.Click("ValueAddedRow"))
 
@(Html.EJ().Grid<object>("Grid")
    .AllowPaging()
    .Datasource((IEnumerable<object>)ViewBag.dataSource)
    .EditSettings(edit => edit.AllowAdding().AllowEditing().AllowDeleting().EditMode(EditMode.Batch))
    .ToolbarSettings(tool => {
        tool.ToolbarItems(tools => {
            tools.AddTool(ToolBarItems.Add);
            tools.AddTool(ToolBarItems.Edit);
            tools.AddTool(ToolBarItems.Delete);
            tools.AddTool(ToolBarItems.Update);
            tools.AddTool(ToolBarItems.Cancel);
        });
        tool.ShowToolbar();
    })
    .Columns(col =>
    {
        col.Field("OrderID").HeaderText("Order ID").Add();
        col.Field("CustomerID").HeaderText("Customer ID").Add();
        col.Field("EmployeeID").HeaderText("EmployeeID").Add();
        col.Field("OrderDate").Format("{0:MM/dd/yyyy}").HeaderText("Order Date").Add();
    })
)

 

Controller:

namespace MvcApplication66.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.dataSource = OrderRepository.GetAllRecords();
            return View();
        }
 
    }
}

 

WebForms:

<ej:Button ID="addEmpty" Type="Button" ClientSideOnClick="EmptyRow" runat="server" Text="Add Empty Row"></ej:Button>
<ej:Button ID="addValues" Type="Button" ClientSideOnClick="ValueAddedRow" runat="server" Text="Add Row with Defaults"></ej:Button>
 
<ej:Grid ID="Grid" runat="server" AllowPaging="True" >
    <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="Batch"></EditSettings>
    <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
    <Columns>
        <ej:Column Field="OrderID" HeaderText="Order ID" />
        <ej:Column Field="CustomerID" HeaderText="Customer ID" />
        <ej:Column Field="EmployeeID" HeaderText="Employee ID" />
        <ej:Column Field="OrderDate" HeaderText="Order Date" Format="{0:MM/dd/yyyy}" />
    </Columns>
</ej:Grid>

 

        protected void Page_Load(object sender, EventArgs e)
        {
            this.Grid.DataSource = order;
            this.Grid.DataBind();
        }

 

.Net Core

<ej-button id="addEmpty" click="EmptyRow" text="Add Empty Row" />
 
<ej-button id="addValues" click="ValueAddedRow" text="Add Row With Details" />
 
<ej-grid id="Grid" dataSource="ViewBag.dataSource" allow-paging="true">
    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="@(EditMode.Batch)"></e-edit-settings>
    <e-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string>() {"add","edit","delete","update","cancel" })"></e-toolbar-settings>
    <e-columns>
        <e-column field="OrderID" header-text="Order ID" is-primary-key="true"></e-column>
        <e-column field="CustomerID" header-text="Customer ID"></e-column>
        <e-column field="EmployeeID" header-text="Employee ID"></e-column>
        <e-column field="OrderDate" header-text="Order Date" format="{0:MM/dd/yyyy}"></e-column>
    </e-columns>
</ej-grid>
 

 

namespace core1.Controllers
{
    public partial class GridController : Controller
    {
        public static List<Orders> order = new List<Orders>();
        public ActionResult GridFeatures()
        {
            ViewBag.dataSource = order;
            return View();
        }
    }
}
 

 

Now, define click event for both the buttons.

<script>
    function EmptyRow(args) {
        //add row
        $("#Grid").ejGrid("addRecord");
    }
    function ValueAddedRow(args) {
        var obj = $("#Grid").ejGrid("instance");
        var val = Math.round(Math.random() * 1000)
        //set values to the row
        obj.setDefaultData({
            OrderID: val,
            EmployeeID: ej.parseInt(val.toString()[0]),
            CustomerID: "VIN", OrderDate: new Date()
        });
        //add row
        obj.addRecord();
    }
</script>

 

Angular2:

<input id="addEmpty" type="button" ej-button (click)="EmptyRow($e)" text="Add Empty Row"/>
<input id="addValues" type="button" ej-button (click)="ValueAddedRow($e)" text="Add Row with Defaults" />
 
<ej-grid id="Grid" #grid [dataSource] ="datasrc" [allowPaging]="true" [toolbarSettings]="toolbarsettings" >
    <e-columns>
        <e-column field="OrderID" headerText="Order ID" ></e-column>
        <e-column field="CustomerID" headerText="Customer ID"></e-column>
        <e-column field="EmployeeID" headerText="Employee Name"></e-column>
        <e-column field="OrderDate" format="{0:MM/dd/yyyy}" headerText="Order Date"></e-column>
    </e-columns>
</ej-grid>

 

TypeScript:

import { Component, OnInit, Input, ElementRef, ViewChild } from '@angular/core';
import { EJComponents } from "ej-angular2/src/ej/core";
 
@Component({
    selector: 'ej-app',
    templateUrl: 'src/grid/grid.component.html',
})
export class GridComponent {
    constructor() {
        this.datasrc = data;
        this.toolbarsettings = {
            showToolbar: true,
            toolbarItems: ["add", "edit", "delete", "update", "cancel"]
        };
    }
    public datasrc: any;
    public toolbarsettings: any;
    @ViewChild('grid') Grid: EJComponents<any, any>;
 
    EmptyRow(e) {
        //add row
        this.Grid.widget.addRecord();
    }
    ValueAddedRow(e) {
        var val = Math.round(Math.random() * 1000)
        //set values to the row
        this.Grid.widget.addRecord({
            OrderID: val,
            EmployeeID: ej.parseInt(val.toString()[0]),
            CustomerID: "VIN", OrderDate: new Date()
        });
        //add row
        this.Grid.widget.addRecord()
    } 
}

 

Figure 1. On Adding Empty Rows.

 

Figure 2. Adding rows with values.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied