Card View & React

Card view allows you to show records as fully customizable cards, and easily switch between Card / List views.

thanks a lot to Brainweber Inc. for sponsoring this feature and letting us share it with community

Card View

This feature is implemented as a Mixin that you can simply apply to any of your grids (EntityGrid / DataGrid).


    var editItem = this.editItem.bind(this);

    new Serenity.CardViewMixin({
        grid: this,
        renderItem: (item, index) => React.createElement(CustomerCard, {
            item: item,
            editItem: editItem

We used React for card templates, so you can simply customize it to your needs and use any property available in your rows.

React Logo


    export class CustomerCard extends React.Component<CustomerCardProps> {
        render(): React.ReactNode {
            var item = this.props.item;
            return (
                            <td rowSpan={4} className="img">
                                <img src={getRandomImage(item)} />
                            <td className="name">
                                <a href="javascript:;" onClick={e => 
                                    {item.CustomerID} - {item.CompanyName}
                            <td className="contact">{item.ContactName}, 
                            <td className="country">{item.City}, {item.Country}</td>