Selection
- 5 minutes to read
This topic describes the concept of row selection, including an overview of the selection functionality, as well as how to process selected records on client and server sides.
- Selection Overview
- Processing Selected Rows on the Client Side
- Processing Selected Rows on the Server Side
Selection Overview
The GridView allows end-users to select rows using the following methods.
- By clicking a row, provided that the ASPxGridViewBehaviorSettings.AllowSelectByRowClick option (using GridViewSettings.SettingsBehavior.AllowSelectByRowClick) is enabled.
By clicking the check boxes or radio buttons displayed within command column cells. The editor type (a radio button or a check box) is determined automatically, based on the currently active selection mode (single or multiple row). To display check boxes or radio buttons, set the command column’s GridViewCommandColumn.ShowSelectCheckbox property to true.
By using the Select command column item. To display this item, set the item’s GridViewCommandColumnButton.Visible property to true.
If the ASPxGridViewBehaviorSettings.AllowSelectByRowClick option (using GridViewSettings.SettingsBehavior.AllowSelectByRowClick) is enabled, end-users can change the selection by clicking rows in combination with the SHIFT or CTRL key. In multiple row selection mode, clicking a row while holding down the CTRL key toggles the row’s selected state. Contiguous rows can be selected by clicking the first row and the last row while holding down the SHIFT key. After this, the selection can be further customized by clicking individual rows while holding down the CTRL key.
The GridView supports single and multiple row selection modes. To switch to single row selection mode, set the ASPxGridViewBehaviorSettings.AllowSelectSingleRowOnly property value (using GridViewSettings.SettingsBehavior.AllowSelectSingleRowOnly) to true. In single row selection mode, the command column cells display radio buttons instead of check boxes.
The style settings used to paint selected rows can be accessed and customized using the GridViewStyles.SelectedRow property (using GridViewSettings.Styles.SelectedRow).
Processing Selected Rows on the Client Side
The GridView provides a full-featured client-side API that allows you to select and deselect rows using JS code. The table below lists the available selection-related methods.
| Method | Description |
|---|---|
| ASPxClientGridView.GetSelectedFieldValues (using MVCxClientGridView.GetSelectedFieldValues) | Returns the values of the specified fields within selected rows. |
| ASPxClientGridView.GetSelectedKeysOnPage (using MVCxClientGridView.GetSelectedKeysOnPage) | Returns the key values of selected rows. |
| ASPxClientGridView.GetSelectedRowCount (using MVCxClientGridView.GetSelectedRowCount) | Returns the number of selected rows. |
| ASPxClientGridView.IsRowSelectedOnPage (using MVCxClientGridView.IsRowSelectedOnPage) | Indicates whether the specified row is selected. |
| ASPxClientGridView.SelectAllRowsOnPage (using MVCxClientGridView.SelectAllRowsOnPage) | Selects or deselects the rows on the current page. |
| ASPxClientGridView.SelectRowOnPage (using MVCxClientGridView.SelectRowOnPage) | Selects or deselects the row specified by its visible index. |
| ASPxClientGridView.SelectRows (using MVCxClientGridView.SelectRows) | Selects or deselects rows. |
| ASPxClientGridView.SelectRowsByKey (using MVCxClientGridView.SelectRowsByKey) | Selects or deselects the rows specified by their key values. |
| ASPxClientGridView.UnselectAllRowsOnPage (using MVCxClientGridView.UnselectAllRowsOnPage) | Deselects the rows on the current page. |
| ASPxClientGridView.UnselectFilteredRows (using MVCxClientGridView.UnselectFilteredRows) | Deselects the rows that match the applied filter criteria. |
| ASPxClientGridView.UnselectRowOnPage (using MVCxClientGridView.UnselectRowOnPage) | Deselects the row specified by its visible index. |
| ASPxClientGridView.UnselectRows (using MVCxClientGridView.UnselectRows) | Deselects rows. |
| ASPxClientGridView.UnselectRowsByKey (using MVCxClientGridView.UnselectRowsByKey) | Deselects the rows specified by their key values. |
Example
In this example, the ASPxClientGridView.SelectionChanged client-side event (using MVCxClientGridView.SelectionChanged) is handled to display selected contacts within a list box. Contact names are obtained using the ASPxClientGridView.GetSelectedFieldValues function (using MVCxClientGridView.GetSelectedFieldValues).
View code:
<script type="text/javascript">
//<![CDATA[
function SelectionChanged(s, e) {
s.GetSelectedFieldValues("ContactName", GetSelectedFieldValuesCallback);
}
function GetSelectedFieldValuesCallback(values) {
SelectedRows.BeginUpdate();
SelectedRows.ClearItems();
for (var i = 0; i < values.length; i++) {
SelectedRows.AddItem(values[i]);
}
SelectedRows.EndUpdate();
}
// ]]>
</script>
<div style="float:left;">
<div style="float: left; margin: 5px;">
<div class="text">
Selected values:
</div>
@Html.DevExpress().ListBox(settings => {
settings.Name = "SelectedRows";
settings.Properties.EnableClientSideAPI = true;
}).GetHtml()
</div>
@Html.Action("GridViewPartial")
</div>
Partial View code:
@Html.DevExpress().GridView(settings => {
settings.Name = "GridView";
settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartial" };
settings.KeyFieldName = "CustomerID";
settings.Columns.Add("ContactName");
settings.Columns.Add("CompanyName");
settings.Columns.Add("City");
settings.Columns.Add("Region");
settings.Columns.Add("Country");
settings.CommandColumn.ShowSelectCheckbox = true;
settings.CommandColumn.Visible = true;
settings.ClientSideEvents.SelectionChanged = "SelectionChanged";
}).Bind(Model).GetHtml()
The image below illustrates the result.
Processing Selected Rows on the Server Side
To obtain the selected rows on the server side, get the selected rows on the client-side and then send them to the server using a callback.
Example
In this example, the ASPxClientGridView.SelectionChanged client-side event (using MVCxClientGridView.SelectionChanged) is handled to get a collection of selected values and send them to the server side with a callback. Contact names and cities are obtained using the ASPxClientGridView.GetSelectedFieldValues function (using MVCxClientGridView.GetSelectedFieldValues), and are passed to the OnGetValues function. The OnGetValues function concatenates the selected values to a single string and sends the resulting string to the server using the MVCxClientGridView.PerformCallback method. In the controller code, you can split the string into separate values.
View code:
<script type="text/javascript">
function OnGetValues(values) {
var userSelect = "";
for (var i in values) {
userSelect = userSelect + values[i] + ";";
}
// The "PerformCallback" method passes the string with the selected values
// to a server as a Request.Params["selectedValues"] item.
GridView.PerformCallback({ selectedValues: userSelect });
}
</script>
@Html.Action("GridViewPartial")
Partial View code:
@Html.DevExpress().GridView(settings => {
settings.Name = "GridView";
settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartial" };
settings.CommandColumn.ShowSelectCheckbox = true;
settings.CommandColumn.Visible = true;
settings.KeyFieldName = "CustomerID";
settings.Columns.Add("ContactName");
settings.Columns.Add("CompanyName");
settings.Columns.Add("City");
settings.Columns.Add("Region");
settings.Columns.Add("Country");
// When an end-user selects grid records, the values of the "ContactName" and "City" fields of the selected records are passed to the "OnGetValues" function.
settings.ClientSideEvents.SelectionChanged = "function(s,e){ s.GetSelectedFieldValues('ContactName;City', OnGetValues); }";
}).Bind(Model).GetHtml()
Controller code:
using System.Web.Mvc;
using System.Linq;
namespace MyProject.Controllers {
public class HomeController : Controller {
// ...
public ActionResult GridViewPartial() {
// Contains all selected values, concatenated to a single string.
var x = Request.Params["selectedValues"]; // "Maria Anders,Berlin;Thomas Hardy,London;"
var model = db.Customers;
return PartialView("_GridViewPartial", model.ToList());
}
}
}