ModelPopup within a GridView to show item of corresponding row in client side

Question

1.00/5 (1 vote)

See more:

XML

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns ="false" DataKeyNames ="mail_id">
<Columns >
<asp:TemplateField HeaderText ="Sent to.." HeaderStyle-BackColor ="#666666">
<ItemTemplate >
<asp:LinkButton ID="LinkName" Text='<%#Eval("vend_name") %>' runat = "server"></asp:LinkButton>

    <div id ="popupDiv" style ="height :100; width :300; display :none">
    <asp:TextBox ID="TextBox3" runat="server" TextMode ="MultiLine" Text ='<%#Bind("mail_msg") %>'></asp:TextBox>
    <input id="Button1" type="button" value="button" />
    </div>

<asp:ModalPopupExtender ID="Model1" runat="server" PopupControlID ="popupDiv" TargetControlID ="LinkName">
</asp:ModalPopupExtender>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

//===========================================================
I have enclosed a ModelPopup and Popupwindow within <itemtemplate> of a Gridview.
For each row of vendor name in the Gridview I need to get corresponding Vendor_message in the popup window. But in the above code for all the row it is displaying Vendor_message of the first row. How can I get corresponding item in client-side.

Posted 22-Apr-11 17:09pm

SHAJANCHERIAN

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sandeep Mewara · Answer 1 · 2011-04-22T18:03:00

Solution 1

Here are couple of articles showing a modulpopup on click of a link button in a gridview. A full step-by-step implementation, look at them:
Display Master-Detail Data with the ModalPopup Extender and GridView[^]
Confirm GridView Deletes with the ModalPopupExtender[^]

Posted 22-Apr-11 18:03pm

Sandeep Mewara

Comments

SHAJANCHERIAN 23-Apr-11 3:51am

Hi Sandeep,
In the tutorial they are using two seperate query (ie One to bind the data to the Main-Gridview & Second to bind the data to child-gridview in the popup). I can resolve my problem in the same way . But it slightly effect performance. Because a post-back is occuring(ie. to execute the Child-detail-query)

In my case all the details are available in one query(ie.vendor_name and message).Vendor_names are displaying as linkButton in Gridview. when user click on the vendor name Message should display using Model-popup without postback. Can you modify you answer to meet my requirement.

SHAJANCHERIAN · Answer 2 · 2011-04-22T23:46:00

The solution I am providing here is working perfectly.
To get the details in the Popup I am performing a search in the dataset.
Can any one give much improved answer to avaoid this searching.
so that performance can be improved.
//========================================================================

XML

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>GridView With ModalPopUpExtender</title>
<style type="text/css">
    body
    {
        font: normal 12px auto "Trebuchet MS", Verdana;
        background-color: #ffffff;
        color: #4f6b72;
    }

    .popUpStyle
    {
        font: normal 11px auto "Trebuchet MS", Verdana;
        background-color: #ffffff;
        color: #4f6b72;
        padding:6px;
        filter: alpha(opacity=80);
        opacity: 0.8;
    }

    .drag
    {
         background-color: #dddddd;
         cursor: move;
         border:solid 1px gray ;
    }
</style>

</head>
<body>
    <form id="form1" runat="server">
    <div>

<cc1:ToolkitScriptManager id="akt1" runat="server"> </cc1:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns ="false" DataKeyNames ="mail_id">
        <Columns >
        <asp:TemplateField HeaderText="CustomerID">
        <ItemTemplate>
        <asp:LinkButton runat="server" ID="LinkButton1" Text='<%# Eval("mail_id") %>' OnClick="lnkCustDetails_Click" />
        <asp:TextBox ID="hiddenTxt" runat="server" Text='<%# Eval("mail_msg") %>' TextMode ="MultiLine" Visible ="false"></asp:TextBox>
        </ItemTemplate>
        </asp:TemplateField>
        </Columns>
</asp:GridView>

<asp:Button runat="server" ID="btnShowModalPopup" style="display:none"/>
<div id ="popupDiv" style ="height :100; width :300; display :none">
    <asp:Panel runat="Server" ID="panelDragHandle" CssClass="drag"> Hold here to Drag this Box</asp:Panel>
    <asp:TextBox ID="TextBox3" runat="server" TextMode ="MultiLine"></asp:TextBox> <br />
    <asp:Button ID="btnClose" runat="server" Text="Close" />
</div>

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
    TargetControlID="btnShowModalPopup"
    PopupControlID="popupDiv"
    BackgroundCssClass="popUpStyle"
    PopupDragHandleControlID="panelDragHandle"
    DropShadow="true"
    CancelControlID ="btnClose"/>

</ContentTemplate>
</asp:UpdatePanel>



    </div>
    </form>
</body>
</html>

//=============================================================================
public partial class _Default : System.Web.UI.Page
{
DataSet ds, DS_ViewState;
SqlDataAdapter da;

protected void Page_Load(object sender, EventArgs e)
{
string constr = System.Web.Configuration.WebConfigurationManager.
ConnectionStrings["sh_hb_dbConnectionString"].ConnectionString;
string sql = "SELECT *FROM tbl_Message";
SqlConnection connection = new SqlConnection(constr);
SqlCommand cmd = new SqlCommand(sql, connection);
cmd.CommandType = CommandType.Text;

ds = new DataSet();
DS_ViewState = new DataSet();
da = new SqlDataAdapter();
da.SelectCommand = cmd;

da.MissingSchemaAction = MissingSchemaAction.AddWithKey;
da.Fill(ds, "tbl_Message");
da.Fill(DS_ViewState, "tbl_Message1");

GridView2.DataSource = ds.Tables ["tbl_Message"];
GridView2.DataBind();
ViewState["keyds"] = ds;
}
protected void lnkCustDetails_Click(object sender, EventArgs e)
{
LinkButton lb = sender as LinkButton;
string usrID = lb.Text.ToString();
DS_ViewState = (DataSet)ViewState["keyds"];
DataRow dr = DS_ViewState.Tables[0].NewRow();
dr = DS_ViewState.Tables[0].Rows.Find(usrID);
TextBox3.Text = dr[4].ToString();
ModalPopupExtender1.Show();
}
}