Focused Row

Use the AllowFocusedRow method (available through SettingsBehavior) to specify that one of the rows in the Grid View control should be focused. You can use this feature in multiple ways, for example, to display additional information for the focused row.

An end-user can move focus to another row by clicking it. Handle the client-side focusedRowChanged event to respond to changing row focus.

You can programmatically get/set the focused row using the following client methods:

Contact Name Company Name City Country
Maria AndersAlfreds FutterkisteBerlinGermany
Ana TrujilloAna Trujillo Emparedados y heladosMéxico D.F.Mexico
Antonio MorenoAntonio Moreno TaqueríaMéxico D.F.Mexico
Thomas HardyAround the HornLondonUK
Christina BerglundBerglunds snabbköpLuleåSweden
Hanna MoosBlauer See DelikatessenMannheimGermany
Frédérique CiteauxBlondesddsl père et filsStrasbourgFrance
Martín SommerBólido Comidas preparadasMadridSpain
Laurence LebihanBon app'MarseilleFrance
Elizabeth LincolnBottom-Dollar MarketsTsawassenCanada
<div id="focusedRowLabel" class="badge badge-primary demo-label"></div>
@Html.Partial("SelectionAndFocus/FocusedRowPartial")
@model IEnumerable
@using DevExpress.AspNetCore.DemoModels;
@(Html.DevExpress()
    .BootstrapGridView<Customer>("focusedRowGrid")
    .KeyFieldName(c => c.CustomerID)
    .SettingsBehavior(settings => settings.AllowFocusedRow(true))
    .Columns(columns => {
        columns.Add(c => c.ContactName);
        columns.Add(c => c.CompanyName);
        columns.Add(c => c.City);
        columns.Add(c => c.Country);
    })
    .ClientSideEvents(events => events.FocusedRowChanged("onFocusedRowChanged"))
    .Routes(routes => routes
        .MapRoute(r => r
            .Controller("GridView")
            .Action("FocusedRowPartial")))
    .Bind(Model)
)
using Microsoft.AspNetCore.Mvc;
namespace DevExpress.AspNetCore.Demos {
    public partial class GridViewController : Controller {
        public GridViewController(NorthwindContext northwindContext) {
            NorthwindContext = northwindContext;
        }
        protected NorthwindContext NorthwindContext { get; }
        public ActionResult FocusedRow() {
            return PartialView("SelectionAndFocus/FocusedRow", NorthwindContext.Customers);
        }
        public ActionResult FocusedRowPartial() {
            return PartialView("SelectionAndFocus/FocusedRowPartial", NorthwindContext.Customers);
        }
    }
}
function onFocusedRowChanged(args) {
    $("#focusedRowLabel").html("Focused row index: " + this.getFocusedRowIndex());
}

Selection

The Grid View control allows end-users to select rows using check boxes or a row click if this functionality is enabled.

To show selection checkboxes, add a command column to the grid and call the column's ShowSelectCheckBox method.

The command column’s SelectAllCheckboxMode method allows you to specify the Select All check box behavior. This check box can either select all rows in the grid or only on the current page. The Select All check box is not displayed if the GridViewSelectAllCheckBoxMode.None value has been passed to the SelectAllCheckboxMode method.

Use the AllowSelectByRowClick method (available through SettingsBehavior) to enable row selection via mouse click. Once enabled, clicking any row clears the previous selection and selects this row.

To select multiple rows, click the desired rows while holding down the Ctrl key. Clicking a row in this manner toggles its selected state and preserves the selection. To select contiguous rows, click the first row you wish to select, hold down the Shift key, and click the last row. You can continue to customize the selection by clicking individual rows while holding down the Ctrl key.

Total rows selected: 0
Contact Name Company Name City Country
Maria AndersAlfreds FutterkisteBerlinGermany
Ana TrujilloAna Trujillo Emparedados y heladosMéxico D.F.Mexico
Antonio MorenoAntonio Moreno TaqueríaMéxico D.F.Mexico
Thomas HardyAround the HornLondonUK
Christina BerglundBerglunds snabbköpLuleåSweden
Hanna MoosBlauer See DelikatessenMannheimGermany
Frédérique CiteauxBlondesddsl père et filsStrasbourgFrance
Martín SommerBólido Comidas preparadasMadridSpain
Laurence LebihanBon app'MarseilleFrance
Elizabeth LincolnBottom-Dollar MarketsTsawassenCanada
<span id="selectionLabel" class="badge badge-primary demo-label">Total rows selected: 0</span>
@Html.Partial("SelectionAndFocus/SelectionPartial")
@model IEnumerable
@using DevExpress.AspNetCore.DemoModels;
@(Html.DevExpress()
    .BootstrapGridView<Customer>("selectionGrid")
    .KeyFieldName(c => c.CustomerID)
    .SettingsBehavior(settings => settings.AllowSelectByRowClick(true))
    .Columns(columns => {
        columns.AddCommandColumn()
            .ShowSelectCheckbox(true)
            .SelectAllCheckboxMode(GridViewSelectAllCheckBoxMode.AllPages);
        columns.Add(c => c.ContactName);
        columns.Add(c => c.CompanyName);
        columns.Add(c => c.City);
        columns.Add(c => c.Country);
    })
    .ClientSideEvents(events => events
        .SelectionChanged("onSelectionGridViewAction")
        .Init("onSelectionGridViewAction")
        .EndCallback("onSelectionGridViewAction"))
    .Routes(routes => routes
        .MapRoute(r => r
            .Controller("GridView")
            .Action("SelectionPartial")))
    .Bind(Model)
)
using Microsoft.AspNetCore.Mvc;
namespace DevExpress.AspNetCore.Demos {
    public partial class GridViewController : Controller {
        public ActionResult Selection() {
            return PartialView("SelectionAndFocus/Selection", NorthwindContext.Customers);
        }
        public ActionResult SelectionPartial() {
            return PartialView("SelectionAndFocus/SelectionPartial", NorthwindContext.Customers);
        }
    }
}
function onSelectionGridViewAction(args) {
    $("#selectionLabel").html("Total rows selected: " + this.getSelectedRowCount());
}

Single Row Selection

In the Single Row Only selection mode, the Grid View only allows one row to be selected at a time. Use the AllowSelectSingleRowOnly method (available through SettingsBehavior) to activate this mode.

Select checkboxes in this mode will be rendered as radio buttons. The Shift and Ctrl keys do not have an effect.

#Contact Name Company Name City Country
Maria AndersAlfreds FutterkisteBerlinGermany
Ana TrujilloAna Trujillo Emparedados y heladosMéxico D.F.Mexico
Antonio MorenoAntonio Moreno TaqueríaMéxico D.F.Mexico
Thomas HardyAround the HornLondonUK
Christina BerglundBerglunds snabbköpLuleåSweden
Hanna MoosBlauer See DelikatessenMannheimGermany
Frédérique CiteauxBlondesddsl père et filsStrasbourgFrance
Martín SommerBólido Comidas preparadasMadridSpain
Laurence LebihanBon app'MarseilleFrance
Elizabeth LincolnBottom-Dollar MarketsTsawassenCanada
@model IEnumerable
@using DevExpress.AspNetCore.DemoModels;
@(Html.DevExpress()
    .BootstrapGridView<Customer>("gridViewSelectSingleRowOnly")
    .KeyFieldName(c => c.CustomerID)
    .SettingsBehavior(settings => settings
        .AllowSelectSingleRowOnly(true)
        .AllowSelectByRowClick(true)
    )
    .Columns(columns => {
        columns.AddCommandColumn().ShowSelectCheckbox(true);
        columns.Add(c => c.ContactName);
        columns.Add(c => c.CompanyName);
        columns.Add(c => c.City);
        columns.Add(c => c.Country);
    })
    .Routes(routes => routes
        .MapRoute(r => r
            .Controller("GridView")
            .Action("SingleRowSelection")))
    .Bind(Model))

Selection API

The Grid View control provides a client-side API allowing you to programmatically manipulate row selection and obtain information about the currently selected rows. Use the following methods and events to manipulate row selection on the client:

#Contact Name Company Name City Country
Maria AndersAlfreds FutterkisteBerlinGermany
Ana TrujilloAna Trujillo Emparedados y heladosMéxico D.F.Mexico
Antonio MorenoAntonio Moreno TaqueríaMéxico D.F.Mexico
Thomas HardyAround the HornLondonUK
Christina BerglundBerglunds snabbköpLuleåSweden
Hanna MoosBlauer See DelikatessenMannheimGermany
Frédérique CiteauxBlondesddsl père et filsStrasbourgFrance
Martín SommerBólido Comidas preparadasMadridSpain
Laurence LebihanBon app'MarseilleFrance
Elizabeth LincolnBottom-Dollar MarketsTsawassenCanada
<div class="form-group">
    @(Html.DevExpress()
        .BootstrapButton("btnSelectAllRows")
        .Text("Select all rows")
        .ClientSideEvents(events => events.Click("onSelectAllRowsClick"))
    )
    @(Html.DevExpress()
        .BootstrapButton("btnSelectAllRowsOnPage")
        .Text("Select all rows on page")
        .ClientSideEvents(events => events.Click("onSelectAllRowsOnPageClick"))
    )
    @(Html.DevExpress()
        .BootstrapButton("btnClearSelection")
        .Text("Clear selection")
        .ClientSideEvents(events => events.Click("onClearSelectionClick"))
    )
</div>
<span id="selectionAPILabel" class="badge badge-secondary demo-label"></span>
@Html.Partial("SelectionAndFocus/SelectionAPIPartial")
@model IEnumerable
@using DevExpress.AspNetCore.DemoModels;
@(Html.DevExpress()
    .BootstrapGridView<Customer>("gridSelection")
    .KeyFieldName(c => c.CustomerID)
    .Columns(columns => {
        columns.AddCommandColumn().ShowSelectCheckbox(true);
        columns.Add(c => c.ContactName);
        columns.Add(c => c.CompanyName);
        columns.Add(c => c.City);
        columns.Add(c => c.Country);
    })
    .ClientSideEvents(events => events
        .SelectionChanged("onUpdateSelection")
        .Init("onUpdateSelection")
        .EndCallback("onUpdateSelection")
    )
    .Routes(routes => routes
        .MapRoute(r => r
            .Controller("GridView")
            .Action("SelectionAPIPartial")))
    .Bind(Model)
)
using Microsoft.AspNetCore.Mvc;
using System.Linq;
namespace DevExpress.AspNetCore.Demos {
    public partial class GridViewController : Controller {
        public ActionResult SelectionAPI() {
            ViewData["RowsCount"] = NorthwindContext.Customers.Count();
            return PartialView("SelectionAndFocus/SelectionAPI", NorthwindContext.Customers);
        }
        public ActionResult SelectionAPIPartial() {
            return PartialView("SelectionAndFocus/SelectionAPIPartial", NorthwindContext.Customers);
        }
    }
}
function onSelectAllRowsClick() {
    gridSelection.selectRows();
}
function onSelectAllRowsOnPageClick() {
    gridSelection.selectAllRowsOnPage();
}
function onClearSelectionClick() {
    gridSelection.unselectRows();
}
function onUpdateSelection(args) {
    btnSelectAllRows.setEnabled(this.getSelectedRowCount() < @ViewData["RowsCount"]);
    btnClearSelection.setEnabled(this.getSelectedRowCount() > 0);
    btnSelectAllRowsOnPage.setEnabled(this.getSelectedKeysOnPage().length < this.getVisibleRowsOnPage());
    $("#selectionAPILabel").html("Total rows selected: " + this.getSelectedRowCount());
}
Screen Size
Color Themes
Demo QR Code