<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>

<dx:BootstrapGridView runat="server" DataSourceID="DataSourceBatchEditing" KeyFieldName="EmployeeID" EnableRowsCache="False">
    <SettingsEditing Mode="Batch"></SettingsEditing>
    <SettingsDataSecurity AllowEdit="true" AllowDelete="true" AllowInsert="true" />
    <Columns>
        <dx:BootstrapGridViewCommandColumn ShowCancelButton="true" ShowDeleteButton="true" ShowNewButtonInHeader="true" Width="80px" />
        <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>

<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" />
        <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>
    <SettingsPopup>
        <EditForm Width="600" />
    </SettingsPopup>
    <SettingsPager NumericButtonCount="7"></SettingsPager>
</dx:BootstrapGridView>

<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" />
        <dx:BootstrapGridViewDataColumn FieldName="FirstName" />
        <dx:BootstrapGridViewDataColumn FieldName="LastName" />
        <dx:BootstrapGridViewDataColumn FieldName="Title" />
        <dx:BootstrapGridViewDateColumn FieldName="BirthDate" />
        <dx:BootstrapGridViewDataColumn FieldName="Country" />
    </Columns>
    <SettingsPager NumericButtonCount="7"></SettingsPager>
</dx:BootstrapGridView>

<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"
                DataSourceID="CitiesDataSource" TextField="CityName" ValueField="CityName">
            </PropertiesComboBox>
        </dx:BootstrapGridViewComboBoxColumn>
        <dx:BootstrapGridViewDataColumn FieldName="ContactName">
        </dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName">
        </dx:BootstrapGridViewDataColumn>
    </Columns>
    <SettingsPager NumericButtonCount="7"></SettingsPager>
</dx:BootstrapGridView>

protected void grid_CellEditorInitialize(object sender, BootstrapGridViewEditorEventArgs e) {
    BootstrapGridView grid = (BootstrapGridView)sender;
    if(!grid.IsEditing || e.Column.FieldName != "City" || e.KeyValue == DBNull.Value || e.KeyValue == null)
        return;
    string country = (string)grid.GetRowValuesByKeyValue(e.KeyValue, "Country");
    BootstrapComboBox cmbCity = (BootstrapComboBox)e.Editor;
    FillCityComboBox(cmbCity, country);
    cmbCity.Callback += cmbCity_OnCallback;
}
protected void FillCityComboBox(BootstrapComboBox cmbCity, string country) {
    cmbCity.Items.Clear();
    foreach(string city in GetCities(country))
        cmbCity.Items.Add(city);
}
List<string> GetCities(string country) {
    using(var context = new DevExpress.Web.Demos.WorldCitiesContextSL())
        return context.Cities.Where(c => c.Country.CountryName == country).OrderBy(c => c.CityName).Select(c => c.CityName).ToList();
}
void cmbCity_OnCallback(object source, CallbackEventArgsBase e) {
    FillCityComboBox((BootstrapComboBox)source, e.Parameter);
}

function onCountryChanged(cmbCountry) {
    var cmbCity = grid.GetEditor("City");
    cmbCountry.SetReadOnly(true);
    cmbCity.PerformCallback(cmbCountry.GetValue().toString(), function() {
        cmbCountry.SetReadOnly(false);
        cmbCity.SetSelectedIndex(0);
    });
}

<dx:BootstrapGridView ID="GridViewDataValidation" runat="server" DataSourceID="InMemoryPersonsDataSource" KeyFieldName="Id" EnableRowsCache="False"
    OnHtmlRowPrepared="grid_HtmlRowPrepared" OnRowValidating="grid_RowValidating" OnStartRowEditing="grid_StartRowEditing">
    <SettingsDataSecurity AllowEdit="true" AllowDelete="true" AllowInsert="true" />
    <Columns>
        <dx:BootstrapGridViewCommandColumn ShowEditButton="true" />
        <dx:BootstrapGridViewTextColumn FieldName="Name" UnboundType="String" UnboundExpression="[FirstName] + ' ' + [LastName]">
            <SettingsEditForm Visible="False" />
        </dx:BootstrapGridViewTextColumn>
        <dx:BootstrapGridViewTextColumn FieldName="Age">
            <PropertiesTextEdit ValidationSettings-RequiredField-IsRequired="true" />
        </dx:BootstrapGridViewTextColumn>
        <dx:BootstrapGridViewTextColumn FieldName="Email">
            <PropertiesTextEdit ValidationSettings-RequiredField-IsRequired="true" />
        </dx:BootstrapGridViewTextColumn>
        <dx:BootstrapGridViewDateColumn FieldName="ArrivalDate">
            <PropertiesDateEdit ValidationSettings-RequiredField-IsRequired="true"/>
        </dx:BootstrapGridViewDateColumn>
    </Columns>
</dx:BootstrapGridView>

protected void grid_RowValidating(object sender, DevExpress.Web.Data.ASPxDataValidationEventArgs e) {
    var errors = ValidateRow((string)e.NewValues["Email"], (int)e.NewValues["Age"], (DateTime)e.NewValues["ArrivalDate"]);
    if(string.IsNullOrEmpty(e.RowError) && errors.Any())
        e.RowError = "Please, correct all errors.";
    foreach(var key in errors.Keys)
        e.Errors[GridViewDataValidation.Columns[key]] = errors[key];
}
protected void grid_HtmlRowPrepared(object sender, ASPxGridViewTableRowEventArgs e) {
    if(!object.Equals(e.RowType, GridViewRowType.Data)) return;
    var errors = ValidateRow((string)e.GetValue("Email"), (int)e.GetValue("Age"), (DateTime)e.GetValue("ArrivalDate"));
    if(errors.Any())
        e.Row.CssClass = "text-danger";
}
protected void grid_StartRowEditing(object sender, DevExpress.Web.Data.ASPxStartRowEditingEventArgs e) {
    if(!GridViewDataValidation.IsNewRowEditing)
        GridViewDataValidation.DoRowValidation();
}
protected Dictionary<string, string> ValidateRow(string email, int age, DateTime arrival) {
    var errors = new Dictionary<string, string>();
    if(!email.Contains("@"))
        errors["Email"] = "Invalid e-mail.";
    if(age < 18)
        errors["Age"] = "Age must be greater than or equal 18.";
    if(DateTime.Today.Year != arrival.Year || DateTime.Today.Month != arrival.Month)
        errors["ArrivalDate"] = "Arrival date is required and must belong to the current month.";
    return errors;
}

<dx:BootstrapFloatingActionButton ClientInstanceName="fab" runat="server"
    ContainerCssSelector="#container" InitialActionContext="NewRowContext">
    <Items>
        <dx:BootstrapFABAction ActionName="NewRow" ContextName="NewRowContext" Text="Add new row"></dx:BootstrapFABAction>
        <dx:BootstrapFABAction ActionName="Cancel" ContextName="CancelContext" IconCssClass="dxbs-icon dxbs-icon-fab-collapse"></dx:BootstrapFABAction>
        <dx:BootstrapFABActionGroup ContextName="FocusedRowContext">
            <Items>
                <dx:BootstrapFABActionItem ActionName="DeleteRow" IconCssClass="icon icon-Delete"></dx:BootstrapFABActionItem>
                <dx:BootstrapFABActionItem ActionName="EditRow" IconCssClass="icon icon-Edit"></dx:BootstrapFABActionItem>
            </Items>
        </dx:BootstrapFABActionGroup>
        <dx:BootstrapFABActionGroup ContextName="EditingRowContext" Text="Cancel" CollapseIconCssClass="dxbs-icon dxbs-icon-fab-collapse">
            <Items>
                <dx:BootstrapFABActionItem ActionName="Save" IconCssClass="icon icon-Save"></dx:BootstrapFABActionItem>
            </Items>
        </dx:BootstrapFABActionGroup>
    </Items>
    <ClientSideEvents
        ActionItemClick="OnActionItemClick"
        ActionCollapsing="OnActionCollapsing"
    />
</dx:BootstrapFloatingActionButton>
<div id="container">
    <dx:BootstrapGridView runat="server" DataSourceID="DataSourceEditingWithFAB" KeyFieldName="EmployeeID"
        EnableRowsCache="False" ClientInstanceName="gridFAB" OnCommandButtonInitialize="GridViewDataValidation_CommandButtonInitialize">
        <ClientSideEvents
            Init="OnGridViewInit"
            RowClick="OnRowClick"
            EndCallback="OnEndCallback"
        />
        <SettingsDataSecurity AllowEdit="true" AllowDelete="true" AllowInsert="true" />
        <SettingsBehavior AllowFocusedRow="true" />
        <Columns>
            <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>
</div>

function OnActionItemClick(s, e) {
    if(e.actionName === "NewRow") {
        gridFAB.AddNewRow();
    }
    else if(e.actionName === "EditRow") {
        gridFAB.StartEditRow(gridFAB.GetFocusedRowIndex());
        gridFAB.SetFocusedRowIndex(-1);
    }
    else if(e.actionName === "DeleteRow") {
        gridFAB.DeleteRow(gridFAB.GetFocusedRowIndex());
        gridFAB.SetFocusedRowIndex(-1);
    }
    else if(e.actionName === "Save") {
        gridFAB.UpdateEdit();
    }
    else if(e.actionName === "Cancel") {
        gridFAB.CancelEdit();
    }
}
function OnActionCollapsing(s, e) {
    if((e.contextName === "FocusedRowContext" || e.contextName === "EditingRowContext") && e.collapseReason === ASPxClientFloatingActionButtonCollapseReason.CollapseButton) {
        setTimeout(function () {
            gridFAB.CancelEdit();
            gridFAB.SetFocusedRowIndex(-1);
            fab.SetActionContext("NewRowContext");
        }, 100);
    }
}
function OnGridViewInit(s, e) {
    fab.SetActionContext("NewRowContext");
    s.SetFocusedRowIndex(-1);
}
function OnRowClick(s, e) {
    if(s.IsNewRowEditing() || s.IsEditing())
        e.cancel = true;
    else
        fab.SetActionContext("FocusedRowContext", true);
}
function OnEndCallback(s, e) {
    if(s.IsNewRowEditing() || s.IsEditing()) {
        fab.SetActionContext("CancelContext", true);
        ASPxClientEdit.AttachEditorModificationListener(onEditorsChanged, function (control) {
            var parent = control.GetParentControl();
            if(parent && parent instanceof dx.BootstrapClientFormLayout)
                return parent.GetParentControl() === gridFAB
            else
                return false;
        });
    }
    else {
        fab.SetActionContext("NewRowContext");
        s.SetFocusedRowIndex(-1);
    }
}
function onEditorsChanged(s, e) {
    fab.SetActionContext("EditingRowContext", true);
}

<dx:BootstrapGridView ID="GridViewEditFormLayout" runat="server" AutoGenerateColumns="false" Width="100%" ClientInstanceName="gridEditFormLayout"
    KeyFieldName="EmployeeID" OnCellEditorInitialize="gridView_CellEditorInitialize" OnEditFormLayoutCreated="grid_EditFormLayoutCreated"
    DataSourceID="CompanyEmployeesDataSource">
    <Columns>
        <dx:BootstrapGridViewCommandColumn ShowNewButtonInHeader ="true" ShowEditButton="true" ShowDeleteButton="true"/>
        <dx:BootstrapGridViewDataColumn FieldName="FirstName" />
        <dx:BootstrapGridViewDataColumn FieldName="LastName" />
        <dx:BootstrapGridViewDataColumn FieldName="BirthDate" />
        <dx:BootstrapGridViewDataColumn FieldName="Title" Caption="Position" />
        <dx:BootstrapGridViewDataColumn FieldName="Address" Visible="false" />
        <dx:BootstrapGridViewDateColumn FieldName="HireDate" Visible="false" />
        <dx:BootstrapGridViewDateColumn FieldName="FireDate" Visible="false" />
        <dx:BootstrapGridViewDataColumn FieldName="FireReason" Visible="false" />
        <dx:BootstrapGridViewDataColumn FieldName="NewCompany" Visible="false" />
        <dx:BootstrapGridViewMemoColumn FieldName="References" Visible="false" />
        <dx:BootstrapGridViewMemoColumn FieldName="Notes" Visible="false" />
    </Columns>
    <SettingsDataSecurity AllowEdit="true" AllowDelete="true" AllowInsert="true" />
    <Settings ShowPreview="true" />
    <SettingsPager PageSize="5"/>
    <SettingsEditing>
        <FormLayoutProperties>
            <Items>
                 <dx:BootstrapGridViewTabbedLayoutGroup>
                     <Items>
                         <dx:BootstrapGridViewLayoutGroup  Caption="Employee Information">
                             <Items >
                                 <dx:BootstrapGridViewLayoutGroup ShowCaption="False">
                                     <Items>
                                         <dx:BootstrapGridViewColumnLayoutItem ColumnName="FirstName" />
                                         <dx:BootstrapGridViewColumnLayoutItem ColumnName="LastName" />
                                         <dx:BootstrapGridViewColumnLayoutItem ColumnName="BirthDate" />
                                     </Items>
                                 </dx:BootstrapGridViewLayoutGroup>
                                 <dx:BootstrapGridViewLayoutGroup ShowCaption="False">
                                     <Items>
                                         <dx:BootstrapGridViewColumnLayoutItem ColumnName="HireDate" />
                                         <dx:BootstrapGridViewColumnLayoutItem ColumnName="Title" />
                                         <dx:BootstrapGridViewColumnLayoutItem ColumnName="FireDate"
                                             Caption="Dismissal Date" HelpText="When you specify a dismissal date, an additional 'Dismissal Information' tab will be shown." />
                                     </Items>
                                 </dx:BootstrapGridViewLayoutGroup>
                                 <dx:BootstrapGridViewLayoutGroup Name="groupContactInfo" ClientVisible="false" ShowCaption="False">
                                     <Items>
                                         <dx:BootstrapGridViewColumnLayoutItem ColumnName="Address" ColSpanMd="12"/>
                                         <dx:BootstrapGridViewColumnLayoutItem ColumnName="Notes" ColSpanMd="12" />
                                     </Items>
                                 </dx:BootstrapGridViewLayoutGroup>
                                 <dx:BootstrapGridViewColumnLayoutItem ShowCaption="False" >
                                     <Template>
                                         <dx:ASPxHyperLink runat="server" Text="Show Details..." Cursor="pointer" Width="100" >
                                             <ClientSideEvents Click="onShowHideInfoClick" />
                                         </dx:ASPxHyperLink>
                                     </Template>
                                 </dx:BootstrapGridViewColumnLayoutItem>
                             </Items>
                         </dx:BootstrapGridViewLayoutGroup>
                         <dx:BootstrapGridViewLayoutGroup Caption="Dismissal Information" Name="DismissalInformation" >
                             <Items>
                                 <dx:BootstrapGridViewColumnLayoutItem ColumnName="FireReason" Caption="Reason for Dismissal" ColSpanMd="12"/>
                                 <dx:BootstrapGridViewColumnLayoutItem ColumnName="NewCompany" Caption="New Employer" ColSpanMd="12"/>
                                 <dx:BootstrapGridViewColumnLayoutItem ColumnName="References" ColSpanMd="12"/>
                             </Items>
                         </dx:BootstrapGridViewLayoutGroup>
                     </Items>
                 </dx:BootstrapGridViewTabbedLayoutGroup>
                <dx:BootstrapEditModeCommandLayoutItem HorizontalAlign="Right" />
            </Items>
        </FormLayoutProperties>
    </SettingsEditing>
</dx:BootstrapGridView>

protected void grid_EditFormLayoutCreated(object sender, BootstrapGridViewEditFormLayoutEventArgs e) {
    var layoutGroupDismissal = (BootstrapGridViewLayoutGroup)e.FindLayoutItemOrGroup("DismissalInformation");
    if(layoutGroupDismissal == null) return;
    if(GridViewEditFormLayout.IsNewRowEditing) {
        layoutGroupDismissal.Visible = false;
        return;
    }
    var fireDate = GridViewEditFormLayout.GetRowValues(e.RowVisibleIndex, "FireDate");
    layoutGroupDismissal.ClientVisible = fireDate != null && (DateTime)fireDate != DateTime.MinValue;
}
protected void gridView_CellEditorInitialize(object sender, BootstrapGridViewEditorEventArgs e) {
    if(e.Column.FieldName == "FireDate") {
        BootstrapDateEdit fireDateEditor = e.Editor as BootstrapDateEdit;
        fireDateEditor.ClientEnabled = !GridViewEditFormLayout.IsNewRowEditing;
        fireDateEditor.ClearButton.DisplayMode = ClearButtonDisplayMode.OnHover;
        fireDateEditor.ClientSideEvents.ValueChanged = "onDismissalDateChanged";
    }
}

function onDismissalDateChanged(s, e) {
    var dismissalLayoutGroup = gridEditFormLayout.GetEditFormLayoutItemOrGroup("DismissalInformation");
    dismissalLayoutGroup.SetVisible(s.GetValue() != null);
    if (s.GetValue() == null) {
        gridEditFormLayout.SetEditValue("FireReason", "");
        gridEditFormLayout.SetEditValue("NewCompany", "");
        gridEditFormLayout.SetEditValue("References", "");
    }
}
function onShowHideInfoClick(s, e) {
    var contactLayoutGroup = gridEditFormLayout.GetEditFormLayoutItemOrGroup("groupContactInfo");
    var isContactLayoutGroupVisible = contactLayoutGroup.GetVisible();
    s.SetText(isContactLayoutGroupVisible ? "Show Details..." : "Hide Details");
    contactLayoutGroup.SetVisible(!isContactLayoutGroupVisible);
}