Mini Kabibi Habibi

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Templates.aspx.cs"
    Inherits="Shaping_Templates" %>
<asp:Content ContentPlaceHolderID="CustomHeadHolder" runat="server">
    <style type="text/css">
        table.treeListCard
        {
            background: #f5f5f5;
            border-collapse: collapse;
        }
        table.treeListCard td
        {
            border: solid 1px #cecece;
            padding: 4px;
            white-space: normal;
        }
        table.treeListCard td.name
        {
            background: #efefef;
            white-space: nowrap;
            width: 10%;
        }
        table.treeListCard img
        {
            border: 0;
        }
    </style>
</asp:Content>
<asp:Content ContentPlaceHolderID="ContentHolder" runat="Server">
    <script type="text/javascript">
    // <![CDATA[
        
        function showNotes(text) {
            notesPopup.SetContentHTML(text);
        }
        function loadNotes(id, refElement) {     
            notesPopup.Hide();
            notesPopup.ShowAtElement(refElement);
            notesPopup.SetContentHTML("Loading...");            
            treeList.PerformCustomDataCallback(id);
        }
    // ]]> 
    </script>
    <dx:ASPxTreeList ID="treeList" runat="server" AutoGenerateColumns="False" DataSourceID="AccessDataSource1"
        Width="100%" KeyFieldName="ID" ParentFieldName="ParentID" ClientInstanceName="treeList"
        OnCustomDataCallback="treList_CustomDataCallback">
        <Columns>
            <dx:TreeListDataColumn Caption="Fish Catalog" VisibleIndex="0" AllowSort="False" />
        </Columns>
        <Templates>
            <DataCell>
                <table class="treeListCard" style="width: 100%">
                    <tr>
                        <td rowspan="4" style="width: 10%">
                            <a href="javascript:;" onclick="loadNotes(<%# Eval("ID") %>, this)">
                                <dx:ASPxBinaryImage runat="server" ID="ASPxBinaryImage1" Value='<%# Eval("Picture") %>' /></a>
                        </td>
                        <td class="name">
                            Species No:
                        </td>
                        <td>
                            <%# Eval("Species_No") %>
                        </td>
                        <td class="name">
                            Length:
                        </td>
                        <td>
                            <%# Eval("Length") %>
                        </td>
                    </tr>
                    <tr>
                        <td class="name">
                            Common Name:
                        </td>
                        <td colspan="3">
                            <%# Eval("Common_Name") %>
                        </td>
                    </tr>
                    <tr>
                        <td class="name">
                            Species Name:
                        </td>
                        <td colspan="3">
                            <%# Eval("Species_Name") %>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4">
                            <a href="javascript:;" onclick="loadNotes(<%# Eval("ID") %>, this)">Show notes...</a>
                        </td>
                    </tr>
                </table>
            </DataCell>
        </Templates>
        <SettingsPager Mode="ShowPager" PageSize="5" />
        <Styles>
            <Cell>
                <Paddings PaddingTop="2px" PaddingBottom="2px" PaddingLeft="0px" PaddingRight="0px" />
            </Cell>
        </Styles>
        <ClientSideEvents CustomDataCallback="function(s, e) {	showNotes(e.result); }" />
    </dx:ASPxTreeList>
    <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/Fish.mdb"
        SelectCommand="SELECT * FROM [BioLife]"></asp:AccessDataSource>
    <dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" ClientInstanceName="notesPopup"
        HeaderText="Notes" AllowDragging="True" CloseAction="OuterMouseClick" Width="400px"
        PopupHorizontalAlign="LeftSides" PopupVerticalAlign="Below" />
</asp:Content>