Click here to Skip to main content
15,887,585 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
I have following tables in my database:

**SuggestionsLog Table:** ID, Title, Description.

**Employee Table:** Username, Name

**Divisions Table:** DivisionCode, DivisionName

I want to show table that consists of SuggestionID, SuggestionTitle, EmployeeName and DivisionName only and when the user clicks on the SuggestionTitle, a pop-up window will be displayed with the description of the suggestion.

Since I am ASP.NET beginner developer, I tried to follow one of the tutorials to get it but I failed.

What I did is the following:

**ASP.NET Code:**
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:GridView ID="GridView1" runat="server" AllowPaging="True"
            AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="ID"
            DataSourceID="SqlDataSource1" OnRowDataBound="GridView1_RowDataBound">
            <Columns>
                <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False"
                    ReadOnly="True" SortExpression="ID" />
                <asp:TemplateField HeaderText="Title">
                    <ItemTemplate>
                        <asp:LinkButton runat="server" ID="lnkSuggestionTitle"
                                        Text='<%#Eval("Title") %>'
                                        OnClick="lnkSuggestionTitle_Click">
                                        </asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
                <%--<asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />--%>
                <asp:BoundField DataField="Description" HeaderText="Description"
                    SortExpression="Description" />
                <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                <asp:BoundField DataField="Username" HeaderText="Username"
                    SortExpression="Username" />
                <asp:BoundField DataField="DivisionName" HeaderText="Division"
                    SortExpression="DivisionName" />
            </Columns>
        </asp:GridView>

        <asp:Button runat="server" ID="btnModalPopUp" style="display:none" />

        <AjaxToolkit:ModalPopupExtender ID="modalPopUpExtender1"
                                         runat="server" TargetControlID="btnModalPopUp" PopupControlID="pnlPopUp" BackgroundCssClass="modalBackground"
                                        OkControlID="btnOk" X="20" Y="100">
        </AjaxToolkit:ModalPopupExtender>

        <asp:Panel runat="server" ID="pnlPopUp" CssClass="confirm-dialog">
            <asp:GridView ID="GridView2" runat="server">
            </asp:GridView>
        </asp:Panel>

        </ContentTemplate>
        </asp:UpdatePanel>
        <br />

        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:testConnectionString %>"
            SelectCommand="SELECT     dbo.SafetySuggestionsLog.ID, dbo.SafetySuggestionsLog.Title, dbo.SafetySuggestionsLog.Description, dbo.employee.Name, dbo.SafetySuggestionsLog.Username,
                      dbo.Divisions.DivisionName
FROM         dbo.employee INNER JOIN
                      dbo.SafetySuggestionsLog ON dbo.employee.Username = dbo.SafetySuggestionsLog.Username INNER JOIN
                      dbo.Divisions ON dbo.employee.DivisionCode = dbo.Divisions.SapCode">
        </asp:SqlDataSource>



**Code-Behind:**
C#
protected void lnkSuggestionTitle_Click(object sender, EventArgs e)
    {
        LinkButton lnkSuggestionTitle = sender as LinkButton;
        string strSuggestionTitle = lnkSuggestionTitle.Text;

        string strConnectionString = ConfigurationManager.ConnectionStrings["testConnectionString"].ConnectionString;
        string strSelect = "SELECT ID, Title, Description FROM  dbo.SafetySuggestionsLog";
        SqlConnection sqlCon = new SqlConnection();
        sqlCon.ConnectionString = strConnectionString;
        SqlCommand cmdSuggestionDetails = new SqlCommand();
        cmdSuggestionDetails.Connection = sqlCon;
        cmdSuggestionDetails.CommandType = System.Data.CommandType.Text;
        cmdSuggestionDetails.CommandText = strSelect;
        cmdSuggestionDetails.Parameters.AddWithValue("@Title", strSuggestionTitle);
        sqlCon.Open();

        SqlDataReader dReader = cmdSuggestionDetails.ExecuteReader();
        GridView1.DataSource = dReader;
        GridView1.DataBind();
        sqlCon.Close();
        modalPopUpExtender1.Show();
    }


Everything is going well and smooth, but in the website, when I clicked on one of the titles, I did not get the ModalPopUp. Also, I got an error notification at the left bottom corner in the Internet Explorer browser, which when I opened it, it gave me the following description:

**

Sys.ArgumentNullException: Value cannot be null. Parameter name: elements

**

I don't know why this is happened. Any help please?
Posted
Updated 4-Feb-12 18:41pm
v3

I have corrected your code. The correction is to place the modalpopupextender and Panel just beside the TargetControlId in the same <itemtemplate...> so that each LinkButton will have its own Popup.

ASP.NET
<asp:updatepanel id="UpdatePanel1" runat="server" xmlns:asp="#unknown">
        <contenttemplate>
            <asp:gridview id="GridView1" runat="server" allowpaging="True">
                AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="ID" 
                DataSourceID="SqlDataSource1" OnRowDataBound="GridView1_RowDataBound">
                <columns>
                    <asp:boundfield datafield="ID" headertext="ID" insertvisible="False">
                        ReadOnly="True" SortExpression="ID" />
                    <asp:templatefield headertext="Title">
                        <itemtemplate>
                            <asp:linkbutton runat="server" id="lnkSuggestionTitle">
                                            Text='<%#Eval("Title") %>' 
                                            OnClick="lnkSuggestionTitle_Click">
                                            </asp:linkbutton>
<ajaxtoolkit:modalpopupextender id="modalPopUpExtender1" xmlns:ajaxtoolkit="#unknown">
                                             runat="server" TargetControlID="lnkSuggestionTitle" PopupControlID="pnlPopUp" BackgroundCssClass="modalBackground" 
                                            OkControlID="btnOk" X="20" Y="100">
            </ajaxtoolkit:modalpopupextender>
    
            <asp:panel runat="server" id="pnlPopUp" cssclass="confirm-dialog">
                <asp:gridview id="GridView2" runat="server">
                </asp:gridview>
            </asp:panel>
                        </itemtemplate>
                    </asp:templatefield>
                    <%--<asp:boundfield datafield="Title" headertext="Title" sortexpression="Title" />--%>
                    <asp:boundfield datafield="Description" headertext="Description">
                        SortExpression="Description" />
                    <asp:boundfield datafield="Name" headertext="Name" sortexpression="Name" />
                    <asp:boundfield datafield="Username" headertext="Username">
                        SortExpression="Username" />
                    <asp:boundfield datafield="DivisionName" headertext="Division">
                        SortExpression="DivisionName" />
                </asp:boundfield></asp:boundfield></asp:boundfield></asp:boundfield></columns>
            </asp:gridview>
            
            </contenttemplate>
            </asp:updatepanel>
            <br /> 
    
            <asp:sqldatasource id="SqlDataSource1" runat="server" xmlns:asp="#unknown">
                ConnectionString="<%$ ConnectionStrings:testConnectionString %>" 
                SelectCommand="SELECT     dbo.SafetySuggestionsLog.ID, dbo.SafetySuggestionsLog.Title, dbo.SafetySuggestionsLog.Description, dbo.employee.Name, dbo.SafetySuggestionsLog.Username, 
                          dbo.Divisions.DivisionName
    FROM         dbo.employee INNER JOIN
                          dbo.SafetySuggestionsLog ON dbo.employee.Username = dbo.SafetySuggestionsLog.Username INNER JOIN
                          dbo.Divisions ON dbo.employee.DivisionCode = dbo.Divisions.SapCode">
            </asp:sqldatasource>
 
Share this answer
 
Refer this[^]. Here you can get the sample source code as well to help you better.

Answer to you updated question you are getting this error as the error message shows you have defined both DataSource as well as DataSourceID for the GridView1 that you are using. Just comment the DataSourceID if you are providing a datatable as a source to DataSource property of the grid. I mean change this

ASP.NET
<asp:GridView ID="GridView1" runat="server" AllowPaging="True"
                AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="ID"
                DataSourceID="SqlDataSource1" OnRowDataBound="GridView1_RowDataBound">


to this:

ASP.NET
<asp:GridView ID="GridView1" runat="server" AllowPaging="True"
                AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="ID"
                OnRowDataBound="GridView1_RowDataBound">



hope it helps :)
 
Share this answer
 
v3
Comments
matrix388 5-Feb-12 0:24am    
Thanks and please see my updated question
Uday P.Singh 5-Feb-12 0:38am    
Please see the updated answer
matrix388 5-Feb-12 0:42am    
Yes, you are right. I really appreciate your help. By the way, I got another error now which I can't be able to figure out its reason
CSS
/*
Credit: http://www.templatemo.com
*/

body {
    margin: 0;
    padding: 0;
    color: #6a717c;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    line-height: 1.4em;

}

#home {
    background:  #000000 url(../images/templatemo_body.jpg);
    background-repeat: repeat-x;
    background-position: top;
}

#sub {
    background: #bfc5ce url(../images/templatemo_body_sub.jpg);
    background-repeat: repeat-x;
    background-position: top;
}

a, a:link, a:visited {
    color: #08122a;
    font-weight: 700;
    text-decoration: underline;
    font-size: 11px;
}

a:hover {
    text-decoration: none;
}

a.more {
    display: block;
    width: 122px;
    height: 32px;
    line-height: 32px;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    background: url(../images/templatemo_button.jpg) no-repeat top center;
    color: #bfc5ce;
}

a.more:hover {
    color: #fff;
    background: url(../images/templatemo_button_hover.jpg);
}

p {
    margin: 0 0 10px 0;
    padding: 0;
}

img {
    border: none;
}

blockquote {
    font-style: italic;
    margin: 0 0 0 10px;
}

cite {
    font-weight: bold;
    color:#08122a;
}

cite span {
    color: #08122a;
}

em {
    color: #08122a;
    font-size: 11px;
    font-weight: 700;
}

h1, h2, h3, h4, h5, h6 { color: #000; font-weight: normal; }
h1 { font-size: 34px; margin: 0 0 20px; padding: 5px 0 }
h2 { font-size: 28px; margin: 0 0 15px; padding: 5px 0 10px }
h3 { font-size: 24px; margin: 0 0 15px; padding: 0 0 10px; }
h4 { font-size: 18px; margin: 0 0 15px; padding: 0; }
h5 { font-size: 16px; margin: 0 0 10px; padding: 0;  }
h6 { font-size: 14px; margin: 0 0 5px; padding: 0; }

.cleaner { clear: both }
.h10 { height: 10px }
.h20 { height: 20px }
.h30 { height: 30px }
.h40 { height: 40px }
.h50 { height: 50px }
.h60 { height: 60px }

.float_l { float: left }
.float_r { float: right }

.image_wrapper {
    display: inline-block;
    padding: 4px;
    border: 1px solid #d3d7dc;
    background: #a3abb8;
}

.image_fl {
    float: left;
    margin: 3px 30px 0 0;
}

.image_fr {
    float: right;
    margin: 3px 0 0 30px;
}

.image_frame {
    position: relative;
    width: 300px;
    height: 131px;
}

.image_frame img {
    margin: 10px;
    width: 280px;
    height: 110px;
}

.image_frame span {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 131px;
    background: url(../images/templatemo_image_frame.png) no-repeat;
}

.templatemo_list {
    margin: 0 0 10px 10px;
    padding: 0;
    list-style: none;
}

.templatemo_list li {
    color:#08122a;
    margin: 0;
    padding: 0 0 5px 20px;
    background: url(../images/templatemo_list.jpg) no-repeat scroll 0 5px;
}

.templatemo_list li a {
    color: #08122a;
    font-weight: normal;
    text-decoration: none;
}

.templatemo_list li a:hover {
    text-decoration: underline;
}

#templatemo_wrapper {
    width: 960px;
    padding: 0 10px;
    margin: 0 auto;
}

#templatmeo_header {
    width: 930px;
    height: 60px;
    padding: 15px;
    background: url(../images/templatemo_header.jpg) no-repeat;
}

#site_title {
    float: left;
    width: 235px;
    height: 60px;
}

#site_title h1 {
    margin: 0;
    padding: 0;
}

#site_title h1 a {
    display: block;
    width: 215px;
    height: 60px;
    margin: 0 10px;
    color: #fff;
    outline: none;
    text-indent: -10000px;
    background: url(../images/templatemo_logo.jpg) no-repeat top center;
}

/* menu */

#templatemo_menu {
    float: right;
    width: 660px;
    height: 40px;
    padding: 10px 0;
}

#templatemo_menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#templatemo_menu ul li {
    padding: 0;
    margin: 0;
    display: inline;
}

#templatemo_menu ul .last {
    background: none;
}

#templatemo_menu ul li a {
    float: left;
    display: block;
    width: 120px;
    height: 40px;
    line-height: 40px;
    margin-right: 5px;
    font-size: 13px;
    color: #a2a8b8;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    outline: none;
    border: none;
    background: url(../images/templatemo_menu_border.png) center center no-repeat;
}

#templatemo_menu ul li a:hover, #templatemo_menu ul .current {
    color: #fff;
    background: url(../images/templatemo_menu_hover.jpg) center center no-repeat;
}

/* end of menu */

#templatemo_middle {
    clear: both;
    width: 100%;
    height: 100%;
    padding: 10px 5px 0;
    overflow: hidden;
    font-size: 14px;
    color: #f4e9d9;
    line-height: 50px;
    background: url(../images/templatemo_middle.jpg) center top;
}

#templatemo_middle_sub {
    clear: both;
    width: 930px;
    height: 190px;
    padding: 40px 15px 100;
    overflow: hidden;
    font-size: 14px;
    color: #f4e9d9;
    line-height: 30px;
}

#mid_title {
    font-size: 34px;
    line-height: 38px;
    font-weight: 400;
    color: #000000;
    margin-bottom: 20px; /* text-shadow: 2px 2px 4px #000 */;
}

#mid_left {
    float:left;
    width: 400px;
}

#mid_slider {
    position:relative;
    float: right;
    width: 450px;
    height: 280px;
    padding: 0 0 40px;
}

#mid_slider span {
    position: absolute;
    top: 165px;
    left: 0;
    width: 450px;
    height: 185px;
    background: url(../images/templatemo_slider_frame.png) no-repeat;
    z-index: 10000;
}

/*  w w w . t e m p l a t e m o . c o m     */

#slider1 {
    position: absolute;
    width: 450px;
    height: 150px;
    overflow: hidden;
    top: 16px;
    left: 0px;
}

#paginate-slider1 {
    position: absolute;
    bottom: 20px;
    right: 100px;
}

#templatemo_middle p, #templatemo_middle_sub p {
    margin-bottom: 20px;
    color: #757e8a;
    font-size: 16px;
}

#templatemo_footer_wrapper {
    clear: both;
    background: #8e97a4;
    border-top: 5px solid #d5d9e0;
    width: 100%;
}

#templatemo_footer {
    width: 960px;
    margin: 0 auto;
    padding: 20px 10px;
    color: #40464f;
}

#templatemo_footer a {
    text-decoration: none;
}

#templatemo_footer .footer_list {
    margin: 0;
    padding: 0;
    list-style: none;
}

#templatemo_footer .footer_list li {
    border-bottom: 1px dashed #404040;
}

#templatemo_footer .footer_list li a {
    font-weight: normal;
    text-decoration: none;
}

#templatemo_footer h4 {
    color: #08122a;
    padding-bottom: 10px;
    background: url(../images/templatemo_h4_divider.jpg) repeat-x bottom;
}

#templatemo_copyright_wrapper {


    background: url('../images/templatemo_footer.jpg') repeat-x 50% top;
    width: 100%;
    height: 61px;
}

#templatemo_copyright {
    width: 960px;
    margin: 0 auto;
    padding: 20px 10px 15px;
    color: #3a4f83;
    text-align: center;
    height: 36px;
}

#templatemo_copyright  a {
    color: #607fcb;
    text-decoration: none;
}
 
Share this answer
 
Please kindly refer to expanse example given in the site.. It has modal examples too..
 
Share this answer
 
Comments
bbirajdar 5-Feb-12 3:33am    
Please don't post the comments in solutions section.

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900