Online DevExpress Grid Demo: Live MVC Grid Samples with All Editing Modes

public class Invoice
{
    public int ID { get; set; }
    public string InvoiceNumber { get; set; }
    public string Type { get; set; }
    public string CompanyName { get; set; }
    public string Address { get; set; }
    public DateTime Date { get; set; }
    public decimal TotalAmount { get; set; }
    public string Status { get; set; }
}

@model List<Invoice>

@Html.DevExpress().GridView(settings => {
    settings.Name = "gvInvoicesBasic";
    settings.KeyFieldName = "ID";
    settings.CallbackRouteValues = new {
        Controller = "DevExpress",
        Action = "InvoicesBasicGridPartial"
    };
    settings.Width = Unit.Percentage(100);

    settings.Columns.Add("InvoiceNumber");
    settings.Columns.Add("Type");
    settings.Columns.Add("CompanyName");
    settings.Columns.Add("Date").PropertiesEdit.DisplayFormatString = "d";
    settings.Columns.Add("TotalAmount").PropertiesEdit.DisplayFormatString = "c";
    settings.Columns.Add("Status");

}).Bind(Model).GetHtml()

[ValidateInput(false)]
public ActionResult InvoicesBasicGridPartial()
{
    return PartialView("_InvoicesBasicGridPartial", GetInvoices());
}

private List<Invoice> GetInvoices()
{
    if (Session["Invoices"] == null)
    {
        Session["Invoices"] = new List<Invoice>
        {
            new Invoice {
                ID = 1,
                InvoiceNumber = "INV-001",
                Type = "Sales Invoice",
                CompanyName = "Tech Solutions Ltd",
                Date = DateTime.Today.AddDays(-5),
                TotalAmount = 1500.00m,
                Status = "Paid"
            },
            // ... more invoices
        };
    }
    return (List<Invoice>)Session["Invoices"];
}

Three new settings are added to the grid configuration:

1. PageSize controls how many rows appear per page
2. ShowFilterRow adds a text input above each column
3. SettingsSearchPanel.Visible adds a global search box

The model and controller remain identical to Step 2.
No server-side filtering code is needed; DevExpress
handles it internally through its callback mechanism.

@Html.DevExpress().GridView(settings => {
    settings.Name = "gvInvoicesFilter";
    settings.KeyFieldName = "ID";
    settings.CallbackRouteValues = new {
        Controller = "DevExpress",
        Action = "InvoicesFilterGridPartial"
    };
    settings.Width = Unit.Percentage(100);

    settings.Columns.Add("InvoiceNumber");
    settings.Columns.Add("Type");
    settings.Columns.Add("CompanyName");
    settings.Columns.Add("Date").PropertiesEdit.DisplayFormatString = "d";
    settings.Columns.Add("TotalAmount").PropertiesEdit.DisplayFormatString = "c";
    settings.Columns.Add("Status");

    // Paging
    settings.SettingsPager.PageSize = 10;

    // Filtering
    settings.Settings.ShowFilterRow = true;
    settings.SettingsSearchPanel.Visible = true;

    // Row focus
    settings.SettingsBehavior.AllowFocusedRow = true;

}).Bind(Model).GetHtml()

[ValidateInput(false)]
public ActionResult InvoicesFilterGridPartial()
{
    return PartialView("_InvoicesFilterGridPartial", GetInvoices());
}

// The controller action is identical in structure to Step 2.
// DevExpress handles filtering and paging internally.
// The grid sends AJAX callbacks to this action, passing
// filter and page parameters automatically.

public class InvoiceLine
{
    public int ID { get; set; }
    public int InvoiceID { get; set; }
    public string Description { get; set; }
    public int Quantity { get; set; }
    public decimal UnitPrice { get; set; }
    public decimal LineTotal => Quantity * UnitPrice;
}

// The LineTotal property is computed, not stored.
// DevExpress reads it like any other property and
// can include it in summaries and exports.

// Added to the master grid settings:

settings.SettingsDetail.ShowDetailRow = true;

settings.SetDetailRowTemplateContent(c => {
    Html.RenderAction("InvoiceLinesGridPartial", new {
        invoiceId = DataBinder.Eval(c.DataItem, "ID")
    });
});

// When the user expands a row, DevExpress calls
// InvoiceLinesGridPartial with the invoice's ID.
// The detail grid renders inside the expanded row.

[ValidateInput(false)]
public ActionResult InvoicesMasterDetailGridPartial()
{
    return PartialView(
        "_InvoicesMasterDetailGridPartial",
        GetInvoices()
    );
}

[ValidateInput(false)]
public ActionResult InvoiceLinesGridPartial(int invoiceId)
{
    ViewBag.InvoiceID = invoiceId;
    return PartialView(
        "_InvoiceLinesGridPartial",
        GetInvoiceLines(invoiceId)
    );
}

private List<InvoiceLine> GetInvoiceLines(int invoiceId)
{
    var lines = new List<InvoiceLine>();
    if (invoiceId == 1)
    {
        lines.Add(new InvoiceLine {
            ID = 1, InvoiceID = 1,
            Description = "Web Development Service",
            Quantity = 1, UnitPrice = 1000.00m
        });
        lines.Add(new InvoiceLine {
            ID = 2, InvoiceID = 1,
            Description = "UI/UX Design",
            Quantity = 5, UnitPrice = 100.00m
        });
    }
    return lines;
}

Batch editing requires three additions:

1. View: Set the editing mode to Batch and configure
   permissions (AllowEdit, AllowInsert, AllowDelete).
   Add a CommandColumn for the New and Delete buttons.
   Set ShowStatusBar to display the Save/Cancel bar.

2. Controller: Add a new action that accepts
   MVCxGridViewBatchUpdateValues. This object contains
   three collections: Insert, Update, and DeleteKeys.

3. Route: Set BatchUpdateRouteValues on the grid
   to point to the new controller action.

// Added to the grid settings:

settings.SettingsEditing.Mode = GridViewEditingMode.Batch;
settings.SettingsEditing.BatchEditSettings.EditMode
    = GridViewBatchEditMode.Cell;
settings.SettingsEditing.BatchEditSettings.StartEditAction
    = GridViewBatchStartEditAction.Click;
settings.SettingsEditing.BatchUpdateRouteValues = new {
    Controller = "DevExpress",
    Action = "InvoicesBatchUpdate"
};

settings.SettingsDataSecurity.AllowEdit = true;
settings.SettingsDataSecurity.AllowInsert = true;
settings.SettingsDataSecurity.AllowDelete = true;
settings.Settings.ShowStatusBar = GridViewStatusBarMode.Visible;

settings.CommandColumn.Visible = true;
settings.CommandColumn.ShowNewButtonInHeader = true;
settings.CommandColumn.ShowDeleteButton = true;

[HttpPost, ValidateInput(false)]
public ActionResult InvoicesBatchUpdate(
    MVCxGridViewBatchUpdateValues<Invoice, int> updateValues)
{
    var model = GetInvoices();

    // Process new rows
    foreach (var item in updateValues.Insert)
    {
        if (updateValues.IsValid(item))
        {
            item.ID = model.Max(x => x.ID) + 1;
            model.Add(item);
        }
    }

    // Process modified rows
    foreach (var item in updateValues.Update)
    {
        if (updateValues.IsValid(item))
        {
            var target = model.FirstOrDefault(x => x.ID == item.ID);
            if (target != null)
            {
                target.InvoiceNumber = item.InvoiceNumber;
                target.CompanyName = item.CompanyName;
                target.Status = item.Status;
            }
        }
    }

    // Process deleted rows
    foreach (var id in updateValues.DeleteKeys)
    {
        var target = model.FirstOrDefault(x => x.ID == id);
        if (target != null) model.Remove(target);
    }

    return PartialView("_InvoicesGridPartial", model);
}

Two additions for this final step:

1. Footer summaries: ShowFooter = true, then add
   TotalSummary items for Sum and Count aggregates.
   These update automatically when data changes.

2. Export: DevExpress provides GridViewExtension export
   methods (ExportToXlsx, ExportToPdf, ExportToCsv).
   Each takes the grid settings and data, and returns
   an ActionResult that downloads the file.

   Supported formats: XLS, XLSX, PDF, RTF, CSV, DOCX

// Footer summaries
settings.Settings.ShowFooter = true;

settings.TotalSummary.Add(
    DevExpress.Data.SummaryItemType.Sum,
    "TotalAmount"
).DisplayFormat = "Total: {0:c}";

settings.TotalSummary.Add(
    DevExpress.Data.SummaryItemType.Count,
    "InvoiceNumber"
).DisplayFormat = "{0} invoices";

// Export is handled server-side:
// GridViewExtension.ExportToXlsx(settings, data);
// GridViewExtension.ExportToPdf(settings, data);
// GridViewExtension.ExportToCsv(settings, data);

// Export action example:
public ActionResult ExportInvoicesToPdf()
{
    var settings = new GridViewSettings();
    settings.Name = "gvInvoicesExport";
    settings.Columns.Add("InvoiceNumber");
    settings.Columns.Add("Type");
    settings.Columns.Add("CompanyName");
    settings.Columns.Add("Date")
        .PropertiesEdit.DisplayFormatString = "d";
    settings.Columns.Add("TotalAmount")
        .PropertiesEdit.DisplayFormatString = "c";
    settings.Columns.Add("Status");

    return GridViewExtension.ExportToPdf(
        settings,
        GetInvoices()
    );
}

// Each format has its own method:
// ExportToXlsx, ExportToPdf, ExportToCsv, etc.
// The exported file respects column formatting,
// visibility, and sort order.

Inline editing requires three settings:

1. Mode = GridViewEditingMode.Inline
2. CommandColumn with ShowEditButton and ShowDeleteButton
3. UpdateRouteValues pointing to a controller action
   that accepts MVCxGridViewInlineUpdateValues

Each row gets its own Edit/Update/Cancel buttons.
Only one row can be in edit mode at a time.

// View configuration:
settings.SettingsEditing.Mode = GridViewEditingMode.Inline;
settings.SettingsEditing.UpdateRouteValues = new {
    Controller = "DevExpress",
    Action = "ProductsInlineUpdate"
};
settings.SettingsBehavior.ConfirmDelete = true;

settings.CommandColumn.Visible = true;
settings.CommandColumn.ShowNewButton = true;
settings.CommandColumn.ShowEditButton = true;
settings.CommandColumn.ShowDeleteButton = true;

// Column with ComboBox editor:
settings.Columns.Add(column => {
    column.FieldName = "Category";
    column.ColumnType = MVCxGridViewColumnType.ComboBox;
    var props = column.PropertiesEdit as ComboBoxProperties;
    props.DataSource = GetCategories();
    props.TextField = "Name";
    props.ValueField = "Name";
});

[HttpPost]
public ActionResult ProductsInlineUpdate(
    MVCxGridViewInlineUpdateValues<Product, int> values)
{
    var model = GetProducts();

    foreach (var item in values)
    {
        if (values.IsValid(item))
        {
            if (item.ID == 0) // New record
            {
                item.ID = model.Max(x => x.ID) + 1;
                model.Add(item);
            }
            else // Update existing
            {
                var target = model.FirstOrDefault(
                    x => x.ID == item.ID);
                if (target != null)
                {
                    target.Name = item.Name;
                    target.Price = item.Price;
                    // ... update other fields
                }
            }
        }
    }
    return PartialView("_ProductsGridPartial", model);
}

Edit Form mode uses:

1. Mode = GridViewEditingMode.EditForm
2. EditFormLayoutProperties.ColCount for layout
3. MVCxGridViewEditFormUpdatingValues in controller

The form appears when user clicks Edit or New.
This approach works well with validation rules
and complex data entry scenarios.

// View configuration:
settings.SettingsEditing.Mode = GridViewEditingMode.EditForm;
settings.SettingsEditing.EditFormLayoutProperties.ColCount = 2;

// ComboBox with filtering:
settings.Columns.Add(column => {
    column.FieldName = "Department";
    column.ColumnType = MVCxGridViewColumnType.ComboBox;
    var props = column.PropertiesEdit as ComboBoxProperties;
    props.DataSource = departments;
    props.IncrementalFilteringMode = 
        IncrementalFilteringMode.StartsWith;
});

// DateEdit with calendar:
settings.Columns.Add(column => {
    column.FieldName = "HireDate";
    column.ColumnType = MVCxGridViewColumnType.DateEdit;
    var props = column.PropertiesEdit as DateEditProperties;
    props.DisplayFormatString = "d";
    props.CalendarProperties.ShowTodayButton = true;
});

[HttpPost]
public ActionResult EmployeesEditFormUpdate(
    MVCxGridViewEditFormUpdatingValues<Employee> values)
{
    var model = GetEmployees();

    // Handle new record
    if (values.NewItemRowItem != null && values.IsValid)
    {
        values.NewItemRowItem.ID = model.Max(x => x.ID) + 1;
        model.Add(values.NewItemRowItem);
    }

    // Handle update
    if (values.UpdateItem != null && values.IsValid)
    {
        var target = model.FirstOrDefault(
            x => x.ID == values.UpdateItem.ID);
        // ... copy properties
    }

    // Handle delete
    if (values.DeleteItem != null)
    {
        var target = model.FirstOrDefault(
            x => x.ID == values.DeleteItem.ID);
        if (target != null) model.Remove(target);
    }

    return PartialView("_EmployeesGridPartial", model);
}

Grouping and Summaries include:

1. Group by any column (drag header to group panel)
2. Multiple group levels (group by Project, then Priority)
3. Group summaries: Count, Average, Sum per group
4. Total summaries: Footer row with aggregates
5. Custom column templates: Color-coded badges
6. ProgressBar columns for percentage values
7. Conditional row highlighting (overdue tasks)
8. ComboBox columns with predefined values

// Enable grouping:
settings.SettingsBehavior.AllowGroup = true;
settings.SettingsBehavior.AutoExpandAllGroups = true;

// Group summaries:
settings.GroupSummary.Add(
    DevExpress.Data.SummaryItemType.Count, 
    "TaskName"
).DisplayFormat = "Tasks: {0}";

settings.GroupSummary.Add(
    DevExpress.Data.SummaryItemType.Average, 
    "Progress"
).DisplayFormat = "Avg Progress: {0:P0}";

// Total summaries:
settings.TotalSummary.Add(
    DevExpress.Data.SummaryItemType.Count, 
    "TaskName"
).DisplayFormat = "Total Tasks: {0}";

settings.TotalSummary.Add(
    DevExpress.Data.SummaryItemType.Sum, 
    "EstimatedHours"
).DisplayFormat = "Total: {0} hrs";

// Initial grouping:
settings.GroupBy(summary => {
    summary.Add("Project", ColumnSortOrder.Ascending);
    summary.Add("Priority", ColumnSortOrder.Ascending);
});

Possibilities with grouping:

- Drag/drop columns to group panel by users
- Collapse/expand groups individually
- Custom group headers with templates
- Multiple summaries per group
- Conditional formatting (highlight overdue rows)
- Export grouped data to Excel/PDF
- Combine with filtering and search
- Works with master-detail and editing

The grid below auto-groups by Project and Priority.
Try dragging the AssignedTo column header to the
group panel to add a third grouping level.

Selection features include:

1. Checkbox column in command column
2. Select All checkbox (per page or all rows)
3. Row-click selection (click to toggle)
4. Single-select mode option
5. Client-side GetSelectedKeysOnPage()
6. Server-side processing via POST
7. Display selected items in detail view
8. Combine with other grid features

// Enable selection:
settings.SettingsBehavior.AllowSelectByRowClick = true;
settings.SettingsBehavior.AllowSelectSingleRowOnly = false;

// Checkbox column:
settings.CommandColumn.Visible = true;
settings.CommandColumn.ShowSelectCheckbox = true;
settings.CommandColumn.SelectAllCheckboxMode = 
    GridViewSelectAllCheckboxMode.Page;

// Client-side event:
settings.ClientSideEvents.SelectionChanged = 
    "onProductSelectionChanged";

// JavaScript to handle selection:
function onProductSelectionChanged(s, e) {
    var selectedKeys = s.GetSelectedKeysOnPage();
    document.getElementById('selectedCount')
        .textContent = selectedKeys.length;
}

function processSelectedProducts() {
    var grid = gvProductSelection;
    var selectedKeys = grid.GetSelectedKeysOnPage();
    
    $.ajax({
        url: '/DevExpress/ProcessSelectedProducts',
        type: 'POST',
        data: { selectedIds: selectedKeys },
        traditional: true,
        success: function(data) {
            $('#selectedItemsResult').html(data);
        }
    });
}

Adaptive layout requires these settings:

1. AdaptivityMode = GridViewAdaptivityMode.HideDataCells
   Automatically hides columns that don't fit the width.

2. AdaptiveColumnPosition = Last (or First)
   Controls which columns are hidden first.

3. AdaptiveDetailColumnCount = 1
   Adds a detail button column for accessing hidden data.

4. AllowOnlyOneAdaptiveDetailExpanded = true
   Only one row's adaptive detail can be open at a time.

The grid handles everything automatically based on
available width. No media queries or custom CSS needed.

@Html.DevExpress().GridView(settings => {
    settings.Name = "gvAdaptive";
    settings.KeyFieldName = "ID";
    settings.Width = Unit.Percentage(100);

    // Enable adaptive layout
    settings.SettingsAdaptivity.AdaptivityMode =
        GridViewAdaptivityMode.HideDataCells;
    settings.SettingsAdaptivity.AdaptiveColumnPosition =
        GridViewAdaptiveColumnPosition.Right;
    settings.SettingsAdaptivity.AdaptiveDetailColumnCount = 1;
    settings.SettingsAdaptivity
        .AllowOnlyOneAdaptiveDetailExpanded = true;

    settings.Columns.Add("Name");
    settings.Columns.Add("Category");
    settings.Columns.Add("Price")
        .PropertiesEdit.DisplayFormatString = "c";
    settings.Columns.Add("Stock");
    settings.Columns.Add("IsActive");
    settings.Columns.Add("CreatedDate")
        .PropertiesEdit.DisplayFormatString = "d";

}).Bind(Model).GetHtml()

// Standard grid without adaptive layout:
// Same columns, same data, but NO adaptive settings.
// On narrow screens, this grid creates a horizontal
// scrollbar instead of hiding columns.

@Html.DevExpress().GridView(settings => {
    settings.Name = "gvNonAdaptive";
    settings.KeyFieldName = "ID";
    settings.Width = Unit.Percentage(100);

    // No adaptive settings — columns never hide
    settings.Columns.Add("Name");
    settings.Columns.Add("Category");
    settings.Columns.Add("Price")
        .PropertiesEdit.DisplayFormatString = "c";
    settings.Columns.Add("Stock");
    settings.Columns.Add("IsActive");
    settings.Columns.Add("CreatedDate")
        .PropertiesEdit.DisplayFormatString = "d";

}).Bind(Model).GetHtml()