ASPxClientGridViewBatchEditApi.AddNewRow Method

Adds a new row and invokes in-place data editors.

Declaration

AddNewRow(): void

Remarks

When you call the client-side BatchEditApi.AddNewRow method, the grid behaves as follows:

1. Raises the client-side BatchEditRowInserting event and creates a new row.
2. Raises the client-side BatchEditStartEditing event and switches to edit mode – displays in-place editors within the new data cells.

JS

clientGrid.batchEditApi.AddNewRow();

Add a New Row and Specify Its Cell Values

Use one of the following options to specify cell values of the newly inserted row:

End Cell Editing and Call the SetCellValue Method on the Client Side

Follow the steps below:

1. Use the rowVisibleIndex property to get the visible index of the inserted row.
2. Call the EndEdit method to end cell editing.
3. Call the SetCellValue(visibleIndex, columnFieldNameOrId, value) method to specify cell values.

ASPX

<dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" KeyFieldName="CustomerID"
    ClientInstanceName="clientGrid">
    <Columns>
        <dx:GridViewDataTextColumn FieldName="ContactName" />
        <%--...--%>
    </Columns>
    <SettingsEditing Mode="Batch" />
</dx:ASPxGridView>

<dx:ASPxButton ID="ASPxButton1" runat="server" Text="Add New Row" AutoPostBack="false">
    <ClientSideEvents Click="OnButtonClick" />
</dx:ASPxButton>

JS

function OnButtonClick(s, e) {
    clientGrid.batchEditApi.AddNewRow();
    var rowIndex = clientGrid.batchEditApi.GetEditCellInfo().rowVisibleIndex;
    clientGrid.batchEditApi.EndEdit();
    clientGrid.batchEditApi.SetCellValue(rowIndex, 'ContactName', 'New customer');
}

Initialize New Rows on the Server and Specify Its Cell Values on the Client Side

Follow the steps below:

1. Handle the server-side InitNewRow event to initialize new rows.
2. In this event handler, use the NewValues argument property to specify default values for all inserted rows.
3. Handle the client-side BatchEditStartEditing event.
4. In this event handler, use the rowValues argument property to specify cell values. To assign new values to all cells within the inserted row, set the EditMode property to Row.

ASPX

<dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" KeyFieldName="CustomerID"
    ClientInstanceName="clientGrid" OnInitNewRow="ASPxGridView1_InitNewRow">
    <Columns>
        <dx:GridViewDataTextColumn FieldName="ContactName" />
        <%--...--%>
    </Columns>
    <SettingsEditing Mode="Batch">
        <BatchEditSettings EditMode="Row" />
    </SettingsEditing>
    <ClientSideEvents BatchEditStartEditing="Grid_BatchEditStartEditing"/>
</dx:ASPxGridView>

<dx:ASPxButton ID="ASPxButton1" runat="server" Text="Add New Row" AutoPostBack="false">
    <ClientSideEvents Click="OnButtonClick" />
</dx:ASPxButton>

JS

function OnButtonClick(s, e) {
    clientGrid.batchEditApi.AddNewRow();
}

function Grid_BatchEditStartEditing(s, e) {
    e.rowValues[1].value = "New customer";
}

C#

protected void ASPxGridView1_InitNewRow(object sender, DevExpress.Web.Data.ASPxDataInitNewRowEventArgs e) {
    e.NewValues["ContactName"] = "Enter contact name";
}

VB.NET

Protected Sub ASPxGridView1_InitNewRow(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataInitNewRowEventArgs)
    e.NewValues("ContactName") = "Enter Name"
End Sub