How to initialize GridView inside a modal popup using AjaxControlkit

Question

How to initialize GridView inside a modal popup using AjaxControlkit

Coreysan 1,811

When I click a button, AjaxControlkit launches a nice modal popup, and I have a GridView included which is inside an asp:Panel. Initially, it is empty, so you don't see anything - no header, no borders, no nothing.

Is there a way to get the GridView object to show, even though there's no data? A user will use a dropdown and then click another button, and that will populate the GridView, so that's all working. It's just the initial step I'd like to see something rather than a blank popup.

Is that possible?

        <asp:Panel ID="ModalPanel" runat="server" CssClass="MainBox" style="display:none;">
             <asp:GridView ID="lkupGridView" runat="server" AutoGenerateColumns="False" EmptyDataText="No data available.">
                 <Columns>
                     <asp:BoundField DataField="FileName" HeaderText="File Name" ItemStyle-Width="8%" ItemStyle-CssClass="ThePadding">
                     </asp:BoundField>
                 </Columns>
             </asp:GridView>
            <asp:Button ID="OKButton" runat="server" Text="Close" />
        </asp:Panel>

SurferOnWww 4,231 Reputation points

2025-03-29T01:16:35.4633333+00:00

When I click a button, AjaxControlkit launches a nice modal popup, and I have a GridView included which is inside an asp:Panel. Initially, it is empty, so you don't see anything - no header, no borders, no nothing.

Your code does not include the button and ModalPopup extender. Where is it?
SurferOnWww 4,231 Reputation points

2025-04-05T07:17:27.7333333+00:00

Corey Fleig = Coreysan ?

Problem displaying ASP.NET GridView inside an AjaxToolkit Popup

How to initialize GridView inside a modal popup using AjaxControlkit

1 answer

Your answer

SurferOnWww 4,231 Reputation points

2025-03-29T01:16:35.4633333+00:00

When I click a button, AjaxControlkit launches a nice modal popup, and I have a GridView included which is inside an asp:Panel. Initially, it is empty, so you don't see anything - no header, no borders, no nothing.

Your code does not include the button and ModalPopup extender. Where is it?
SurferOnWww 4,231 Reputation points

2025-04-05T07:17:27.7333333+00:00

Corey Fleig = Coreysan ?

Problem displaying ASP.NET GridView inside an AjaxToolkit Popup

How to initialize GridView inside a modal popup using AjaxControlkit

Answer 1

Is there a way to get the GridView object to show, even though there's no data?

Is your problem that the empty data row with text "No data available." does not appear although EmptyDataText="No data available." is set?

Note that the empty row and headers will not appear unless DataBind() is called with something other than null. I guess your code does not include it.

Shown below is a sample which can show the empty data row and headers when there is no data:

.aspx.cs

using System;
using System.Collections.Generic;

namespace WebForms1
{
    public partial class WebForm56 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            // Note that the empty row and headers will not appear
            // unless DataBind() is called with something other than null.
            GridView1.DataSource = new List<string>();
            GridView1.DataBind();
        }
    }
}

.aspx

<%@ Page Title="" Language="C#"
    MasterPageFile="~/Site.Master"
    AutoEventWireup="true"
    CodeBehind="WebForm56.aspx.cs"
    Inherits="WebForms1.WebForm56" %>

<%@ Register Assembly="AjaxControlToolkit"
    Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:Content ID="Content1"
    ContentPlaceHolderID="HeaderContent"
    runat="server">
    <style type="text/css">
        .modalBackground {
            background-color: Gray;
            filter: alpha(opacity=70);
            opacity: 0.7;
        }

        .modalPopup {
            background-color: White;
        }
    </style>
</asp:Content>

<asp:Content ID="Content2"
    ContentPlaceHolderID="MainContent"
    runat="server">
    
    <asp:ModalPopupExtender ID="ModalPopupExtender1"
        runat="server"
        TargetControlID="Button1"
        PopupControlID="Panel1"
        BackgroundCssClass="modalBackground"
        OkControlID="Button2"
        CancelControlID="Button3">
    </asp:ModalPopupExtender>

    <asp:Button ID="Button1"
        runat="server" Text="Show ModalPopup" />

    <asp:Panel ID="Panel1"
        runat="server"
        CssClass="modalPopup">
        
        <%-- ShowHeaderWhenEmpty property available on .NET 4+ --%>
        <asp:GridView ID="GridView1"
            runat="server"
            AutoGenerateColumns="False"
            EmptyDataText="No data available."
            ShowHeaderWhenEmpty="true">
            <Columns>
                <asp:BoundField HeaderText="First Name" DataField="FirstName" />
                <asp:BoundField HeaderText="Last Name" DataField="LastName" />
            </Columns>
            <EmptyDataRowStyle HorizontalAlign="Center" />
        </asp:GridView>

        <p style="text-align: center;">
            <asp:Button ID="Button2" runat="server" Text="OK" />
            <asp:Button ID="Button3" runat="server" Text="Cancel" />
        </p>
    </asp:Panel>
</asp:Content>

Result

enter image description here

Share via

How to initialize GridView inside a modal popup using AjaxControlkit

1 answer

Your answer