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.
| Nancy | Davolio | Sales Representative | 12/8/1978 | Seattle | USA |
| | Andrew | Fuller | Vice President, Sales | 2/19/1965 | Tacoma | USA |
|
| Janet | Leverling | Sales Representative | 8/30/1985 | Kirkland | USA |
| Margaret | Peacock | Sales Representative | 9/19/1973 | Redmond | USA |
| Steven | Buchanan | Sales Manager | 3/4/1955 | London | UK |
| Michael | Suyama | Sales Representative | 7/2/1981 | London | UK |
| Robert | King | Sales Representative | 5/29/1960 | London | UK |
| Laura | Callahan | Inside Sales Coordinator | 1/9/1985 | Seattle | USA |
| Anne | Dodsworth | Sales Representative | 1/27/1980 | London | UK |
<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 batch editing, set the SettingsEditing.Mode property to 'Batch'. In this mode, you can use in-line editors to edit grid data (the modified cells are highlighted). Deleted rows are also highlighted and display the Recover command item. To hide the deleted rows, set the SettingsEditing.BatchEditSettings.HighlightDeletedRows property to false. All changes are maintained on the client side until the Save changes link is clicked, or the Cancel changes button is clicked to cancel all the changes.
If a grid contains modified data, it displays a confirmation message before a postback or callback. When the grid supports callbacks, you can manage changed rows that belong to different pages. You can use the Preview changes button to preview and modify inserted, deleted and edited rows before you click Update.
You can use the following properties to customize the batch edit mode settings:
- The KeepChangesOnCallbacks property specifies whether the grid keeps changes made in batch edit mode on callbacks.
- 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 is used to edit grid data.
The batchEditApi property provides access to the batch edit client API. The BatchEditStartEditing and BatchEditEndEditing events occur when a grid switches to/leaves the batch edit mode.
All data editing operations are prohibited. In this demo, the SettingDataSecurity property's settings are used to unable row insertion, deletion, and editing.
| | | | | | |
| Nancy | Davolio | Sales Representative | 12/8/1978 | Seattle | USA |
| Andrew | Fuller | Vice President, Sales | 2/19/1965 | Tacoma | USA |
| Janet | Leverling | Sales Representative | 8/30/1985 | Kirkland | USA |
| Margaret | Peacock | Sales Representative | 9/19/1973 | Redmond | USA |
| Steven | Buchanan | Sales Manager | 3/4/1955 | London | UK |
| Michael | Suyama | Sales Representative | 7/2/1981 | London | UK |
| Robert | King | Sales Representative | 5/29/1960 | London | UK |
| Laura | Callahan | Inside Sales Coordinator | 1/9/1985 | Seattle | USA |
| Anne | Dodsworth | Sales Representative | 1/27/1980 | London | UK |
No data to display
|
| Inserted values |
| Updated values |
| Deleted values |
<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>
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.
<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>
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.
| Nancy | Davolio | Sales Representative | 12/8/1978 | USA |
| | | | | |
| Janet | Leverling | Sales Representative | 8/30/1985 | USA |
| Margaret | Peacock | Sales Representative | 9/19/1973 | USA |
| Steven | Buchanan | Sales Manager | 3/4/1955 | UK |
| Michael | Suyama | Sales Representative | 7/2/1981 | UK |
| Robert | King | Sales Representative | 5/29/1960 | UK |
| Laura | Callahan | Inside Sales Coordinator | 1/9/1985 | USA |
| Anne | Dodsworth | Sales Representative | 1/27/1980 | UK |
<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>
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.
| Germany | Berlin | Maria Anders | Alfreds Futterkiste |
| Mexico | México D.F. | Ana Trujillo | Ana Trujillo Emparedados y helados |
| Mexico | México D.F. | Antonio Moreno | Antonio Moreno Taquería |
| | | | |
| Sweden | Luleå | Christina Berglund | Berglunds snabbköp |
| Germany | Mannheim | Hanna Moos | Blauer See Delikatessen |
| France | Strasbourg | Frédérique Citeaux | Blondesddsl père et fils |
| Spain | Madrid | Martín Sommer | Bólido Comidas preparadas |
| France | Marseille | Laurence Lebihan | Bon app' |
| Canada | Tsawassen | Elizabeth Lincoln | Bottom-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"
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);
});
}
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.
| | Andrew Fuller | 42 | andrew.fuller@devexpress.com | 11/1/2024 |
|
| Please, correct all errors. |
| Margaret Peackop | 48 | margaret.peackop.devexpress.com | 12/9/2024 |
| Nancy Davolio | 34 | nancy.davolio@devexpress.com | 12/7/2024 |
| Robert King | 29 | robert.king@devexpress.com | 12/8/2024 |
| Anne Dodsworth | 17 | anne.dodsworth@devexpress.com | 12/7/2024 |
<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;
}
Editing with Floating Action Button
The DevExpress Bootstrap Floating Action Button is a button that appears in front of a container (HTML element or control) when users interact with the container's elements.
The following types of floating action buttons are available:
- Action - Executes the action once users click the floating action button.
- Action Group - The floating action button serves as a container for multiple actions (action items). When pressed, the floating action button expands nested actions.
This demo adds an floating action button to a grid control. The type of the button depends on the context. For instance, when an end-user clicks a grid row, the button becames the action group with two popup actions - Edit and Delete. The JS code-behind file handles the button clicks and switches contexts.
| Nancy | Davolio | Sales Representative | 12/8/1978 | Seattle | USA |
| Andrew | Fuller | Vice President, Sales | 2/19/1965 | Tacoma | USA |
| Janet | Leverling | Sales Representative | 8/30/1985 | Kirkland | USA |
| Margaret | Peacock | Sales Representative | 9/19/1973 | Redmond | USA |
| Steven | Buchanan | Sales Manager | 3/4/1955 | London | UK |
| Michael | Suyama | Sales Representative | 7/2/1981 | London | UK |
| Robert | King | Sales Representative | 5/29/1960 | London | UK |
| Laura | Callahan | Inside Sales Coordinator | 1/9/1985 | Seattle | USA |
| Anne | Dodsworth | Sales Representative | 1/27/1980 | London | UK |
<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);
}
You can use the built-in form layout to arrange editors on the edit form in the Grid View control. The BootstrapGridViewFormLayoutProperties class allows you to customize the embedded form layout's settings at a grid level. The grid stores form layout items in the Items collection. Each item is associated with the corresponding grid data column specified in the ColumnName property.
Use the EditFormLayoutCreated event to customize the edit form items' visibility, caption, and layout settings. The FindLayoutItemOrGroup method allows you to access the layout item or group and customize it on the server. To do this on the client, use the GetEditFormLayoutItemOrGroup method.
| Nancy | Davolio | 12/8/1978 | Sales Representative |
| Andrew | Fuller | 2/19/1965 | Vice President, Sales |
| | Janet | Leverling | 8/30/1985 | Sales Representative |
|
| Margaret | Peacock | 9/19/1973 | Sales Representative |
| Steven | Buchanan | 3/4/1955 | Sales Manager |
<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);
}