Skip to main content

BootstrapCardViewCustomCommandButton Class

Represents a custom command button.

Namespace: DevExpress.Web.Bootstrap

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

NuGet Package: DevExpress.Web.Bootstrap

Declaration

public class BootstrapCardViewCustomCommandButton :
    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:

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

function onCustomButtonClick(s,e) {
    if (e.buttonID == "makePrimary") {
        alert('current card index = ' + e.visibleIndex);
    }
}
<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>
See Also