Back to Devexpress

BootstrapCardViewCustomCommandButton Class

aspnetbootstrap-devexpress-dot-web-dot-bootstrap-8cff6688.md

latest4.2 KB
Original Source

BootstrapCardViewCustomCommandButton Class

Represents a custom command button.

Namespace : DevExpress.Web.Bootstrap

Assembly : DevExpress.Web.Bootstrap.v25.2.dll

NuGet Package : DevExpress.Web.Bootstrap

Declaration

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

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

javascript
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

See Also

BootstrapCardViewCustomCommandButton Members

DevExpress.Web.Bootstrap Namespace