Here’s the ASP.NET code for this utility. The following section is the code behind file that shows how data is selected (you could use any method to databind the gridview) and copy the selected item details to the page. The item which took time to figure out is the ability to Show the ModalPopupExtender from the server side…that’s not obvious from normal usage. You must add the Ajax Control Toolkit to use the extender. When the Search button is clicked, the gridview is populated server-side, then the ModalPopupExtender called to show results. The RegisterStartupScript function is used to create a client side script which sets the details.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;

namespace Techybit
{
    public partial class gridpopup : System.Web.UI.Page
    {

        protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
        {
            // When user selects an item, pass item details to client side script
            string name = ((GridView)sender).SelectedRow.Cells[1].Text;
            string description = ((GridView)sender).SelectedRow.Cells[2].Text;
            string price = ((GridView)sender).SelectedRow.Cells[3].Text;
            string func = "FillData("" + name + "", "" + description + "", "" + price + "");";
            // Use ScriptManager since using AJAX to work properly
            ScriptManager.RegisterStartupScript(this, this.GetType(), "test", func, true);
        }

        protected void btnSearch_Click(object sender, EventArgs e)
        {
            groceryDataContext dc = new groceryDataContext();

            // Search data and bind to gridview using LINQ
            var results = from p in dc.Products
                          where p.Name.StartsWith(TextBox1.Text.Trim())
                          select new { p.Name, p.Description, p.Price };

            gvResults.DataSource = results;
            gvResults.DataBind();

            // Sleep for a while to simulate a lengthy server side operation
            System.Threading.Thread.Sleep(2000);

             // Force the modal popup panel to show on client from server holding gridview results
            pnlPopup1_ModalPopupExtender.Show();          

        }
    }
}

Here is the HTML markup for this page.


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="gridpopup.aspx.cs" Inherits="Techybit.gridpopup" %>

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



    
    <%--    Include jQuery and CSS code  --%>

    

    

    

    


    
Back to applications page       Back to Techybit main page

Techybit Ajax Gridview Popup Example
<%-- Add AJAX update progress control to indicate operation may take time --%>
Please Wait... wait
This page illustrates a modal popup that shows the results of a search using the Ajax Control Toolkit and jQuery. The UI is blocked until the user selects something. When the user selects an item, the item details are displayed below the search box. Leave the searchbox blank to search for all items.
<%-- Add AJAX update panel --%>
_
The item details are:
 
  Name:  
  Description:  
  Price  
<%-- This panel is what "pops up" when search button is clicked --%>


<%-- Wire up the ModalPopupExtender to invisible button --%>