Develop Reference

How to use update panel in datagrid

Below is the code which i have applied, it is giving me a error.
<asp:TemplateColumn>
<HeaderTemplate >
<label>Article</label>
</HeaderTemplate>
<ItemTemplate>
<asp:DropDownList ID="DrpArticle" runat="server" TabIndex="4" CssClass="form-control" AutoPostBack="true"
OnSelectedIndexChanged = "DrpArticle_SelectedIndexChanged" AppendDataBoundItems = "true">
</asp:DropDownList>
<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
<Triggers><asp:AsyncPostBackTrigger ControlID="DrpArticle" EventName="OnSelectedIndexChanged" /></Triggers>
<ContentTemplate>
<asp:Label ID="LblStock" runat="server" Text="..." ForeColor="#000066"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:TemplateColumn>

Child Update Panel don't to get refresh

I have problem in nested update panel. I binding the gridview by using user control and my listbox is in the child update panel while selecting the items in listbox the page is getting refresh. but I don't want to get refresh.
Here is my aspx:
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SearchModule._Default" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<link type="text/css" rel="stylesheet" href="Defaultstylesheet.css" />
<script src=<%--"Scripts/jquery-1.8.2.js" type="text/javascript"> </script> --%>
<%# Register TagPrefix="inc" TagName="sPager" Src="~/UserControls/SearchPager.ascx" %>
<asp:UpdatePanel ID="upseachr" runat="server" >
<ContentTemplate>
<div style="height: 50px;"></div>
<div class="searchtextbx">
<asp:TextBox ID="searchtext" runat="server"></asp:TextBox>
<asp:Button ID="Search" OnClick="Search_Click" CssClass="searchbtn" Text="Search" height="32" runat="server"> </asp:Button>
</div>
<asp:UpdateProgress ID="updatesearchpro" AssociatedUpdatePanelID="upseachr" runat="server" >
<ProgressTemplate>
<center>
<asp:Panel ID="searchpanel" runat="server">
<img alt="Processing" src="Images/359.gif" />
<br />
<asp:Label ID="panlab" runat="server" Text="Processing..."></asp:Label>
</asp:Panel>
</center>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="updFilters" runat="server" >
<ContentTemplate>
<div class="resultpage" style="overflow-x: scroll;">
<table>
<tr>
<div class="listbox">
<asp:Label ID="headertext" runat="server" CssClass="labelresul" Font-Bold="true" Height="50" Text="Available Filter"></asp:Label>
<span style="padding-left:10px;font-weight:700;"> <asp:HiddenField runat="server" ID="hdCount" /><asp:Label ID="Total" runat="server" Height="50"></asp:Label></span><span style="padding-left:5px;font-weight:700;"><asp:Label runat="server" ID="match" Visible="false" Text="Matches"></asp:Label> <asp:Label ID="remainingcount" ForeColor="Red" Visible="false" runat="server"></asp:Label> <asp:Label ID="remaining" runat="server" ForeColor="Red" Text="Remaining" Visible="true"></asp:Label> </span>
</div>
</tr>
<tr>
<asp:ListView ID="ListView1" runat="server" OnItemDataBound="ListView1_ItemDataBound" EnableViewState="false">
<ItemTemplate>
<td>
<asp:Label ID="listheader" runat="server" Text='<%# Eval("additional_info_name1") %>'></asp:Label>
<asp:ListBox ID="results" Width="200" Visible="true" runat="server" SelectionMode="Multiple" AutoPostBack="true" OnSelectedIndexChanged="results_SelectedIndexChanged" ></asp:ListBox>
</td>
</ItemTemplate>
</asp:ListView>
</tr>
<tr>
<td class="listbox1">
<asp:Button ID="btn" runat="server" Font-Size="12" Font-Bold="true" CssClass="searchbtn" OnClick="btn_Click" Text="Apply Filter" />
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div style="height: 40px;"></div>
<div class="resultpage" style="overflow-y: scroll;">
<asp:UpdatePanel ID="updPager" runat="server">
<ContentTemplate>
<inc:sPager ID="sPager" runat="server" OnPageIndexChanging="sPager_OnPageIndexChanging"></inc:sPager>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="updGrid" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="gvResults" runat="server" AutoGenerateColumns="false" ItemStyle-VerticalAlign="Middle" AllowSorting="true"
ItemStyle-HorizontalAlign="Center" GridLines="None" CellSpacing="10" CellPadding="2" AllowCustomPaging="true" OnSorting="gvResults_Sorting"
AllowPaging="True" PageSize="20" HeaderStyle-VerticalAlign="Middle" HeaderStyle-HorizontalAlign="Center"
HeaderStyle-CssClass="GridHeader" RowStyle-HorizontalAlign="Left" CssClass="GridStyle" >
<Columns >
<asp:TemplateField HeaderText="Stock Code" SortExpression="manufacturer_part_number" >
<ItemTemplate>
<asp:Label ID="lblFirstName" Text='<%# DataBinder.Eval(Container.DataItem, "manufacturer_part_number")%>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Manufacturer" SortExpression="Manufacturer" HeaderText="Manufacturer"></asp:BoundField>
<asp:BoundField DataField="Description" SortExpression="Description" HeaderText="Description"></asp:BoundField>
<asp:BoundField DataField="Availability" SortExpression="Availability" HeaderText="Availability"></asp:BoundField>
<asp:BoundField DataField="flag_rohs" SortExpression="flag_rohs" HeaderText="RoHS"></asp:BoundField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>

It appears that your top-level UpdatePanel has an UpdateModeof Always (which is the default).
The MSDN documentation states:
If the UpdateMode property is set to Always, the UpdatePanel
control's content is updated on every postback that originates from
anywhere on the page. This includes asynchronous postbacks from
controls that are inside other UpdatePanel controls and postbacks
from controls that are not inside UpdatePanel controls.
You can rectify this by changing your top-level UpdatePanel control to conditional. e.g:
<asp:UpdatePanel ID="upseachr" runat="server" UpdateMode="Conditional">
Cheers

Change text in TextBox outside of UpdatePanel

I have a gridview inside an UpdatePanel (the gridview is showing in a popup). On click of a select button in that grid, I am trying to set a textbox text in the page. But its not working; if I remove the update panel then it will work.
This is my code in aspx:
<div><asp:TextBox ID="txt" runat="server /></div>
<asp:UpdatePanel ID="updLendersearch" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnLenderSearch" EventName="Click" />
</Triggers>
<ContentTemplate>
<div id="divLender" runat="server" class="white_content" style="height: 450px;top: 20%;width: 57%;">
<asp:Label ID="lblBenificiary" runat="server" Text="Beneficiary/Lender :" Font-Names="Candara" ></asp:Label>
<asp:TextBox ID="txtBeneficiaryName" Style="border: 1px solid red" runat="server" Width="80px" CssClass="txtboxes" Font-Names="Candara" ></asp:TextBox>
<asp:RequiredFieldValidator ID="reqBeneficiaryName" runat="server" ErrorMessage="*" ForeColor="Red" ControlToValidate="txtBeneficiaryName" ValidationGroup="lender"></asp:RequiredFieldValidator>
<asp:Label ID="lblLenderState" runat="server" Text="State :" Font-Names="Candara" ></asp:Label>
<asp:DropDownList ID="ddlLenderState" runat="server" AutoPostBack="true" Style="border: 1px solid red"
AppendDataBoundItems="true" CssClass="drpdown" OnSelectedIndexChanged="ddlLenderState_SelectedIndexChanged">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="reqLenderState" runat="server" ErrorMessage="*" ForeColor="Red" ControlToValidate="ddlLenderState" ValidationGroup="lender"></asp:RequiredFieldValidator>
<asp:Label ID="lblLenderCity" runat="server" Text="City :" Font-Names="Candara" ></asp:Label>
<asp:DropDownList ID="ddlLenderCity" runat="server" Width="100px" AutoPostBack="true"
AppendDataBoundItems="true" CssClass="drpdown" OnSelectedIndexChanged="ddlLenderCity_SelectedIndexChanged">
</asp:DropDownList>
<asp:Label ID="lblBeneficiaryZip" runat="server" Text="Zip :" Font-Names="Candara" ></asp:Label>
<asp:DropDownList ID="ddlBeneficiaryZip" runat="server" AppendDataBoundItems="true" Width="100px"
AutoPostBack="true" CssClass="drpdown">
</asp:DropDownList>
<asp:Button ID="btnBenefeciary" ValidationGroup="lender" runat="server" Text="Search" Font-Names="Candara" CssClass="btnBenefeciary" OnClick="btnBenefeciary_Click"/>
<br><br><br><br>
<div>
<asp:GridView ID="grvLenderDetails" CssClass="GridViewStyle" ShowHeaderWhenEmpty="true" OnRowCommand="grvLenderDetails_RowCommand" runat="server" AutoGenerateColumns="false" AutoGenerateSelectButton="true">
<Columns>
.. .. ..
</Columns>
<EmptyDataTemplate>
No Records To Display
</EmptyDataTemplate>
</asp:GridView>
</div>
</div>
<div id="fadeLender" class="black_overlay" runat="server">
<asp:ImageButton ID="imgLenderClose" ImageUrl="../Images/closepnlbtn.png" runat="server"
align="right" Style="margin-right: 140px; margin-top: 78px; border: 0px" OnClick="imgLenderClose_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>

If the TextBox is in another UpdatePanel. Make its UpdateMode Conditional which allows you to call its Update method programmatically.
protected void ddlLenderState_SelectedIndexChanged(object sender, GridViewSelectEventArgs e)
{
TxtInfo.Text = "Hello, i'm coming from the GridView.";
UpdInfo.Update();
}
Another approach would be to add an AsyncPostBackTrigger to the outer UpdatePanel with ControlID=grvLenderDetails and EventName=SelectedIndexChanged.
If it's not in an UpdatePanel, then you need to change that. Here are examples:
<asp:UpdatePanel runat="server" ID="UpdInfo" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="TxtInfo" runat="server />
</ContentTemplate>
</asp:UpdatePanel>
Here is the trigger approach that does not require you to call Update() from codebehind manually:
<asp:UpdatePanel runat="server" ID="UpdInfo" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="TxtInfo" runat="server />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="grvLenderDetails" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
Otherwise you'll need to use some sort of JS tricks, e.g.:
ScriptManager.RegisterStartupScript(this, GetType(), "ChangeTextBoxText", "<script type='text/javascript'>$('#"+txt.ClientId+"').val('Hello, i'm from the GridView');</script>", false);

set page height

I've got a search page that has the criteria in a panel, when the page opens obviously there are no results and the page footer is appearing directly beneath the search panel. How do I set the results panel to be a set height, then stretch to be the height of the grid when search results are found.
Cheers
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
CodeBehind="FrmSearch.aspx.cs" Inherits="web.FrmSearch" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:UpdatePanel ID="pnlUpdate" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<div id="divSearch">
<asp:Panel ID="pnlSearch" runat="server" DefaultButton="BtnSearch">
<table width="100%">
<tr>
<td>
<asp:Label ID="LblName" runat="server" Text="Name:" CssClass="head2"></asp:Label>
</td>
<td>
<asp:TextBox ID="TxtSurname" runat="server" Width="200" CssClass="norm"></asp:TextBox>
</td>
<tr>
<td>
<asp:Label ID="LblAddress" runat="server" Text="Address:" CssClass="head2"></asp:Label>
</td>
<td>
<asp:TextBox ID="TxtAddress" runat="server" Width="200" CssClass="norm"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<asp:Button ID="BtnSearch" runat="server" Text="Search" OnClick="BtnSearch_Click" />
</td>
<td colspan="2" align="center">
<asp:Button ID="BtnReset" runat="server" Text="Reset" OnClick="BtnReset_Click" />
</td>
</tr>
</table>
</asp:Panel>
</div>
<div>
<asp:Label ID="lblCount" runat="server" CssClass="head2"></asp:Label>
</div>
<hr />
<div id="divResults">
<asp:Panel ID="pnlResults" runat="server">
<asp:GridView ID="gvResults" runat="server" AutoGenerateColumns="false" Width="99%"
CssClass="grd" OnRowDataBound="gvResults_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:HiddenField ID="hfGUID" runat="server" Value='<%# Bind("GUID")%>' />
<asp:Label ID="LblName" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Address">
<ItemTemplate>
<asp:Label ID="LblAddress" runat="server" Text='<%# Bind("Address") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Post Code">
<ItemTemplate>
<asp:Label ID="LblPostCode" runat="server" Text='<%# Bind("Post_Code") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Telephone">
<ItemStyle Width="150px" />
<ItemTemplate>
<asp:Label ID="LblTelephone" runat="server" Width="150px" Text='<%# Bind("Telephone") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</asp:Panel>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSearch" />
<asp:AsyncPostBackTrigger ControlID="btnReset" />
</Triggers>
</asp:UpdatePanel>
</asp:Content>

You can use min-height:200px to divSearch container.
#divSearch
{
min-height:200px //according to your requirement
}

First modalpopup in first panel does not open until second modalpopup opens in second panel

I have one updatepanel exists with two panels. Each panel have two buttons to open popup. I have two modalpopup & its target panels just below of two panels.Everything is working fine, but I am getting problem, if I click button in first panel then modalpopup does not open, but when I click button in second panel after click button in first panel then popup opens & viceversa.
I used following code:
<asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnl1" runat="server">
<asp:Button ID="btn1" runat="server" class="add-btn-1" Text="Add" />
</asp:Panel>
<asp:Panel ID="pnl2" runat="server">
<asp:Button ID="btn2" runat="server" class="add-btn-1" Text="Add" />
</asp:Panel>
<cc1:ModalPopupExtender ID="ModalPopup1" PopupControlID="pnlpopup1" TargetControlID="btn1"
BackgroundCssClass="modalBackground" runat="server" />
<asp:Panel runat="server" ID="pnlpopup1">
<%--code here--%>
</asp:Panel>
<cc1:ModalPopupExtender ID="ModalPopup2" PopupControlID="pnlpopup2" TargetControlID="btn2"
BackgroundCssClass="modalBackground" runat="server" />
<asp:Panel runat="server" ID="pnlpopup2">
<%--code here--%>
</asp:Panel>
</ContentTemplate>
What will be solution to solve this problem?
Thank you.

I executed your code and found no problems.It works.So post the code that you have given inside <%--code here--%>.I would also suggest that you add a OkControlID to your ModalPopupExtender.

<asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnl1" runat="server">
<asp:Button ID="btn1" runat="server" class="add-btn-1" Text="Add" />
</asp:Panel>
<asp:Panel ID="pnl2" runat="server">
<asp:Button ID="btn2" runat="server" class="add-btn-1" Text="Add" />
</asp:Panel>
<Ajax:ModalPopupExtender ID="ModalPopup1" PopupControlID="pnlpopup1" TargetControlID="btn1"
BackgroundCssClass="modalBackground" runat="server" />
<asp:Panel runat="server" ID="pnlpopup1" Style="width:400px;height:100px; background: gray;">
<table width="100%">
<tr>
<td align="left">
<asp:Label ID="lblheadinglunchout" Font-Underline="true" Text="First Popup"
runat="server" CssClass="labelPopup" Style="text-decoration: none"></asp:Label>
</td>
<td align="right">
<asp:ImageButton ID="imgbtnCancelPopUp" ImageUrl="Images/popupclose_button.png"
runat="server" Style="vertical-align: top;" CssClass="button" />
</td>
</tr>
</table>
</asp:Panel>
<Ajax:ModalPopupExtender ID="ModalPopup2" PopupControlID="pnlpopup2" TargetControlID="btn2"
BackgroundCssClass="modalBackground" runat="server" />
<asp:Panel runat="server" ID="pnlpopup2" Style="width:400px;height:100px; background: gray;">
<table width="100%">
<tr>
<td align="left">
<asp:Label ID="Label1" Font-Underline="true" Text="Secound Popup"
runat="server" CssClass="labelPopup" Style="text-decoration: none"></asp:Label>
</td>
<td align="right">
<asp:ImageButton ID="ImageButton1" ImageUrl="Images/popupclose_button.png"
runat="server" Style="vertical-align: top;" CssClass="button" />
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>