card-view-react.md

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

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

CustomerGrid.ts:

    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.

CustomerCard.tsx:

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