Create image grid using ASP.Net DataList in C#

Check this code.

HTML

<style type="text/css">
    table td, table td * {
        vertical-align: top;
    }
</style>
<asp:DataList ID="dlImages" runat="server" RepeatLayout="Table" RepeatColumns="4" RepeatDirection="Horizontal"
    OnLoad="dlImages_Load">
    <ItemTemplate>
        <table>
            <tr valign="top">
                <td style="width: 50px;">
                    <table>
                        <tr>
                            <td>
                                <asp:Image ID="imagepost" runat="server" ImageUrl='<%#Eval("Path") %>' CssClass="imag" />
                                <asp:Button ID="btnShow" Text="" runat="server" OnClick="OnShow" Style="display: none;" /></td>
                            <td>
                                <asp:DataList ID="dlPostImages" runat="server" RepeatLayout="Table" RepeatColumns="4" RepeatDirection="Horizontal">
                                    <ItemTemplate>
                                        <asp:Image ID="imagepost" runat="server" ImageUrl='<%#Eval("Path") %>' CssClass="imag" />
                                    </ItemTemplate>
                                </asp:DataList>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </ItemTemplate>
</asp:DataList>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    function OpenDisplayAll(ele) {
        $(ele).closest('td').find('[id*=btnShow]').trigger('click');
    }
</script>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        string query = "SELECT TOP 4 '~/'+Path as 'Path' FROM tblFilePathTest ORDER BY Id";
        BindDataList(dlImages, GetData(query));
    }
}

protected void dlImages_Load(object sender, EventArgs e)
{
    if (dlImages.Items.Count <= 4)
    {
        (dlImages.Items[dlImages.Items.Count - 1].FindControl("imagepost") as Image).Attributes.Add("onclick", "OpenDisplayAll(this)");
        (dlImages.Items[dlImages.Items.Count - 1].FindControl("imagepost") as Image).Attributes.Add("style", "cursor:pointer");
    }
}

protected void OnShow(object sender, EventArgs e)
{
    string query = "SELECT '~/'+Path as 'Path' FROM tblFilePathTest ORDER BY Id";
    DataListItem item = (sender as Button).NamingContainer as DataListItem;
    DataList dlPost = (item.FindControl("dlPostImages") as DataList);
    BindDataList(dlPost, GetData(query));
    dlPost.Visible = true;
}

private void BindDataList(DataList dataList, DataTable dt)
{
    dataList.DataSource = dt;
    dataList.DataBind();
}

private DataTable GetData(string query)
{
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(conString))
    {
        SqlCommand cmd = new SqlCommand(query);
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataTable dt = new DataTable())
            {
                sda.Fill(dt);
                return dt;
            }
        }
    }
}