Column Selection

• Feb 02, 2023
• 4 minutes to read

This topic describes the concept of column selection, including an overview of the selection functionality, as well as how to process selected records on the client and server sides.

• Selection Overview
• Processing Selected Rows on the Client Side
• Processing Selected Rows on the Server Side

Selection Overview

VerticalGrid allows end-users to select columns using the following methods.

• By clicking the check boxes displayed within command row cells. To display check boxes, set the command row’s VerticalGridCommandRow.ShowSelectCheckbox property to true.

  

• By using the Select command row item. To display this item, set the command row’s VerticalGridCommandRow.ShowSelectButton property to true.

  

The style settings used to paint selected records can be accessed and customized using the VerticalGridStyles.SelectedRecord (through VerticalGridSettings.Styles.SelectedRecord) property.

Processing Selected Records on the Client Side

VerticalGrid provides a full-featured client-side API that allows you to select and deselect records using JS code. The table below lists the available selection-related methods.

Method	Description
ASPxClientVerticalGrid.GetSelectedFieldValues (through MVCxClientVerticalGrid.GetSelectedFieldValues)	Returns the record values displayed within all selected records.
ASPxClientVerticalGrid.GetSelectedKeysOnPage (through MVCxClientVerticalGrid.GetSelectedKeysOnPage)	Returns key values of selected records displayed within the current page.
ASPxClientVerticalGrid.GetSelectedRecordCount (through MVCxClientVerticalGrid.GetSelectedRecordCount)	Returns the number of selected records.
ASPxClientVerticalGrid.IsRecordSelectedOnPage (through MVCxClientVerticalGrid.IsRecordSelectedOnPage)	Indicates whether or not the specified record is selected within the current page.
ASPxClientVerticalGrid.SelectAllRecordsOnPage (through MVCxClientVerticalGrid.SelectAllRecordsOnPage)	Allows you to select or deselect all records displayed on the current page based on the parameter passed.
ASPxClientVerticalGrid.SelectRecordOnPage (through MVCxClientVerticalGrid.SelectRecordOnPage)	Selects or deselects the specified record displayed on the current page.
ASPxClientVerticalGrid.SelectRecords (through MVCxClientVerticalGrid.SelectRecords)	Selects or deselects the specified records within the grid.
ASPxClientVerticalGrid.SelectRecordsByKey (through MVCxClientVerticalGrid.SelectRecordsByKey)	Selects or deselects the specified records displayed within the grid.
ASPxClientVerticalGrid.UnselectAllRecordsOnPage (through MVCxClientVerticalGrid.UnselectAllRecordsOnPage)	Deselects all selected records displayed on the current page.
ASPxClientVerticalGrid.UnselectFilteredRecords (through MVCxClientVerticalGrid.UnselectFilteredRecords)	Deselects all grid records that match the filter criteria currently applied to the grid.
ASPxClientVerticalGrid.UnselectRecordOnPage (through MVCxClientVerticalGrid.UnselectRecordOnPage)	Deselects the specified record (if selected) displayed on the current page.
ASPxClientVerticalGrid.UnselectRecords (through MVCxClientVerticalGrid.UnselectRecords)	Deselects the specified records (if selected) within the grid.
ASPxClientVerticalGrid.UnselectRecordsByKey (through MVCxClientVerticalGrid.UnselectRecordsByKey)	Deselects the specified records displayed within the grid.

Example

In this example, the ASPxClientVerticalGrid.SelectionChanged (through MVCxClientVerticalGrid.SelectionChanged) client-side event is handled to display selected contacts within a list box. Contact names are obtained using the ASPxClientVerticalGrid.GetSelectedFieldValues (through MVCxClientVerticalGrid.GetSelectedFieldValues) function.

View code:

Razor

<script type="text/javascript">
    //<![CDATA[
    function SelectionChanged(s, e) {
        s.GetSelectedFieldValues("ContactName", GetSelectedFieldValuesCallback);
    }
    function GetSelectedFieldValuesCallback(values) {
        SelectedRecords.BeginUpdate();
        SelectedRecords.ClearItems();
        for (var i = 0; i < values.length; i++) {
            SelectedRecords.AddItem(values[i]);
        }
        SelectedRecords.EndUpdate();
    }
    // ]]>
</script>

<div style="float:left;">
    <div style="float: left; margin: 5px;">
        <div class="text">
            Selected values:
        </div>
        @Html.DevExpress().ListBox(settings => {
       settings.Name = "SelectedRecords";
       settings.Properties.EnableClientSideAPI = true;
   }).GetHtml()
    </div>
    @Html.Action("VerticalGridPartial")
</div>

Partial View code:

Razor

@Html.DevExpress().VerticalGrid(settings => {
    settings.Name = "VerticalGrid";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "VerticalGridPartial" };
    settings.KeyFieldName = "CustomerID";
    settings.Rows.Add("ContactName");
    settings.Rows.Add("CompanyName");
    settings.Rows.Add("City");
    settings.Rows.Add("Region");
    settings.Rows.Add("Country"); 

    settings.CommandRow.ShowSelectCheckbox = true;
    settings.CommandRow.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, you should get the selected rows on the client-side and then send them to the server via a callback.

Example

In this example, the ASPxClientVerticalGrid.SelectionChanged (through MVCxClientVerticalGrid.SelectionChanged) client-side event is handled to get a collection of selected values and send them to the server side using a callback. Contact names and cities are obtained using the ASPxClientVerticalGrid.GetSelectedFieldValues (through MVCxClientVerticalGrid.GetSelectedFieldValues) function, 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 MVCxClientVerticalGrid.PerformCallback method. In the controller code, you can split the string into separate values.

View code:

Razor

<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.
        VerticalGrid.PerformCallback({ selectedValues: userSelect });
    }
</script>

@Html.Action("GridViewPartial")

Partial View code:

Razor

@Html.DevExpress().VerticalGrid(settings => {
    settings.Name = "VerticalGrid";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "VerticalGridPartial" };
    settings.CommandRow.ShowSelectCheckbox = true;
    settings.CommandRow.Visible = true;

    settings.KeyFieldName = "CustomerID";
    settings.Rows.Add("ContactName");
    settings.Rows.Add("CompanyName");
    settings.Rows.Add("City");
    settings.Rows.Add("Region");
    settings.Rows.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:

C#

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("_VerticalGridPartial", model.ToList());
        }
    }
}