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.
<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" />
<SettingsDataSecurity AllowEdit="true" AllowInsert="true" AllowDelete="true" />
<Columns>
<dx:BootstrapCardViewColumn FieldName="CompanyName" />
<dx:BootstrapCardViewColumn FieldName="ContactName" />
<dx:BootstrapCardViewColumn FieldName="Country" />
<dx:BootstrapCardViewColumn FieldName="City" />
<dx:BootstrapCardViewColumn FieldName="Phone" />
</Columns>
<SettingsPager NumericButtonCount="6" ItemsPerPage="2"></SettingsPager>
<SettingsLayout CardColSpanLg="6" CardColSpanSm="12" />
</dx:BootstrapCardView>
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:
<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" />
<SettingsDataSecurity AllowEdit="true" AllowInsert="true" AllowDelete="true" />
<Columns>
<dx:BootstrapCardViewColumn FieldName="CompanyName" />
<dx:BootstrapCardViewColumn FieldName="ContactName" />
<dx:BootstrapCardViewColumn FieldName="Country" />
<dx:BootstrapCardViewColumn FieldName="City" />
<dx:BootstrapCardViewColumn FieldName="Phone" />
</Columns>
<SettingsPager NumericButtonCount="6" ItemsPerPage="2"></SettingsPager>
<SettingsLayout CardColSpanLg="6" CardColSpanSm="12" />
</dx:BootstrapCardView>
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.
<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" />
<SettingsPager NumericButtonCount="6" ItemsPerPage="2"></SettingsPager>
<SettingsLayout CardColSpanLg="6" CardColSpanSm="12" />
</dx:BootstrapCardView>
protected void CardViewCustomToolbar_ToolbarItemClick(object source, BootstrapCardViewToolbarItemClickEventArgs e) {
switch(e.Item.Name) {
case "CustomExportToXLS":
CardViewCustomToolbar.ExportXlsToResponse();
break;
default:
break;
}
}
function onToolbarItemClick(s, e) {
switch (e.item.name) {
case "CustomExportToXLS":
e.processOnServer = true;
e.usePostBack = true;
break;
}
}