BootstrapCardViewCustomCommandButton Class

Represents a custom command button.

Namespace: DevExpress.Web.Bootstrap

Assembly: DevExpress.Web.Bootstrap.v24.1.dll

NuGet Package: DevExpress.Web.Bootstrap

Declaration

C#

public class BootstrapCardViewCustomCommandButton :
    CardViewCustomCommandButton

VB.NET

Public Class BootstrapCardViewCustomCommandButton
    Inherits CardViewCustomCommandButton

Remarks

Command columns can display custom buttons. These buttons are stored within the BootstrapCardViewCommandLayoutItem.CustomButtons collection.

Custom buttons are represented by the BootstrapCardViewCustomCommandButton objects.

Related members:

• GridCustomCommandButton.Text - Specifies the button’s text.
• GridCustomCommandButton.ID - Specifies the button’s identifier.

To process a custom button click, handle the client-side CustomButtonClick event.

JS

function onCustomButtonClick(s,e) {
    if (e.buttonID == "makePrimary") {
        alert('current card index = ' + e.visibleIndex);
    }
}

ASPX

<dx:BootstrapCardView ID="cvPhotos2" runat="server" ClientInstanceName="cvPhotos2" AutoGenerateColumns="False" 
                      DataSourceID="AccessDataSource1" EnableCallbackAnimation="True" KeyFieldName="CategoryID">
    <ClientSideEvents CustomButtonClick="onCustomButtonClick" />
    <CardLayoutProperties>
        <Items>
            <dx:BootstrapCardViewColumnLayoutItem ColumnName="Picture" ShowCaption="False" CssClasses-Item="itemNoPadding" />
            <dx:BootstrapCardViewCommandLayoutItem ButtonRenderMode="Danger" ShowDeleteButton="True" ColSpanXl="6" />
            <dx:BootstrapCardViewCommandLayoutItem ButtonRenderMode="Link" ColSpanXl="6" HorizontalAlign="Right">
                <CustomButtons>
                    <dx:BootstrapCardViewCustomCommandButton ID="makePrimary" Text="Make Primary Image" />
                </CustomButtons>
            </dx:BootstrapCardViewCommandLayoutItem>
        </Items>
    </CardLayoutProperties>
    <Columns>
        <dx:BootstrapCardViewColumn FieldName="CategoryID" Visible="False" />
        <dx:BootstrapCardViewBinaryImageColumn FieldName="Picture">
            <PropertiesBinaryImage ImageHeight="185px" ImageWidth="100%" />
        </dx:BootstrapCardViewBinaryImageColumn>
        <dx:BootstrapCardViewCheckColumn FieldName="IsPrimary" UnboundType="Boolean" />
    </Columns>
    <CssClasses Control="myPhotos" />
    <SettingsBehavior AllowSelectByCardClick="True" ConfirmDelete="True" EnableCardHotTrack="True" />
    <SettingsBootstrap Sizing="Large" />
    <SettingsLayout CardColSpanXs="12" CardColSpanSm="12" CardColSpanMd="4" CardColSpanLg="3" CardColSpanXl="3" />
    <SettingsLoadingPanel Text="Loading photos ..." />
    <SettingsPager Mode="ShowAllRecords">
    </SettingsPager>
    <SettingsText ConfirmDelete="Are you sure you want to delete the selected record/s?" EmptyCard="There are no photos to display" />
</dx:BootstrapCardView>

Inheritance

Object

StateManager

CollectionItem

GridCustomCommandButton

CardViewCustomCommandButton

BootstrapCardViewCustomCommandButton