Toolbar

The Card View control can display toolbars aggregating commands related to the Card View and its data.

All Card View toolbars are available through the Toolbars collection property, in which each toolbar is a BootstrapCardViewToolbar object. Each item on the toolbar is represented by a BootstrapCardViewToolbarItem object available through the toolbar’s BootstrapCardViewToolbar.Items collection property.

A toolbar item's Command property allows you to associate the toolbar item with one of the built-in commands or custom logic implemented in the Card View’s server-side or client-side ToolbarItemClick event handler.

Refer to the BootstrapCardViewToolbarCommand documentation topic to view the full list of available commands.

Alfreds Futterkiste
Maria Anders
Germany
Berlin
030-0074321
Ana Trujillo Emparedados y helados
Ana Trujillo
Mexico
México D.F.
(5) 555-4729
<dx:BootstrapCardView ID="CardViewToolbar" runat="server" DataSourceID="CardViewToolbarDataSource" KeyFieldName="CustomerID">
    <Toolbars>
        <dx:BootstrapCardViewToolbar>
            <Items>
                <dx:BootstrapCardViewToolbarItem Command="New" />
                <dx:BootstrapCardViewToolbarItem Command="Edit" />
                <dx:BootstrapCardViewToolbarItem Command="Delete" />
                <dx:BootstrapCardViewToolbarItem Command="Update" />
                <dx:BootstrapCardViewToolbarItem Command="Cancel" />
                <dx:BootstrapCardViewToolbarItem Command="Refresh" BeginGroup="true" />
                <dx:BootstrapCardViewToolbarItem Command="ClearSorting" />
                <dx:BootstrapCardViewToolbarItem Command="ShowHeaderPanel" BeginGroup="true" />
                <dx:BootstrapCardViewToolbarItem Command="ShowSearchPanel" />
            </Items>
        </dx:BootstrapCardViewToolbar>
    </Toolbars>
    <SettingsBehavior AllowFocusedCard="true" />
    <Settings ShowHeaderPanel="true" />
    <Columns>
        <dx:BootstrapCardViewColumn FieldName="CompanyName" />
        <dx:BootstrapCardViewColumn FieldName="ContactName" />
        <dx:BootstrapCardViewColumn FieldName="Country" />
        <dx:BootstrapCardViewColumn FieldName="City" />
        <dx:BootstrapCardViewColumn FieldName="Phone" />
    </Columns>
</dx:BootstrapCardView>

Adaptive Toolbar

The BootstrapCardViewToolbar object allows you to add adaptive toolbars to different Card View parts (inside the header/footer, outside the Panel element).

Toolbar Position

The following table lists the properties that control the toolbar's position:

Position = Top Position = Bottom
ShowInsidePanel = true The toolbar is displayed in the PanelHeader
(<div class="card-header">...</div>)
The toolbar is displayed in the PanelFooter
(<div class="card-footer">...</div>)
ShowInsidePanel = false The toolbar is displayed above the Panel element
(<div class="card">...</div>)
The toolbar is displayed below the Panel element
(<div class="card">...</div>)

Note: If a Card View has one or more toolbars in the the PanelHeader, the Card View's title is displayed inside the first toolbar. Otherwise, the title is displayed above the Card View.

Toolbar Adaptivity

The following properties control how the toolbar responds when the container’s width changes:

  1. SettingsAdaptivity.EnableCollapseRootItemsToIcons - If true, the text of all items that contain icons are hidden. Additionally, you can use the item's BootstrapCardViewToolbarItem.AdaptivePriority property to hide a specific item first of others.
  2. SettingsAdaptivity.EnableAutoHideRootItems - If true, the toolbar combines root items one by one in the root submenu until the toolbar contains the minimum number of root items (specified in the SettingsAdaptivity.MinRootItemsCount property).
Alfreds Futterkiste
Maria Anders
Germany
Berlin
030-0074321
Ana Trujillo Emparedados y helados
Ana Trujillo
Mexico
México D.F.
(5) 555-4729
<dx:BootstrapCardView ID="CardViewAdaptiveToolbar" runat="server" DataSourceID="CardViewAdaptiveToolbarDataSource" KeyFieldName="CustomerID">
    <Toolbars>
        <dx:BootstrapCardViewToolbar ShowInsidePanel="true">
            <SettingsAdaptivity Enabled="true" EnableCollapseRootItemsToIcons="True" EnableCollapseToSideMenu="True" />
            <Items>
                <dx:BootstrapCardViewToolbarItem Command="New" />
                <dx:BootstrapCardViewToolbarItem Command="Edit" />
                <dx:BootstrapCardViewToolbarItem Command="Delete" />
                <dx:BootstrapCardViewToolbarItem Command="Update" />
                <dx:BootstrapCardViewToolbarItem Command="Cancel" />
                <dx:BootstrapCardViewToolbarItem Command="Refresh" BeginGroup="true" />
                <dx:BootstrapCardViewToolbarItem Command="ClearSorting" />
                <dx:BootstrapCardViewToolbarItem Command="ShowHeaderPanel" BeginGroup="true" />
                <dx:BootstrapCardViewToolbarItem Command="ShowSearchPanel" />
            </Items>
        </dx:BootstrapCardViewToolbar>
    </Toolbars>
    <SettingsBehavior AllowFocusedCard="true" />
    <Settings ShowHeaderPanel="true" />
    <SettingsText Title="Customers Info" />
    <Columns>
        <dx:BootstrapCardViewColumn FieldName="CompanyName" />
        <dx:BootstrapCardViewColumn FieldName="ContactName" />
        <dx:BootstrapCardViewColumn FieldName="Country" />
        <dx:BootstrapCardViewColumn FieldName="City" />
        <dx:BootstrapCardViewColumn FieldName="Phone" />
    </Columns>
</dx:BootstrapCardView>

Custom Toolbar Items

You can provide custom logic for a toolbar item by setting its Command property to Custom. Handle the client-side ToolbatItemClick event to process a toolbar item click.

If you also want to perform server-side processing, set the processOnServer client event argument to true, which forces a callback after the client-side processing is finished.

You can specify that the server-side processing should be initiated by a postback rather than a callback by setting the usePostBack client event argument to true.

Alfreds Futterkiste
Maria Anders
Germany
Berlin
030-0074321
Ana Trujillo Emparedados y helados
Ana Trujillo
Mexico
México D.F.
(5) 555-4729
<dx:BootstrapCardView ID="CardViewCustomToolbar" runat="server" DataSourceID="CustomersDataSource" OnToolbarItemClick="CardViewCustomToolbar_ToolbarItemClick">
    <ClientSideEvents ToolbarItemClick="onToolbarItemClick" />
    <Toolbars>
        <dx:BootstrapCardViewToolbar>
            <Items>
                <dx:BootstrapCardViewToolbarItem Command="ExportToPdf" />
                <dx:BootstrapCardViewToolbarItem Command="ExportToDocx" />
                <dx:BootstrapCardViewToolbarItem Command="ExportToXls" />
                <dx:BootstrapCardViewToolbarItem BeginGroup="true" Name="CustomExportToXLS" Text="Custom Export to XLS(WYSIWYG)" />
            </Items>
        </dx:BootstrapCardViewToolbar>
    </Toolbars>
    <Columns>
        <dx:BootstrapCardViewColumn FieldName="CompanyName" />
        <dx:BootstrapCardViewColumn FieldName="ContactName" />
        <dx:BootstrapCardViewColumn FieldName="Country" />
        <dx:BootstrapCardViewColumn FieldName="City" />
        <dx:BootstrapCardViewColumn FieldName="Phone" />
    </Columns>
    <SettingsExport EnableClientSideExportAPI="true" />
</dx:BootstrapCardView>
protected void CardViewCustomToolbar_ToolbarItemClick(object source, BootstrapCardViewToolbarItemClickEventArgs e) {
    switch(e.Item.Name) {
        case "CustomExportToXLS":
            CardViewCustomToolbar.ExportXlsToResponse(new XlsExportOptionsEx { ExportType = ExportType.WYSIWYG });
            break;
        default:
            break;
    }
}
function onToolbarItemClick(s, e) {
    switch (e.item.name) {
        case "CustomExportToXLS":
            e.processOnServer = true;
            e.usePostBack = true;
            break;
    }
}
Screen Size
Color Themes
Demo QR Code