Editing With Edit Form

The Grid View control provides end-user data editing functionality out of the box. The commands for end-user data modification are displayed within a command column. Add this column to the grid’s Columns to allow editing.

By default, a built-in Edit Form is used to modify cell values. The Edit Form displays edit cells that correspond to data columns, and the Cancel/Update commands that allow end-users to discard changes or save them to a database.

By default all data editing operations are prohibited. In this demo, row insertion, deletion, and editing is explicitly enabled using settings available through the SettingDataSecurity property.

First NameLast NameTitleBirth DateCityCountry
NancyDavolioSales Representative12/8/1978SeattleUSA
 AndrewFullerVice President, Sales2/19/1965TacomaUSA
JanetLeverlingSales Representative8/30/1985KirklandUSA
MargaretPeacockSales Representative9/19/1973RedmondUSA
StevenBuchananSales Manager3/4/1955LondonUK
MichaelSuyamaSales Representative7/2/1981LondonUK
RobertKingSales Representative5/29/1960LondonUK
LauraCallahanInside Sales Coordinator1/9/1985SeattleUSA
AnneDodsworthSales Representative1/27/1980LondonUK
<dx:BootstrapGridView runat="server" DataSourceID="DataSourceEditingEditForm" KeyFieldName="EmployeeID" EnableRowsCache="False">
    <SettingsDataSecurity AllowEdit="true" AllowDelete="true" AllowInsert="true" />
    <Columns>
        <dx:BootstrapGridViewCommandColumn ShowEditButton="true" ShowDeleteButton="true" ShowNewButtonInHeader="true" />
        <dx:BootstrapGridViewDataColumn FieldName="FirstName" />
        <dx:BootstrapGridViewDataColumn FieldName="LastName" />
        <dx:BootstrapGridViewDataColumn FieldName="Title" />
        <dx:BootstrapGridViewDateColumn FieldName="BirthDate" />
        <dx:BootstrapGridViewDataColumn FieldName="City" />
        <dx:BootstrapGridViewDataColumn FieldName="Country" />
    </Columns>
</dx:BootstrapGridView>

Batch Editing and Updating

The Grid View control allows you to edit and update multiple grid rows on the client side and send them to the server in a single request.

To enable the batch editing functionality, set the SettingsEditing.Mode property to 'Batch'. In this mode, grid data contained in a page can be edited using in-line editors. The modified cells are highlighted. Deleted rows are also highlighted and display the Recover command item. To hide the deleted rows from the view, set the SettingsEditing.BatchEditSettings.HighlightDeletedRows property to false. All changes are maintained on the client side until the Save changes link is clicked, or all changes are canceled by clicking the Cancel changes button.

If a grid contains modified data, it displays a confirm message before a grid callback or postback is performed.

You can customize the batch edit mode settings using the following properties.

  • The EditMode property allows you to specify which control element (data cell or data row) is used to edit data.
  • The StartEditAction property specifies the action that will be used to begin editing grid data.

The batchEditApi property provides access to the batch editing client API. The BatchEditStartEditing and BatchEditEndEditing events occur when a grid switches to/leaves the batch edit mode.

By default, all data editing operations are prohibited. In this demo, row insertion, deletion, and editing is explicitly enabled using settings available through the SettingDataSecurity property.

First NameLast NameTitleBirth DateCityCountry
NancyDavolioSales Representative12/8/1978SeattleUSA
AndrewFullerVice President, Sales2/19/1965TacomaUSA
JanetLeverlingSales Representative8/30/1985KirklandUSA
MargaretPeacockSales Representative9/19/1973RedmondUSA
StevenBuchananSales Manager3/4/1955LondonUK
MichaelSuyamaSales Representative7/2/1981LondonUK
RobertKingSales Representative5/29/1960LondonUK
LauraCallahanInside Sales Coordinator1/9/1985SeattleUSA
AnneDodsworthSales Representative1/27/1980LondonUK
<dx:BootstrapGridView runat="server" DataSourceID="DataSourceBatchEditing" KeyFieldName="EmployeeID" EnableRowsCache="False">
    <SettingsEditing Mode="Batch"></SettingsEditing>
    <SettingsDataSecurity AllowEdit="true" AllowDelete="true" AllowInsert="true" />
    <Columns>
        <dx:BootstrapGridViewCommandColumn ShowEditButton="true" ShowDeleteButton="true" ShowNewButtonInHeader="true" />
        ...
    </Columns>
</dx:BootstrapGridView>

Editing in Popup Edit Form

In this mode, the Edit Form is displayed within a popup window. To use this mode, set the SettingsEditing.Mode property to PopupEditForm.

By default, all data editing operations are prohibited. In this demo, row insertion, deletion, and editing is explicitly enabled using settings available through the SettingDataSecurity property.

First NameLast NameTitleBirth DateCityCountry
NancyDavolioSales Representative12/8/1978SeattleUSA
AndrewFullerVice President, Sales2/19/1965TacomaUSA
JanetLeverlingSales Representative8/30/1985KirklandUSA
MargaretPeacockSales Representative9/19/1973RedmondUSA
StevenBuchananSales Manager3/4/1955LondonUK
MichaelSuyamaSales Representative7/2/1981LondonUK
RobertKingSales Representative5/29/1960LondonUK
LauraCallahanInside Sales Coordinator1/9/1985SeattleUSA
AnneDodsworthSales Representative1/27/1980LondonUK
<dx:BootstrapGridView runat="server" DataSourceID="DataSourceEditingPopupEditForm" KeyFieldName="EmployeeID" EnableRowsCache="False">
    <SettingsEditing Mode="PopupEditForm"></SettingsEditing>
    <SettingsDataSecurity AllowEdit="true" AllowDelete="true" AllowInsert="true" />
    <Columns>
        <dx:BootstrapGridViewCommandColumn ShowEditButton="true" ShowDeleteButton="true" ShowNewButtonInHeader="true" />
        ...
    </Columns>
</dx:BootstrapGridView>

Inline Editing

In the inline editing mode, the Grid View control displays an In-Line Edit Row instead of the edited data row. The edit row displays edit cells that correspond to visible data columns. To use this mode, set the SettingsEditing.Mode property to Inline.

By default, all data editing operations are prohibited. In this demo, row insertion, deletion, and editing is explicitly enabled using settings available through the SettingDataSecurity property.

First NameLast NameTitleBirth DateCountry
NancyDavolioSales Representative12/8/1978USA
JanetLeverlingSales Representative8/30/1985USA
MargaretPeacockSales Representative9/19/1973USA
StevenBuchananSales Manager3/4/1955UK
MichaelSuyamaSales Representative7/2/1981UK
RobertKingSales Representative5/29/1960UK
LauraCallahanInside Sales Coordinator1/9/1985USA
AnneDodsworthSales Representative1/27/1980UK
<dx:BootstrapGridView runat="server" DataSourceID="DataSourceInlineEditing" KeyFieldName="EmployeeID" EnableRowsCache="False">
    <SettingsEditing Mode="Inline"></SettingsEditing>
    <SettingsDataSecurity AllowEdit="true" AllowDelete="true" AllowInsert="true" />
    <Columns>
        <dx:BootstrapGridViewCommandColumn ShowEditButton="true" ShowDeleteButton="true" ShowNewButtonInHeader="true" Width="150px" />
        ...
    </Columns>
</dx:BootstrapGridView>

Cascading ComboBoxes

In this demo, the combo box in the City column (the City combo box) is populated dynamically with city names using callbacks, based on the value selected in the combo box in the Country column (the Country combo box). Only the content stored in the City combo box is updated during round-trips to the server - not the content of the page or the Grid View control.

The client-side SelectedIndexChanged event of the Country combo box is handled to update the City combo box. On the server side, the Callback event is handled to populate the City combo box with required values.

By default, all data editing operations are prohibited. In this demo, row insertion, deletion, and editing is explicitly enabled using settings available through the SettingDataSecurity property.

#CountryCityContact NameCompany Name
GermanyBerlinMaria AndersAlfreds Futterkiste
MexicoMéxico D.F.Ana TrujilloAna Trujillo Emparedados y helados
MexicoMéxico D.F.Antonio MorenoAntonio Moreno Taquería
SwedenLuleåChristina BerglundBerglunds snabbköp
GermanyMannheimHanna MoosBlauer See Delikatessen
FranceStrasbourgFrédérique CiteauxBlondesddsl père et fils
SpainMadridMartín SommerBólido Comidas preparadas
FranceMarseilleLaurence LebihanBon app'
CanadaTsawassenElizabeth LincolnBottom-Dollar Markets
<dx:BootstrapGridView ClientInstanceName="grid" runat="server" DataSourceID="DataSourceCascadingComboBoxes"
    KeyFieldName="CustomerID" OnCellEditorInitialize="grid_CellEditorInitialize">
    <SettingsEditing Mode="Inline" />
    <SettingsDataSecurity AllowEdit="true" AllowDelete="true" AllowInsert="true" />
    <Columns>
        <dx:BootstrapGridViewCommandColumn ShowEditButton="true" />
        <dx:BootstrapGridViewComboBoxColumn FieldName="Country">
            <PropertiesComboBox DataSourceID="CountriesDataSource" TextField="CountryName"
                ValueField="CountryName" EnableSynchronization="False" IncrementalFilteringMode="StartsWith">
                <ClientSideEvents SelectedIndexChanged="onCountryChanged"></ClientSideEvents>
            </PropertiesComboBox>
        </dx:BootstrapGridViewComboBoxColumn>
        <dx:BootstrapGridViewComboBoxColumn FieldName="City">
            <PropertiesComboBox EnableSynchronization="False" IncrementalFilteringMode="StartsWith"></PropertiesComboBox>
        </dx:BootstrapGridViewComboBoxColumn>
        ...
    </Columns>
</dx:BootstrapGridView>

Data Validation

The Grid View Control allows you to manually validate the edited row and display errors for invalid fields. This demo demonstrates how you can provide data validation by handling the RowValidating event.

To indicate rows with invalid data, the HtmlRowPrepared event is handled. This event is raised for each data row when the corresponding row within the table has been created. In this sample, rows with invalid data are colored in red (a text-danger CSS class is applied).

In the Edit Form, an error icon indicates an invalid field. Hover over the icon with the mouse to display a hint along with a description of the error.

By default, all data editing operations are prohibited. In this demo, row insertion, deletion, and editing is explicitly enabled using settings available through the SettingDataSecurity property.

# AgeEmailArrival Date
  Andrew Fuller 42andrew.fuller@devexpress.com10/19/2017
Please, correct all errors.
Margaret Peackop 48margaret.peackop.devexpress.com11/26/2017
Nancy Davolio 34nancy.davolio@devexpress.com11/24/2017
Robert King 29robert.king@devexpress.com11/25/2017
Anne Dodsworth 17anne.dodsworth@devexpress.com11/24/2017
<dx:BootstrapGridView ID="GridViewDataValidation" runat="server" DataSourceID="PersonsDataSource" KeyFieldName="Id" EnableRowsCache="False"
    OnHtmlRowPrepared="grid_HtmlRowPrepared" OnRowValidating="grid_RowValidating" OnStartRowEditing="grid_StartRowEditing">
    <SettingsDataSecurity AllowEdit="true" AllowDelete="true" AllowInsert="true" />
    <Columns>
        ...
        <dx:BootstrapGridViewTextColumn FieldName="Age">
            <PropertiesTextEdit>
                <ValidationSettings RequiredField-IsRequired="true"></ValidationSettings>
            </PropertiesTextEdit>
        </dx:BootstrapGridViewTextColumn>
        <dx:BootstrapGridViewTextColumn FieldName="Email">
            <PropertiesTextEdit>
                <ValidationSettings RequiredField-IsRequired="true"></ValidationSettings>
            </PropertiesTextEdit>
        </dx:BootstrapGridViewTextColumn>
        <dx:BootstrapGridViewDateColumn FieldName="ArrivalDate">
            <PropertiesDateEdit>
                <ValidationSettings RequiredField-IsRequired="true"></ValidationSettings>
            </PropertiesDateEdit>
        </dx:BootstrapGridViewDateColumn>
    </Columns>
</dx:BootstrapGridView>
Screen Size
Color Themes
Demo QR Code