ContextQMD
Back to Devexpress

Card View Toolbars

aspnet-118567-components-card-view-concepts-toolbars.md

latest10.1 KB
Original Source

Card View Toolbars

  • Jul 19, 2021
  • 5 minutes to read

The DevExpress ASPxCardView control enables you to group the most important or frequently used grid commands, and expose them through customizable toolbars - so that end users can access them easily.

See Online Demo: Toolbar

Note

The ASPxGridBase.KeyFieldName property should be specified if the following grid features are used:

  • data editing;
  • adding a new card or deleting an existing card;
  • selecting a card;
  • endless paging.

Toolbar Object

ASPxCardView stores toolbars in its ASPxCardView.Toolbars collection. Each toolbar is a CardViewToolbar class instance. You can add and remove toolbars within the collection and change the following characteristics of individual toolbars:

Toolbar CharacteristicPropertyDescription
Adaptive BehaviorGridToolbarSettingsAdaptivity.EnabledSpecifies whether an adaptive behavior is enabled for the toolbar.
AvailabilityGridToolbar.EnabledGets or sets a value that indicates whether the toolbar is enabled, allowing the toolbar to respond to end-user interactions.
Item AlignmentGridToolbar.ItemAlignGets or sets the toolbar item alignment.
NameGridToolbar.NameGets or sets the toolbar’s unique identifier name.
PositionGridToolbar.PositionGets or sets the toolbar position.
VisibilityGridToolbar.VisibleGets or sets a value specifying the visibility of the toolbar.

To populate a toolbar with toolbar items and to allow indexed access to them, use the toolbar’s CardViewToolbar.Items property.

Toolbar Item Object

Toolbar items are instances of the CardViewToolbarItem class. This class is a descendant of the MenuItem class, so it inherits the following key functionality that makes it look and behave like a menu item.

Toolbar Item CharacteristicPropertyDescription
Group SeparationMenuItem.BeginGroupGets or sets a value that specifies whether the current menu item starts a group.
Group NameMenuItem.GroupNameGets or sets the name of a logical check group to which the menu item belongs.
ImageMenuItem.ImageGets the settings of an image displayed within the menu item.
NameMenuItem.NameGets or sets the unique identifier name for the current menu item.
TemplateMenuItem.TemplateGets or sets a template used to display the content of the current menu item.
TextMenuItem.TextGets or sets the text content of the current menu item.
TooltipMenuItem.ToolTipGets or sets the current menu item’s tooltip text.

Additionally, you can use the following options explicitly implemented for toolbar items to properly customize their behavior and appearance.

Toolbar Item CharacteristicPropertyDescription
Display ModeGridToolbarItem.DisplayModeGets or sets the display mode of the current toolbar item within the toolbar.
Command to ExecuteCardViewToolbarItem.CommandGets or sets the name of a command executed when clicking a toolbar item.
Child ItemsCardViewToolbarItem.ItemsGets a collection that contains the toolbar items of the current toolbar item. Enables you to create hierarchies of nested toolbar items of unlimited depth.

Based on the CardViewToolbarItem.Command property setting, a toolbar item either triggers a standard grid command (data item editing, deletion, creation, etc.) or performs a custom action, if required. (This action should be implemented programmatically.)

Standard Toolbar Item

To make a toolbar item execute a standard command, set the item’s CardViewToolbarItem.Command property to the desired command name listed by the CardViewToolbarCommand enumeration. A standard toolbar item automatically displays the command-related text and image (optional). When an end user clicks a standard toolbar item, the corresponding grid command is executed.

Example - How to create standard items

The code snippet below demonstrates how to create two standard toolbar items - for the New and Refresh commands - in markup.

aspx
<dx:ASPxCardView runat="server" ID="Grid" ...>
        ...
        <Toolbars>
            <dx:CardViewToolbar ItemAlign="Right">
                <Items>
                    <dx:CardViewToolbarItem Command="New" />
                    ...
                    <dx:CardViewToolbarItem Command="Refresh" BeginGroup="true" />
                    ...
                </Items>
            </dx:CardViewToolbar>
        </Toolbars>
    </dx:ASPxCardView>

Custom Toolbar Item

If you require a toolbar item to perform a custom action, create a new CardViewToolbarItem object and use one of the following implementation options.

  • Use Toolbar-Related Grid API

  • Use a Template to Define an Item

Example - How to create custom items (by specifying names, text and images)

The code below demonstrates how to create a custom ‘Export to’ toolbar item with three sub-items to export grid data to different formats (PDF, XLSX and XLS).

aspx
<dx:ASPxCardView runat="server" ID="Grid" OnToolbarItemClick="Grid_ToolbarItemClick" ...>
        <Toolbars>
            <dx:CardViewToolbar ItemAlign="Right">
                <Items>
                    ...
                    <dx:CardViewToolbarItem Text="Export to" Image-IconID="actions_download_16x16office2013" BeginGroup="true">
                        <Items>
                            <dx:CardViewToolbarItem Name="CustomExportToPDF" Text="PDF" Image-IconID="export_exporttopdf_16x16office2013" />
                            <dx:CardViewToolbarItem Name="CustomExportToXLS" Text="XLS(DataAware)" Image-IconID="export_exporttoxls_16x16office2013" />
                            <dx:CardViewToolbarItem Name="CustomExportToXLSX" Text="XLSX(WYSIWYG)" Image-IconID="export_exporttoxlsx_16x16office2013" />
                        </Items>
                    </dx:GridViewToolbarItem>
                    ...
                </Items>
            </dx:CardViewToolbar>
        </Toolbars>        
        ...
        <ClientSideEvents ToolbarItemClick="OnToolbarItemClick" />
    </dx:ASPxCardView>
javascript
function OnToolbarItemClick(s,e) {
            if(IsExportToolbarCommand(e.item.name)){
                e.processOnServer=true;
                e.usePostBack=true;
            }
        }
        function IsExportToolbarCommand(command){
            return command == "CustomExportToPDF" || command == "CustomExportToXLSX" || command == "CustomExportToXLS" ;
        }
csharp
protected void Grid_ToolbarItemClick(object source, ASPxCardViewToolbarItemClickEventArgs e) {
        switch(e.Item.Name) {
            case "CustomExportToPDF":
                Grid.ExportPdfToResponse();
                break;
            case "CustomExportToXLS":
                Grid.ExportXlsToResponse(new XlsExportOptionsEx { ExportType = ExportType.DataAware });
                break;
            case "CustomExportToXLSX":
                Grid.ExportXlsxToResponse(new XlsxExportOptionsEx { ExportType = ExportType.WYSIWYG });
                break;
            default:
                break;
        }
    }

Example - How to create a custom item (by defining its template)

The following code creates a custom toolbar item by defining a template that imitates the functionality of the grid search panel’s editor.

aspx
<dx:ASPxCardView runat="server" ID="Grid" ...>
        <Toolbars>
            <dx:CardViewToolbar ItemAlign="Right">
                <Items>
                    ...
                    <dx:CardViewToolbarItem BeginGroup="true">
                        <Template>
                            <dx:ASPxButtonEdit ID="tbToolbarSearch" runat="server" NullText="Search..." Height="100%">
                                <Buttons>
                                    <dx:SpinButtonExtended Image-IconID="find_find_16x16gray" />
                                </Buttons>
                            </dx:ASPxButtonEdit>
                        </Template>
                    </dx:CardViewToolbarItem>
                </Items>
            </dx:CardViewToolbar>
        </Toolbars>        
        ...
        <SettingsSearchPanel CustomEditorID="tbToolbarSearch" />
        ...
    </dx:ASPxCardView>

See Also

Online Demo: Toolbar