So I have an asp.net GridView with a LinkButton in each row. I'd like this LinkButton to open up a dialog box with some human fillable fields in it.
My LinkButton inside the GridView appears to do nothing.
While troubleshooting I added a LinkButton outside of the GridView and that seems to work.
Can you help me figure out why my links inside the GridView do not work?
Code below:
protected void lnkEdit_Click(object sender, EventArgs e)
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "opendia", "opendialog();", true);
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="sp.aspx.cs" Inherits="OnlineApps.sp" %>
<%@ 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 id="Head2" runat="server">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<meta name="theme-color" content="#db5945" />
<link rel="apple-touch-icon" sizes="180x180" href="images/sp/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/sp/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/sp/favicon-16x16.png">
<link rel="manifest" href="images/sp/site.webmanifest">
<title>Strategic Plan Tracker</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="panel panel-default">
<div class="panel-heading"><b><a href="sp.aspx">Strategic Plan Tracker</a></b> - <a href="sp_actsum.aspx">Action Summary</a> - <a href="sp_cal.aspx">Calendar</a> - <a href="sp_hours.aspx">Weekly Workload</a> - <a href="main.aspx">Home</a></div>
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: "75%",
maxWidth: "700px",
padding: "15px",
});
});
function opendialog() {
var theDialog = $("#dialog").dialog({
autoOpen: false,
modal: true,
});
theDialog.dialog("open");
}
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" HeaderStyle-BackColor="#cccccc" AlternatingRowStyle-BackColor="#adffbb" AllowPaging="false" OnPageIndexChanging="OnPaging" PageSize="50" AllowSorting="true">
<RowStyle CssClass="RowStyle" />
<AlternatingRowStyle CssClass="AlternateRowStyle" />
<HeaderStyle CssClass="borderline" />
<Columns>
<asp:BoundField DataField="id" HeaderText="id" HtmlEncode="true" />
<asp:TemplateField>
<HeaderTemplate>
Owner
<asp:DropDownList ID="ddlOwnerF" runat="server" OnSelectedIndexChanged="FilterChanged" AutoPostBack="true" AppendDataBoundItems="true" Width="70px">
<asp:ListItem Text="ALL" Value="ALL"></asp:ListItem>
</asp:DropDownList>
</HeaderTemplate>
<ItemTemplate>
<div style="width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
<%# Eval("Owner") %>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Department
<asp:DropDownList ID="ddlDeptF" runat="server" OnSelectedIndexChanged="FilterChanged" AutoPostBack="true" AppendDataBoundItems="true" Width="100px">
<asp:ListItem Text="ALL" Value="ALL"></asp:ListItem>
</asp:DropDownList>
</HeaderTemplate>
<ItemTemplate>
<%# Eval("DeptText") %>
</ItemTemplate>
</asp:TemplateField>
<asp:HyperLinkField DataNavigateUrlFields="id" HeaderText="Project Name" DataNavigateUrlFormatString="sp_edit.aspx?id={0}" Target="_blank" DataTextField="ProjName" ItemStyle-Width="400px" />
<asp:TemplateField>
<HeaderTemplate>
Due Date
<asp:DropDownList ID="ddlDueDtF" runat="server" OnSelectedIndexChanged="FilterChanged" AutoPostBack="true" AppendDataBoundItems="true" Width="70px">
<asp:ListItem Text="ALL" Value="ALL"></asp:ListItem>
</asp:DropDownList>
</HeaderTemplate>
<ItemTemplate>
<%# Eval("DueDate") %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Hours" HeaderText="Hours" HtmlEncode="true" />
<asp:TemplateField>
<HeaderTemplate>
Status
<asp:DropDownList ID="ddlStatusF" runat="server" OnSelectedIndexChanged="FilterChanged" AutoPostBack="true" AppendDataBoundItems="true" Width="70px">
<asp:ListItem Text="ALL" Value="ALL"></asp:ListItem>
</asp:DropDownList>
</HeaderTemplate>
<ItemTemplate>
<div style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
<%# Eval("StatusText") %>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Resources" HeaderText="Resources" HtmlEncode="true">
<ItemStyle Width="300px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="Notes" HeaderText="Notes" HtmlEncode="false" ItemStyle-Width="300px">
<ItemStyle Width="300px"></ItemStyle>
</asp:BoundField>
<asp:TemplateField>
<HeaderTemplate>
% Complete
</HeaderTemplate>
<ItemTemplate>
<div style="width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: right">
<%# Eval("PcntComp") %>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="30px" HeaderText="Edit">
<ItemTemplate>
<%-- this link does not work--%>
<asp:LinkButton ID="lnkEdit" runat="server" data-toggle="dialog" data-target="#dialog" Text="Edit" OnClick="lnkEdit_Click"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<%--this link works--%>
<asp:LinkButton ID="lnkEdit" runat="server" Text="Test" OnClick="lnkEdit_Click"></asp:LinkButton>
<div id="dialog" title="Add/Edit">
<asp:TextBox ID="tbNotes" runat="server" TextMode="multiline" Style="resize: none" Width="500px" Height="100px"></asp:TextBox>
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</form>
</body>
</html>
Any advice would be greatly appreciated
