can someone plz tell me how to show data in gridview without postback when i enter some text in textbox .... i mean onkeyup event without postback
with postback i am able to do the same in asp.net using C#...
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function runPostback() {
document.forms["form1"].submit();
document.getElementById("TextBox1").focus();
}
function SetDelay() {
setTimeout("runPostback()", 100);
}
</script>
<style type="text/css">
.style1
{
width: 100%;
}
FixedHeader {
position: absolute;
font-weight: bold;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<%--<asp:TextBox ID="TextBox1" runat="server"
onkeyup="javascript:_doPostBack('TextBob1',' ')" onfocus="this.value = this.value;"
AutoPostBack="true" ontextchanged="TextBox1_TextChanged" ></asp:TextBox>
<br />
--%>
<asp:UpdatePanel ID="gridsearchUpdatePanel" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="TextBox1" />
</Triggers>
<ContentTemplate>
<asp:TextBox ID="TextBox1" onkeyup="SetDelay();" runat="server" Width="490px"></asp:TextBox>
<div id="gridDiv" style="max-height:190px; overflow:auto; max-width:495px; ">
<asp:GridView ID="SearchGridView" runat="server" AutoGenerateColumns="False"
HeaderStyle-CssClass="FixedHeader" HeaderStyle-BackColor="YellowGreen"
DataSourceID="SearchMembersSqlDataSource" Width="476px" CellPadding="3"
GridLines="Horizontal" BackColor="White" BorderColor="#E7E7FF"
BorderStyle="None" BorderWidth="1px" ShowHeader="False" >
<AlternatingRowStyle BackColor="#F7F7F7" />
<Columns>
<asp:BoundField DataField="id" HeaderText="id" SortExpression="id" />
<asp:BoundField DataField="vname" HeaderText="vname" SortExpression="vname" />
<asp:BoundField DataField="vemail" HeaderText="vemail"
SortExpression="vemail" />
<asp:BoundField DataField="vpassword" HeaderText="vpassword"
SortExpression="vpassword" />
</Columns>
<FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7"
Wrap="True" />
<PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />
<RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
<SortedAscendingCellStyle BackColor="#F4F4FD" />
<SortedAscendingHeaderStyle BackColor="#5A4C9D" />
<SortedDescendingCellStyle BackColor="#D8D8F0" />
<SortedDescendingHeaderStyle BackColor="#3E3277" />
</asp:GridView>
</div>
<asp:SqlDataSource ID="SearchMembersSqlDataSource" runat="server"
ConnectionString="<%$ ConnectionStrings:DemoDBConnectionString %>"
SelectCommand="prcAdvanceSearchUser" SelectCommandType="StoredProcedure">
<SelectParameters>
<asp:ControlParameter ControlID="TextBox1" Name="username" PropertyName="Text" Type="String" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Is there any way of doing it without postback ???
You can try changing the display style of the DIV layer which is holding the GridView.
Modify the TextBox
<asp:TextBox ID="TextBox1" onkeyup="OnKeyUp_TextBox();" runat="server" Width="490px"></asp:TextBox>
Also the script function to be called
function OnKeyUp_TextBox() {
var oGridDIV = document.getElementById("gridDiv");
if(oGridDIV != null) {
oGridDIV.display = "block"; // display the DIV layer with gridview
// oGridDIV.display = "none"; // hide the DIV layer with gridview
}
}
ANd finally the style of the DIV layer holding the GridView
<div id="gridDiv" style="max-height:190px; overflow:auto; max-width:495px; display:none;">
Related
I cannot figure out how to use SqlDataSource.Update() in an UpdatePanel to avoid a page refresh. Here is the application structure:
Div click event calls ASP:Button > ASP:Button OnClick event calls SqlDataSource.Update() code behind > DB column is updated
I am trying to do all this without refreshing the page. Here is my code:
Default.aspx:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" EnablePartialRendering="true"/>
<asp:Timer ID="Timer1" runat="server" Interval="10000" OnTick="Timer1_Tick" Enabled="True" />
<div class="square" id="myId" runat="server">
<div class="content">
<div class="table">
<div class="table-cell">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
<asp:AsyncPostBackTrigger ControlID="myBtn" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Button ID="myBtn" runat="server" Text="Button" OnClick="my_Click" />
<p id="MyText" class="p">Unavailable for Dispatch</p>
<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataSourceID="SqlDataSource1" CssClass="Grid" RowStyle-HorizontalAlign="Center" DataKeyNames="PhysicalAddress">
<Fields>
<asp:BoundField DataField="OwnerName" HeaderText="OwnerName" ShowHeader="False" SortExpression="OwnerName">
<ControlStyle BorderStyle="None" />
<ItemStyle BorderStyle="None" />
</asp:BoundField>
<asp:BoundField DataField="Building" HeaderText="Building" ShowHeader="False" SortExpression="Building" ItemStyle-CssClass="building">
<ControlStyle BorderStyle="None" />
<ItemStyle BorderStyle="None" />
</asp:BoundField>
<asp:BoundField DataField="TimeOn" HeaderText="TimeOn" ShowHeader="False" SortExpression="TimeOn">
<ControlStyle BorderStyle="None" />
<ItemStyle BorderStyle="None" />
</asp:BoundField>
<asp:BoundField DataField="IPAddress" HeaderText="IPAddress" ShowHeader="False" SortExpression="IPAddress" ItemStyle-CssClass="hide">
<ControlStyle BorderStyle="None" />
<ItemStyle BorderStyle="None" />
</asp:BoundField>
<asp:BoundField DataField="PhysicalAddress" HeaderText="PhysicalAddress" ShowHeader="False" ReadOnly="True" SortExpression="PhysicalAddress" ItemStyle-CssClass="hide">
<ItemStyle CssClass="hide" />
</asp:BoundField>
<asp:BoundField DataField="Available" HeaderText="Available" ShowHeader="False" SortExpression="Available" ItemStyle-CssClass="hide">
<ItemStyle CssClass="hide" />
</asp:BoundField>
</Fields>
<RowStyle HorizontalAlign="Center" />
</asp:DetailsView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyDbConnectionString %>" SelectCommand="SELECT [OwnerName], [Building], [TimeOn], [IPAddress], [PhysicalAddress], [Available] FROM [MyDb] WHERE ([OwnerName] = #OwnerName)" UpdateCommand="UPDATE [MyDb] SET [Available] = CASE WHEN Available = '0' THEN '1' ELSE '0' END WHERE ([OwnerName] = #OwnerName)"> <SelectParameters> <asp:Parameter DefaultValue="My Name" Name="OwnerName" Type="String" /> </SelectParameters> <UpdateParameters> <asp:Parameter Name="OwnerName" /> </UpdateParameters> </asp:SqlDataSource>
jQuery Div click event:
$('#myId').on('click', (function (clickEvent) {
document.getElementById("myBtn").click();
})
)
Default.aspx.cs
protected void my_Click(object sender, EventArgs e)
{
SqlDataSource1.UpdateParameters["OwnerName"].DefaultValue = "My Name";
SqlDataSource1.Update();
Response.Redirect(Request.Url.AbsoluteUri);
}
Bear in mind that all of this does work, but not without refreshing the entire page after ADO.NET event. Here is the event Output:
Thank you for any advice.
I looked at my event output posted above and answered my own question.
I changed my code-behind to:
protected void my_Click(object sender, EventArgs e) {
SqlDataSource1.UpdateParameters["OwnerName"].DefaultValue = "My Name";
SqlDataSource1.Update();}
...and of course I am no longer called the Response.Redirect. It is working as expected now.
Thank you!
this is my project, i am using visual studio 2010 and my coding language is vb. I am new to this and it will be safe to say that i don't know much of it yet.
I have a login page where the head of department enters his detail(employee number, employee name), selects his department and submits the information to see the result in other web form i.e all the employees that are under his department out of all the employees working for the company.
Because i don't know the code, i am getting all the employees of every department in the gridview instead of getting the employees for the department that was selected from the dropdown list.
here is my code for the first page
<%# Page Language="VB" AutoEventWireup="false" CodeFile="login.aspx.vb" Inherits="login" %>
<!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></title>
<style type="text/css">
.style1
{
width: 1179px;
height: 106px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<img alt="iocl" class="style1" src="Images/materials_hrd.bmp" /><br />
<br />
<br />
<br />
</div>
<asp:Label ID="Label1" runat="server" Text="Employee Name"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<br />
<asp:Label ID="Employee_Number" runat="server" Text="Employee Number"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<br />
-<br />
<asp:Label ID="Label2" runat="server" Text="Department"></asp:Label>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>Information Systems</asp:ListItem>
<asp:ListItem>Human Resources</asp:ListItem>
<asp:ListItem>Resource & Development</asp:ListItem>
<asp:ListItem>Finance</asp:ListItem>
<asp:ListItem>Pipelines</asp:ListItem>
<asp:ListItem>Marketing</asp:ListItem>
</asp:DropDownList>
<br />
<br />
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Submit" />
</form>
</body>
</html>
And this is the second page's code
<%# Page Language="VB" AutoEventWireup="false" CodeFile="HODLogin.aspx.vb" Inherits="HODLogin" %>
<!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></title>
<style type="text/css">
.style1
{
width: 1259px;
height: 105px;
margin-top: 0px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<br />
<img alt="iocl" class="style1" src="Images/materials_hrd.bmp" /><br />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
CellPadding="4" DataKeyNames="ID" DataSourceID="SqlDataSource1"
ForeColor="#333333" GridLines="None" Height="195px" ShowHeaderWhenEmpty="True"
Width="1125px">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False"
ReadOnly="True" SortExpression="ID" />
<asp:BoundField DataField="Employee Number" HeaderText="Employee Number"
SortExpression="Employee Number" />
<asp:BoundField DataField="Employee Name" HeaderText="Employee Name"
SortExpression="Employee Name" />
<asp:BoundField DataField="Department" HeaderText="Department"
SortExpression="Department" />
<asp:BoundField DataField="Grade" HeaderText="Grade" SortExpression="Grade" />
<asp:BoundField DataField="Email" HeaderText="Email" SortExpression="Email" />
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString11 %>"
ProviderName="<%$ ConnectionStrings:ConnectionString11.ProviderName %>"
SelectCommand="SELECT * FROM [employee database]"></asp:SqlDataSource>
<br />
<asp:Label ID="lblempno" runat="server"
Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Submit" />
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Please tell me the process and the code and also where to put it, i am not very familiar with all this. Its kind of an emergency.
You can just store the selected item text in onw variable, like the below:
dim selText as string = DropDownList1.SelectedItem.Text
and on the click of submit button, perform your required tasks and then redirect page to another page along with the department name. Like the below code:
Response.Redirect("Page2.aspx?department=" + selText)
and on the second page i.e. Page2.aspx, just receive this value in query string, using below code.. wherever it is necessary either on page load or at your required place.
If Request.QueryString("department") <> Nothing Then
dim departmt as string = Request.QueryString("department")
End If
And use the above variable's value in your database query and get the related data to the department selected in the previous form.
I hope it will help you. :)
You can also save selected item text in Session. Afterward you can get this value from any page in your project:
Session("department") = DropDownList1.SelectedItem.Text
You also can use this value directly in your SqlDataSource on Page2:
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString11 %>"
ProviderName="<%$ ConnectionStrings:ConnectionString11.ProviderName %>"
SelectCommand="SELECT * FROM [employee database] WHERE Department LIKE #depart">
<SelectParameters>
<asp:SessionParameter DefaultValue="%" Name="depart" SessionField="user"
Type="string" />
</SelectParameters>
</asp:SqlDataSource>
I have a submit button that inserts user entered data into a database. It was working perfectly fine until I migrated the project to the host server. The select query is still functional and displaying my data in the GridView (I checked by manually inserting some data into the database on the host server), I am unable to insert or delete data via the client-side page. It's an access database and I am connecting to it using the Visual Studio AccessDataSource.
Also, I don't receive any errors when loading the page or when I hit submit, its just that nothing happens.
Here is my code:
<%# Page Language="VB" AutoEventWireup="false" CodeFile="jotest.aspx.vb" Inherits="jotest" %>
<!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></title>
<script language="javascript" type="text/javascript">
<!--
function imposeMaxLength(Object, MaxLen) {
return (Object.value.length <= MaxLen);
}
-->
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/login.mdb"
DeleteCommand="DELETE FROM tblComments WHERE ID = #ID"
InsertCommand="INSERT INTO tblComments(comment, commentor_name, comment_date) VALUES (#comment, #commentor_name, #comment_date)"
SelectCommand="SELECT ID, commentor_name, comment, comment_date FROM tblComments">
<InsertParameters>
<asp:Parameter Name="commentor_name" />
<asp:Parameter Name="comment" />
<asp:Parameter Name="comment_date" />
<asp:Parameter Name="ID" />
</InsertParameters>
<DeleteParameters>
<asp:Parameter Name="ID" />
</DeleteParameters>
</asp:AccessDataSource>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="position: absolute; top: 50px; left: 600px;">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="AccessDataSource1" CellPadding="4" ForeColor="#333333" GridLines="None" AllowSorting="True">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:BoundField DataField="comment" HeaderText="Name" SortExpression="comment" ItemStyle-Width="80px" />
<asp:BoundField DataField="commentor_name" HeaderText="Comment" SortExpression="commentor_name" ItemStyle-Width="300px" />
<asp:BoundField DataField="comment_date" HeaderText="Date" SortExpression="date" ItemStyle-Width="175px" />
<asp:CommandField ShowDeleteButton="True" />
</Columns>
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
</div>
<br />
<asp:FormView ID="FormView1" runat="server" DataSourceID="AccessDataSource1" DefaultMode="Insert">
<InsertItemTemplate>
Name:<asp:TextBox ID="commentor_nameTextBox" runat="server" Text='<%# Bind("commentor_name") %>'></asp:TextBox>
<br />
Comment:<asp:TextBox ID="txtComments" runat="server" onkeypress="return imposeMaxLength(this, 150);" Text='<%# Bind("comment") %>' TextMode="MultiLine" Rows="4" Columns="50"></asp:TextBox>
<br />
<asp:HiddenField ID="hidTimeDate" runat="server" Value='<%# Bind("comment_date") %>' />
<asp:Button ID="butSubmit" runat="server" CommandName="Insert" Text="Submit" />
</InsertItemTemplate>
</asp:FormView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Make sure the account that is accessing the file has read and write access on the host server folder where the mdb file is located.
I have two imagebuttons which are associated with a modalpopupextender. When I click imagebutton1, it opens up the panel and within that panel there is a grid which loads with the information. However, when I click Imagebutton2 it opens up the panel but does not display the gridview even though that gridview tag is under that panel.
I am pretty new with web, please help. Thank You. Please find the code below:
<asp:Panel ID="PNL" ScrollBars="Auto" runat="server" Style="border: 2px solid Black; display: none; width: auto;
background-color: White; padding: 20px; text-align: center;" Height="444">
<asp:Label ID="LabelCount" runat="server" Text="Label" Font-Size="Large"
style="text-align: center"></asp:Label>
<asp:Button ID="ButtonOK" Text="OK" runat="server" />
<%-- Area for keeping POPUP grid ot window or picture DO NOT PUT UNDER TABLE Taj 3-Jan-2010--%>
<asp:GridView ID="gvUsersWHYME" runat="server" BackColor="White" BorderColor="#010101"
BorderStyle="None" CaptionAlign="Top" CellPadding="1" CellSpacing="2" GridLines="None"
Style="margin-left: 0px" DataSourceID="SqlDataSource0" AutoGenerateColumns="False"
EnableTheming="False" AllowSorting="True"
OnRowDataBound="gvUsers_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="Roles" Visible="False">
<HeaderTemplate>
<asp:CheckBox ID="chkAll" runat="server"
onclick="javascript:SelectAllCheckboxesSpecific(this);" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkGenerate" runat="server"
onclick="javascript:HighlightRow(this);" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ProjectNum" HeaderText="Release#" SortExpression="ProjectNum"
ReadOnly="true" />
<asp:BoundField DataField="IPMRefNum" HeaderText="IPM Ref #"
SortExpression="IPMRefNum" />
<asp:BoundField DataField="TestprojectNo" HeaderText="Release Description" SortExpression="TestprojectNo"
ItemStyle-Width="444">
<ItemStyle Width="444px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="ProjectName" HeaderText="ProjectName" SortExpression="ProjectName"
Visible="False" />
<asp:BoundField DataField="ProposedPhaseName" HeaderText="Proposed Phase Name" ItemStyle-Wrap="False"
SortExpression="ProposedPhaseName">
<ItemStyle Wrap="False"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="DependencyList" HeaderText="Dependency List"
SortExpression="DependencyList" />
<asp:BoundField DataField="QA_Planned_EndDate" HeaderText="Release Handover Date"
SortExpression="QA_Planned_EndDate" DataFormatString="{0:d}"
ItemStyle-Wrap="False">
<ItemStyle Wrap="False"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="Applications" HeaderText="Impacted Application(s)"
SortExpression="Applications" />
<asp:BoundField DataField="AppCount" HeaderText="Count"
SortExpression="AppCount" />
</Columns>
<FooterStyle BackColor="White" ForeColor="#330099" />
<RowStyle BackColor="White" ForeColor="#330099" />
<HeaderStyle BackColor="#ACCDF6" Font-Bold="True" ForeColor="#FFFFCC" />
</asp:GridView>
<asp:Label ID="lblCountImpacted" runat="server" Text="Total Impacted App."
Font-Size="Large"></asp:Label>
</asp:Panel>
<br />
<br />
<br />
<br />
<br />
<asp:Panel ID="Panel1" ScrollBars="Auto" runat="server" Style="border: 2px solid Black; display: none; width: auto;
background-color: White; padding: 20px; text-align: center;" Height="444">
<asp:Button ID="Button1" Text="OK" runat="server" />
<asp:GridView ID="GridView4" runat="server" BackColor="White" BorderColor="#010101"
BorderStyle="None" CaptionAlign="Top" CellPadding="1" CellSpacing="2" GridLines="None"
Style="margin-left: 0px" DataSourceID="SqlDataSource6" AutoGenerateColumns="False"
EnableTheming="False" AllowSorting="True"
OnRowDataBound="GridView4_RowDataBound">
<Columns>
<asp:BoundField DataField="ProjectNum" HeaderText="Release#" SortExpression="ProjectNum"
ReadOnly="true" />
<asp:BoundField DataField="IPMRefNum" HeaderText="IPM Ref #"
SortExpression="IPMRefNum" />
<asp:BoundField DataField="TestprojectNo" HeaderText="Release Description" SortExpression="TestprojectNo"
ItemStyle-Width="444">
<ItemStyle Width="444px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="ProjectName" HeaderText="ProjectName" SortExpression="ProjectName"
Visible="False" />
<asp:BoundField DataField="ProposedPhaseName" HeaderText="Proposed Phase Name" ItemStyle-Wrap="False"
SortExpression="ProposedPhaseName">
<ItemStyle Wrap="False"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="DependencyList" HeaderText="Dependency List"
SortExpression="DependencyList" />
<asp:BoundField DataField="QA_Planned_EndDate" HeaderText="Release Handover Date"
SortExpression="QA_Planned_EndDate" DataFormatString="{0:d}"
ItemStyle-Wrap="False">
<ItemStyle Wrap="False"></ItemStyle>
</asp:BoundField>
</Columns>
<FooterStyle BackColor="White" ForeColor="#330099" />
<RowStyle BackColor="White" ForeColor="#330099" />
<HeaderStyle BackColor="#ACCDF6" Font-Bold="True" ForeColor="#FFFFCC" />
</asp:GridView>
</asp:Panel>
I have created a sample code.Similar to your problem.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="MasterDetail.aspx.cs"
Inherits="MasterDetail" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form" runat="server">
<asp:ScriptManager ID="scriptManager" runat="server" />
<div>
<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblTitle" runat="server" Text="Customers" BackColor="lightblue" Width="95%" />
<asp:GridView ID="gvCustomers" runat="server" DataKeyNames="Id" AutoGenerateColumns="false"
AllowPaging="true" AllowSorting="true" PageSize="10" Width="95%">
<AlternatingRowStyle BackColor="aliceBlue" />
<HeaderStyle HorizontalAlign="Left" />
<Columns>
<asp:TemplateField ControlStyle-Width="50px" HeaderStyle-Width="60px">
<ItemTemplate>
<asp:Button ID="btnViewDetails" runat="server" Text="Details" OnClick="BtnViewDetails_Click" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Id" HeaderText="ID" SortExpression="Id" ReadOnly="true" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="contactname" ReadOnly="true" />
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btnShowPopup" runat="server" Style="display: none" />
<ajaxtoolkit:ModalPopupExtender ID="mdlPopup" runat="server" TargetControlID="btnShowPopup"
PopupControlID="pnlPopup" CancelControlID="btnClose" BackgroundCssClass="modalBackground" />
<asp:Panel ID="pnlPopup" runat="server" Width="500px" Style="display: none">
<asp:UpdatePanel ID="updPnlCustomerDetail" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblCustomerDetail" runat="server" Text="Customer Detail" BackColor="lightblue"
Width="95%" />
<asp:DetailsView ID="dvCustomerDetail" runat="server" DefaultMode="Edit" Width="95%"
BackColor="white" />
</ContentTemplate>
</asp:UpdatePanel>
<div align="right" style="width: 95%">
<asp:Button ID="btnSave" runat="server" Text="Save"
OnClientClick="alert('Sorry, but I didnt implement save '); return false;"
Width="50px" />
<asp:Button ID="btnClose" runat="server" Text="Close" Width="50px" />
</div>
</asp:Panel>
</div>
</form>
</body>
</html>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class MasterDetail : System.Web.UI.Page
{
DataSet ds;
protected void Page_Load(object sender, EventArgs e)
{
ds = Data();
if (!this.IsPostBack)
{
if (Session["parent"] == null)
{
gvCustomers.DataSource = ds.Tables["Parent"];
gvCustomers.DataBind();
}
else
{
gvCustomers.DataSource = Session["Parent"] as DataTable;
gvCustomers.DataBind();
}
}
}
private DataSet Data()
{
DataTable dt = new DataTable();
dt.Columns.Add("Id", typeof(int));
dt.Columns.Add("Name", typeof(string));
dt.Rows.Add(new object[] { 1, "aaaa" });
dt.Rows.Add(new object[] { 2, "bbbb" });
dt.Rows.Add(new object[] { 3, "cccc" });
dt.TableName = "Parent";
DataTable dtc = new DataTable();
dtc.Columns.Add("Id", typeof(int));
dtc.Columns.Add("Qul", typeof(string));
dtc.Rows.Add(new object[] { 1, "aaaa" });
dtc.Rows.Add(new object[] { 2, "bbbb" });
dtc.Rows.Add(new object[] { 3, "bbbb" });
dtc.TableName = "Child";
DataSet ds = new DataSet();
ds.Tables.Add(dt);
ds.Tables.Add(dtc);
Session["Parent"] = dt;
return ds;
}
protected void BtnViewDetails_Click(object sender, EventArgs e)
{
// get the gridviewrow from the sender so we can get the datakey we need
Button btnDetails = sender as Button;
GridViewRow row = (GridViewRow)btnDetails.NamingContainer;
// extract the id from the row whose details button originated the postback.
// grab the customerid and feed it to the customer details datasource
// finally, rebind the detailview
DataView dv = new DataView(ds.Tables["Child"]);
dv.RowFilter = "Id=" + Convert.ToString(this.gvCustomers.DataKeys[row.RowIndex].Value);
dvCustomerDetail.DataSource = dv;
dvCustomerDetail.DataBind();
// update the contents in the detail panel
this.updPnlCustomerDetail.Update();
// show the modal popup
this.mdlPopup.Show();
}
}
I am using a ModalPopupExtender within an updatePanel to show a detailView when a user selects a "Details" Button within a GridView.
The problem is that when the button is selected the popup is not being displayed. I have stepped through the code and the mdlPopup.Show() method is being executed but the popup does not "Show" Could someone perhaps help me out with what is happening?
Here is my Code:
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetRequests"
TypeName="RequestDAL" SortParameterName="SortExpression"></asp:ObjectDataSource>
<asp:ObjectDataSource ID="ObjectDataSourceDetails" runat="server" SelectMethod="GetRequestsDetail"
OnSelecting="OdsDetail_Selecting" TypeName="RequestDAL"></asp:ObjectDataSource>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="RequestID"
DataSourceID="ObjectDataSource1" EnableModelValidation="True" AllowSorting="True"
CellPadding="10" ForeColor="#333333" GridLines="None" OnSelectedIndexChanged="gv_SelectedIndexChanged">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="DateSubmit" HeaderText="DateSubmit" SortExpression="DateSubmit" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="lName" />
<asp:BoundField DataField="FirstDate" HeaderText="Date" SortExpression="FirstDate" />
<asp:BoundField DataField="BeginTime" HeaderText="Begin Time" SortExpression="beginTime" />
<asp:BoundField DataField="EndTime" HeaderText="End Time" SortExpression="endTime" />
<asp:BoundField DataField="Lab" HeaderText="Lab" SortExpression="room" />
<asp:BoundField DataField="ClassName" HeaderText="Class" SortExpression="Class" />
<asp:BoundField DataField="Semester" HeaderText="Semester" SortExpression="term" />
<asp:BoundField DataField="RequestID" HeaderText="RequestID" SortExpression="id" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="btnDetails" runat="server" Text="Details" CommandName="Select" /></ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
</asp:GridView>
<asp:Panel ID="pnlPopup" runat="server" Style="display: none" Width="500px">
<asp:UpdatePanel ID="updatePnlRequestDetail" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnShowPopup" runat="server" Style="display: none" />
<Ajax:ModalPopupExtender ID="mdlPopup" runat="server" TargetControlID="btnShowPopup"
PopupControlID="pnlPopup" CancelControlID="btnClose" BackgroundCssClass="modalBackground" />
<asp:Label ID="lblRequestDetail" runat="server" Text="Request Detail" BackColor="LightBlue"
Width="95%"></asp:Label>
<asp:DetailsView ID="dvRequestDetail" DataSourceID="ObjectDataSourceDetails" runat="server"
DefaultMode="Edit" Width="95%" BackColor="White" Visible="false">
<Fields>
<asp:BoundField HeaderText="Id" DataField="RequestID" /></Fields>
</asp:DetailsView>
<asp:LinkButton runat="server" ID="btnClose" Text="Close" CausesValidation="false"></asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
protected void gv_SelectedIndexChanged(object sender, EventArgs e) {
//show the detail view to render
dvRequestDetail.Visible = true;
// force the databinding
dvRequestDetail.DataBind();
// update the detail panel
updatePnlRequestDetail.Update();
//show the popup
mdlPopup.Show();
}
protected void OdsDetail_Selecting(object sender, ObjectDataSourceSelectingEventArgs e)
{
try
{
e.InputParameters["id"] = Convert.ToString(this.GridView1.DataKeys[this.GridView1.SelectedIndex].Value);
}
catch(Exception ex)
{
throw new Exception(ex.Message);
}
}
This is all taken from a tutorial I found for using Modal Popup extenders with ObjectDataSources http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html
2 thing I whould do:
set your GridView as a AsyncPostBackTrigger for the popup UpdatePanel.
put the TargetControl and the ModalPopupExtender outside of the PopupControl Panel.
<asp:Panel ID="pnlPopup" runat="server" Style="display: none" Width="500px">
<asp:UpdatePanel ID="updatePnlRequestDetail" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="GridView1" />
</Triggers>
<ContentTemplate>
<asp:Label ID="lblRequestDetail" runat="server" Text="Request Detail" BackColor="LightBlue" Width="95%"></asp:Label>
<asp:DetailsView ID="dvRequestDetail" DataSourceID="ObjectDataSourceDetails" runat="server" DefaultMode="Edit" Width="95%" BackColor="White" Visible="false">
<Fields>
<asp:BoundField HeaderText="Id" DataField="RequestID" />
</Fields>
</asp:DetailsView>
<asp:LinkButton runat="server" ID="btnClose" Text="Close" CausesValidation="false"></asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:Button ID="btnShowPopup" runat="server" Style="display: none" />
<Ajax:ModalPopupExtender ID="mdlPopup" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlPopup" CancelControlID="btnClose" BackgroundCssClass="modalBackground" />