Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Expand]Common Concepts
  [Expand]Grid View
  [Collapse]Card View
    Overview - CardView
    Main Features - Card View
   [Collapse]Concepts
    [Expand]Binding to Data
    [Expand]Data Representation Basics
    [Collapse]Focus and Navigation
      Focused Card
     [Expand]Paging and Scrolling
      Selection
    [Expand]Data Editing and Validation
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]HTML Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Navigation and Layout Extensions
  [Expand]File Management
  [Expand]Multi-Use Site Extensions
  [Expand]Charts
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Tree List
  [Expand]Data Editor Extensions
  [Expand]Report Extensions
  [Expand]SpellChecker
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Selection

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

Expanded Selection Overview

The CardView allows end-users to select cards using the following methods.

If the ASPxCardViewBehaviorSettings.AllowSelectByCardClick (via CardViewSettings.SettingsBehavior.AllowSelectByCardClick) option is enabled, end-users can change the selection by clicking cards in combination with the SHIFT or CTRL key. In multiple cards selection mode, clicking a card while holding down the CTRL key toggles the card's selected state. Contiguous cards can be selected by clicking the first card and the last card, while holding down the SHIFT key. After this, the selection can be further customized by clicking individual cards while holding down the CTRL key.

The style settings used to paint selected cards can be accessed and customized using the CardViewStyles.SelectedCard (via CardViewSettings.Styles.SelectedCard) property.

Expanded Processing Selected Cards on the Client Side

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

Method Description
ASPxClientCardView.GetSelectedFieldValues (via MVCxClientCardView.GetSelectedFieldValues) Returns the card values displayed within all selected cards.
ASPxClientCardView.GetSelectedKeysOnPage (via MVCxClientCardView.GetSelectedKeysOnPage) Returns key values of selected cards displayed within the current page.
ASPxClientCardView.GetSelectedCardCount (via MVCxClientCardView.GetSelectedCardCount) Returns the number of selected cards.
ASPxClientCardView.IsCardSelectedOnPage (via MVCxClientCardView.IsCardSelectedOnPage) Indicates whether or not the specified card is selected within the current page.
ASPxClientCardView.SelectAllCardsOnPage (via MVCxClientCardView.SelectAllCardsOnPage) Selects all unselected cards displayed on the current page.
ASPxClientCardView.SelectCardOnPage (via MVCxClientCardView.SelectCardOnPage) Selects the specified card displayed on the current page.
ASPxClientCardView.SelectCards (via MVCxClientCardView.SelectCards) Selects all the unselected cards within the CardView.
ASPxClientCardView.SelectCardsByKey (via MVCxClientCardView.SelectCardsByKey) Selects or deselects the specified cards displayed within the CardView.
ASPxClientCardView.UnselectAllCardsOnPage (via MVCxClientCardView.UnselectAllCardsOnPage) Deselects all selected cards displayed on the current page.
ASPxClientCardView.UnselectFilteredCards (via MVCxClientCardView.UnselectFilteredCards) Deselects all grid cards that match the filter criteria currently applied to the CardView.
ASPxClientCardView.UnselectCardOnPage (via MVCxClientCardView.UnselectCardOnPage) Deselects the specified cards (if selected) displayed on the current page.
ASPxClientCardView.UnselectCards (via MVCxClientCardView.UnselectCards) Deselects the specified cards (if selected) within the ASPxCardView.
ASPxClientCardView.UnselectCardsByKey (via MVCxClientCardView.UnselectCardsByKey) Deselects the specified card displayed within the ASPxCardView.

Expanded Processing Selected Cards on the Server Side

To obtain the selected cards on the server side, you should get the selected cards on the client-side and then send them to the server using a callback.

Example

In this example, the ASPxClientCardView.SelectionChanged (via MVCxClientCardView.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 ASPxClientCardView.GetSelectedFieldValues (via MVCxClientCardView.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 MVCxClientCardView.PerformCallback method. In the controller code, you can split the string into separate values.

View code:

Partial View code:

Controller code:

How would you rate this topic?​​​​​​​