How to: Present Data in Cards

• Dec 17, 2020

This example shows how to use data row templates (GridViewTemplates.DataRow) to create a custom cell layout within data rows.

The image below shows the result:

ASPX

<Templates>
             <DataRow>
                 <div style="padding:5px">
                     <table class="templateTable" cellpadding="2" cellspacing="1" >
                         <tr>
                             <td rowspan="4"><img src="CardView.aspx?Photo=
                             <%# Eval("EmployeeID")%>"/></td>
                             <td class="templateCaption">First Name</td>
                             <td><%# Eval("FirstName") %></td>
                             <td class="templateCaption">Last Name</td>
                             <td><%# Eval("LastName")%></td>

                         </tr>
                         <tr>
                             <td class="templateCaption">Title</td>
                             <td colspan="3"><%# Eval("Title")%></td>
                         </tr>
                         <tr>
                             <td class="templateCaption">Birth Date</td>
                             <td ><%# Eval("BirthDate")%></td>
                             <td class="templateCaption">Hire Date</td>
                             <td><%# Eval("HireDate")%></td>
                         </tr>
                         <tr>
                         <td colspan="4" style="white-space:normal"><%# Eval("Notes") %> </td>
                         </tr>
                     </table>
                 </div>
             </DataRow>
</Templates>