Develop Reference

How to get Textbox from <ItemTemplate> in Repeater ASP Net

I have a product catalog page. When you click on the "Add Product" button, page with a cart shows up. This page has a table with an ItemTemplate inside it. Is there any way to get the value from the textBox located inside that ItemTemplate and change the value in the column Total cost in the table by clicking the button? The main problem is that I cannot access the textBox since it's in the . Thank you.
Catalog page:
Cart page:
CartView.aspx
MasterPageFile="~/Page/Store.Master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="bodyContent" runat="server">
<div id="content" style="margin-left: 7%;">
<style>
#import url("/css/tableCart.css");
#import url("/css/ButtonsCart.css");
</style>
<h2 style="padding: 14px; color:Highlight;">Ваша корзина</h2>
<h3 style="padding: 14px; color:Highlight;">Товары, которые вы добавили в корзину, представлены здесь</h3>
<table id="Table1" V class ="simple-little-table">
<thead>
<tr>
<th></th>
<th>Название</th>
<th>Цвет</th>
<th>Глубина</th>
<th>Ширина</th>
<th>Цена</th>
<th>Количество</th>
<th>Итого</th>
<th></th>
</tr>
</thead>
<tbody>
<asp:Repeater ID="Repeater1" ItemType="Line.Models.CartLine"
SelectMethod="GetCartLines" runat="server" EnableViewState="false">
<ItemTemplate>
<tr>
<td><asp:Image ID="Image1" runat="server" style="height:45px; " ImageUrl=<%# Item.Product.Img %> /></td>
<td> <%# Item.Product.NameProduct %> <%# Item.Product.TypeProducts %></td>
<td><%# Item.Product.Colors %></td>
<td>
Qty: <asp:TextBox ID="txtQty" runat="server" Width="130px" />
<asp:Button ID="cmdUpdate" OnClick="cmdUpdate_Click1" runat="server" Text="Update" CommandName="MyUpdate" CommandArgument = '<%# Container.ItemIndex %>'/>
</td>
<td><%# Item.Size.Depth%></td>
<td><%# Item.Product.Price%></td>
</td>
<td>
<td>
<asp:Label ID="Label2" runat="server" Text="<%# ((Item.Quantity *
Item.Product.Price))%>"></asp:Label>
</td>
<td>
<asp:Label ID="txtAmount" runat="server" Text=""></asp:Label>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
<tfoot>
<tr>
<td colspan="3">Итого:</td>
<td colspan="2" ><%= CartTotal.ToString("c") %></td>
</tr>
</tfoot>
</table>
</div>
</asp:Content>
CartView.aspx.cs
using Line.Helpers;
using Line.Models;
using Line.Models.Repository;
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Routing;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Line.Page
{
public partial class CartView : System.Web.UI.Page
{
protected void Page_Load(object sender, RepeaterCommandEventArgs e)
{
}
public IEnumerable<CartLine> GetCartLines()
{
return SessionHelper.GetCart(Session).Lines;
}
public decimal CartTotal
{
get
{
return SessionHelper.GetCart(Session).ComputeTotalValue();
}
}
public string CheckoutUrl
{
get
{
return RouteTable.Routes.GetVirtualPath(null, "checkout",
null).VirtualPath;
}
}
public string ReturnUrl
{
get
{
return SessionHelper.Get<string>(Session, SessionKey.RETURN_URL);
}
}
protected void cmdUpdate_Click1(object sender, RepeaterCommandEventArgs e)
{
if (e.CommandName == "MyUpdate")
{
RepeaterItem rRow = Repeater1.Items[Convert.ToInt32(e.CommandArgument)];
TextBox tQty = (TextBox)rRow.FindControl("txtQty");
Label tAmount = (Label)rRow.FindControl("txtAmount");
tAmount.Text = tQty.Text;
}
}
}
}

Ok, so you can set the index of the button, and pick this up in the Repeater "item command"
So, for your button, you can/want say this:
I have qty, price, and amount in the repeater. and button.
So, the markup can look like this:
Qty: <asp:TextBox ID="txtQty" runat="server" Width="130px" />
<br />
Price: <asp:TextBox ID="txtPrice" runat="server" Width="130px" />
<br />
Amount: <asp:TextBox ID="txtAmount" runat="server" Width="130px" />
<br />
<asp:Button ID="cmdUpdate" runat="server" Text="Update"
CommandName="MyUpdate"
CommandArgument = '<%# Container.ItemIndex %>'/>
So, you are now free to enter Qty, amount in any of the repeated items.
I have this:
Now, my repeater is going accross - and I think you should be using a listview since that better supports a grid + columnar layout - but it really don't mater (listview, gridview, repeater - they all work the same).
So, note how in our button we have both command Name, and command argument. In command argument I pass the row of the repeater.
So, the code looks like this:
protected void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e)
{
// update button in repeater clicked
// update amount based on qty, and price
if (e.CommandName == "MyUpdate")
{
RepeaterItem rRow = Repeater1.Items(e.CommandArgument);
TextBox tQty = rRow.FindControl("txtQty");
TextBox tPrice = rRow.FindControl("txtPrice");
TextBox tAmount = rRow.FindControl("txtAmount");
tAmount.Text = tQty.Text * tPrice.Text;
}
}
So, just pass the "index" of the repeater row as per above. We used this expression as command argument:
<asp:Button ID="cmdUpdate" runat="server" Text="Update"
CommandName="MyUpdate"
CommandArgument = '<%# Container.ItemIndex %>'/>
So, once you have the Item Index (row index), then you can run code against the one row and change that row as per above.
Edit:
So the full markup I have is this:
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div style="border-style:solid;color:black;width:250px;float:left">
<div style="padding:5px;text-align:right">
Hotel Name: <asp:TextBox ID="txtHotelName" runat="server" Text ='<%# Eval("HotelName") %>' Width="130px" />
<br />
First Name: <asp:TextBox ID="txtFirst" runat="server" Text ='<%# Eval("FirstName") %>' Width="130px" />
<br />
Last Name: <asp:TextBox ID="txtLast" runat="server" Text ='<%# Eval("LastName") %>' Width="130px" />
<br />
Qty: <asp:TextBox ID="txtQty" runat="server" Width="130px" />
<br />
Price: <asp:TextBox ID="txtPrice" runat="server" Width="130px" />
<br />
Amount: <asp:TextBox ID="txtAmount" runat="server" Width="130px" />
<br />
<asp:Button ID="cmdUpdate" runat="server" Text="Update" CommandName="MyUpdate" CommandArgument = '<%# Container.ItemIndex %>' />
<div>
City : <asp:DropDownList ID="cboCity" runat="server" DataTextField="City"
DataValueField="City" Width="110px">
</asp:DropDownList>
<div style="float:right;text-align:center;margin-left:4px;">
<asp:Button ID="cmdAddCity" runat="server" Text="+" OnClick="cmdAddCity_Click" Height="16px" Width="12px" Font-Size="XX-Small" cssclass="btnPad" OnClientClick="AddCity();return false"/>
</div>
</div>
Active: <asp:CheckBox ID="chkActive" runat="server" Checked = '<%# Eval("Active") %>'/>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
The code to load up this repeater is this:
protected void Page_Load(object sender, System.EventArgs e)
{
if (IsPostBack == false)
LoadGrid();
}
public void LoadGrid()
{
cmdSQL.Connection.Open();
strSQL = "SELECT ID, FirstName, LastName, HotelName, City, Active from tblHotels ORDER BY HotelName";
using (SqlCommand cmdSQL = new SqlCommand(strSQL, new SqlConnection(My.Settings.TEST3)))
{
cmdSQL.Connection.Open();
rstTable.Load(cmdSQL.ExecuteReader);
Repeater1.DataSource = rstTable;
Repeater1.DataBind();
}
}
so the above fills out the repeater - as noted, for a grid like layout, I would use a listview. Drag a list view into a web page.
use the wizards to connect to the database. Now blow out all the templates, only leave the itemtemplate.
Your code to load up the grid - same as above.
now, in place of the repeater as per previous screen shots?
You get this:
So your multiple lines that your building? They should be based on and around a listview. And each row can thus be grabbed, and addressed just as I did per above.
Do a google for listview examples - there is a like a billion examples.
Once you have this setup, then each row is a "thing" that repeats for you automatic based on the data from the table.
The markup for the list view - it again quite much follows the same ideas and concepts as a repeator. the listview for above looks like this:
<asp:ListView ID="ListView1" runat="server" DataKeyNames="ID">
<ItemTemplate>
<tr style="">
<td><asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' /></td>
<td><asp:Label ID="FirstNameLabel" runat="server" Text='<%# Eval("FirstName") %>' /></td>
<td><asp:Label ID="LastNameLabel" runat="server" Text='<%# Eval("LastName") %>' /></td>
<td><asp:Label ID="HotelNameLabel" runat="server" Text='<%# Eval("HotelName") %>' /></td>
<td><asp:Label ID="CityLabel" runat="server" Text='<%# Eval("City") %>' /></td>
<td><asp:CheckBox ID="ActiveCheckBox" runat="server" Checked='<%# Eval("Active") %>' Enabled="false" /></td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table runat="server">
<tr runat="server">
<td runat="server">
<table id="itemPlaceholderContainer" runat="server" border="0" style="">
<tr runat="server" style="">
<th runat="server">ID</th>
<th runat="server">FirstName</th>
<th runat="server">LastName</th>
<th runat="server">HotelName</th>
<th runat="server">City</th>
<th runat="server">Active</th>
</tr>
<tr id="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr runat="server">
<td runat="server" style=""></td>
</tr>
</table>
</LayoutTemplate>
</asp:ListView>

ASP.NET (C#) - ListView

In past, i worked on ListViews (.net 2.0) using a custom Template field but what i am trying to achieve here is the following
I am now working on .net 4.6
So basically a list which shows items like above and on mouse-hover few options show up as shown in the following screenshot
I also have to trigger those option to do different things -
How can I do that in asp.net, may I please have some code references.
Cheers
P.S.
This is a rough example of how i am creating the List Item Template (as requested)
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
<AlternatingItemTemplate>
<table >
<tr>
<td ><asp:Image ID="image1" ImageUrl='<%# Bind("url") %>' runat="server" Width="98px" /> </td>
<td><h2><asp:Label ID="_label" runat="server" Text ='<%# Bind("title") %>'></asp:Label></h2><asp:Label ID="Label1" runat="server" Text ='<%# Bind("description") %>'></asp:Label></td>
</tr>
</table>
</AlternatingItemTemplate>
<EmptyDataTemplate>
No data was returned.
</EmptyDataTemplate>
<ItemSeparatorTemplate>
<br />
</ItemSeparatorTemplate>
<ItemTemplate>
<table >
<tr>
<td ><asp:Image ID="image1" ImageUrl='<%# Bind("url") %>' runat="server" Width="98px" /> </td>
<td><h2><asp:Label ID="_label" runat="server" Text ='<%# Bind("title") %>'></asp:Label></h2><asp:Label ID="Label1" runat="server" Text ='<%# Bind("description") %>'></asp:Label></td>
</tr>
</table>
</ItemTemplate>
<LayoutTemplate>
<ul id="itemPlaceholderContainer" runat="server" style="">
<li runat="server" id="itemPlaceholder" />
</ul>
<div style="">
</div>
</LayoutTemplate>
</asp:ListView>
I can add any html formatting to this template e,g i can add ASP:button etc but i don't know how to trigger those to perform certain tasks.

One easy way to achieve your requirement is to keep those buttons there but invisible and show them up when the parent container is hovered. following as a quick sample
aspx
<asp:ListView ID="ListView1" runat="server">
<ItemTemplate>
<tr class="row-data">
<td>
<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
</td>
<td>
<asp:Label ID="PositionLabel" runat="server" Text='<%# Eval("Position") %>' />
</td>
<td>
<div class="btn-area">
<asp:Button runat="server" Text="Button1" />
<asp:Button runat="server" Text="Button2" />
</div>
</td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table id="itemPlaceholderContainer" runat="server" border="0" style="">
<tr runat="server" style="">
<th runat="server">
Name
</th>
<th runat="server">
Position
</th>
<th>
</th>
</tr>
<tr id="itemPlaceholder" runat="server">
</tr>
</table>
</LayoutTemplate>
</asp:ListView>
css
.btn-area
{
display: none;
}
.row-data:hover .btn-area
{
display: block;
}
code-behind
protected void Page_Load(object sender, EventArgs e)
{
ListView1.DataSource = new List<dynamic>() {
new { Name = "Andy", Position = "PG"},
new { Name = "Bill", Position = "SD"},
new { Name = "Caroline", Position = "Manager"}
};
ListView1.DataBind();
}
UPDATE
ListView ItemCommand can capture the postback by button pressed and CommandName makes you able to recognize which button fired it.
<asp:Button runat="server" Text="Button1" CommandName="c1" />
<asp:Button runat="server" Text="Button2" CommandName="c2" />
code-behind
protected void ListView1_ItemCommand(object sender, ListViewCommandEventArgs e)
{
if (e.CommandName == "c1")
{
// do something when button1 pressed
}
else if (e.CommandName == "c1")
{
// do something when button2 pressed
}
}

how to show an image in image control of which image path is stored in database when user selects a value in dropdownlist in asp.net?

I have a database which is shown below in the image :
Image of database
Here is the image of the form :
Image of the Form
In this form i want to show up the image in image control of which image path is stored up in database and according to subcategory value from the drop down list when user selects it how can i do it please help ... Thank You
Guys here is the source code of my form i have added sqldatasource and bind the dropdown list with sqldatasource .........
<form method="post" enctype="multipart/form-data">
<table border="0" width="450px" height="500px" align="center" class="tableshadow">
<tr>
<td colspan="2" class="toptd" style="color: white; font-size: 24px; text-align: center;
height: 40px; background-color: #60b2e7">
Update Subcategory
</td>
</tr>
<tr>
<td class="lefttxt">
<asp:Label ID="Label1" runat="server" Text="Select Subcategory:"></asp:Label>
</td>
<td>
<asp:DropDownList ID="DropDownList1" runat="server" Height="35px" Width="134px" DataSourceID="SqlDataSource1"
DataTextField="subcatname" DataValueField="subcatid">
<asp:ListItem Text="Select category" Value="0"></asp:ListItem>
</asp:DropDownList>
<asp:Button ID="btnshow" runat="server" OnClick="btnshow_Click" Text="Show" Width="94px" />
</td>
</tr>
<tr>
<td class="lefttxt">
<asp:Label ID="Label2" runat="server" Text="Subcategory Name:"></asp:Label>
<br />
</td>
<td>
<asp:TextBox ID="txtsubcategoryname" runat="server"></asp:TextBox>
<br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtsubcategoryname"
ErrorMessage="*Please Enter the Subcategory Name" Font-Bold="True" Font-Italic="True"
Font-Size="X-Small" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="lefttxt">
<asp:Label ID="Label3" runat="server" Text="Select Category:"></asp:Label>
</td>
<td>
<asp:DropDownList ID="DLCategory" runat="server" Height="35px" Width="146px" DataSourceID="SqlDataSource1"
DataTextField="categoryname" DataValueField="categoryname">
<asp:ListItem Text="Select category" Value="0"></asp:ListItem>
</asp:DropDownList>
<tr>
<td class="lefttxt">
<asp:Label ID="Label6" runat="server" Text="Category Name:"></asp:Label>
<br />
</td>
<td>
<asp:TextBox ID="txtcategoryname" runat="server"></asp:TextBox>
<br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtcategoryname"
ErrorMessage="*Please Enter the Category Name" Font-Bold="True" Font-Italic="True"
Font-Size="X-Small" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="lefttxt">
<asp:Label ID="Label4" runat="server" Text="Old Pic:"></asp:Label>
</td>
<td>
<input type="hidden" name="h1" value="" /><asp:Image ID="Image1" runat="server" />
</td>
</tr>
<tr>
<td class="lefttxt">
<asp:Label ID="Label5" runat="server" Text="Upload New Pic:"></asp:Label>
</td>
<td>
<asp:FileUpload ID="FileUpload1" runat="server" Width="225px" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnupdate" runat="server" Text="Update" OnClick="btnupdate_Click" />
</td>
</tr>
</table>
</form>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ToursandTravelsConnectionString %>"
SelectCommand="SELECT [subcatid], [subcatname], [categoryname], [pic] FROM [subcategory]">
</asp:SqlDataSource>

Providing the 'pic' column in database holds links to the images are absolute, it also depends on how you have set the drop down list up.
You will need an OnSelectedIndexChanged for the drop down which does the following:
Selects the pic url from the database where subcategory = dropdown value or text. (this depends on how you set the drop-down list up).
With that obtained value set the pic to the one you have obtained.
You need the following, providing code would make it easier.
In you ASP file add the following to the dropdown:
OnSelectedIndexChanged="drp_SelectedIndexChanged" AutoPostBack="True"
Within code behind you need:
protected void drp_SelectedIndexChanged(object sender, EventArgs e) {
//SQL To obtain url for image based on drop down selection
//providing code makes this easier
//with return url:
Image1.ImageUrl = //returned url
}

Are you having issue in showing image in image control ? Can you right click on that container and check path in properties ?
You can use AutoPostBack as True and "OnSelectedIndexChanged" to call server function and update image control based on result.
Or you can use JQuery to show images in Div tag.
jQuery(document).ready(function(){
$("#dropdownID").change(function() {
$.ajax({
url: "SericeFunction name",
success: function(msg){
.....<bind img tag >
}
});
});
});

Thank You All of you guys especially #John for your syntax you provided thanks alot.. Below is the code :
protected void btnshow_Click(object sender, EventArgs e)
{
using (var cn = new SqlConnection(#"Data Source=.\SQLEXPRESS;AttachDbFilename=D:\PROJECT SEM6\Online Tours and Travels\App_Data\ToursandTravels.mdf;Integrated Security=True;User Instance=True"))
using (var cmd = cn.CreateCommand())
{
cn.Open();
cmd.CommandText = "select pic from subcategory where subcatid = '"+DropDownList1.Text+"'";
cmd.Parameters.AddWithValue("#subcatid",DropDownList1.Text);
using (var reader = cmd.ExecuteReader())
{
if (reader.Read())
{
var filePath = reader.GetString(0);
// For this to work images must be stored inside the web application.
// filePath must be a relative location inside the virtual directory
// hosting the application. Depending on your environment some
// transformations might be necessary on filePath before assigning it
// to the image url.
Image1.ImageUrl =("~/"+filePath);
}
}
}

If then Else in ASP.NET Repeater with Checkbox

Here is my ASP repeater code
<asp:repeater id="filterTable" runat="server">
<HeaderTemplate>
<br/><br/><br/>
<div class="table-responsive">
<table width="100%" cellspacing="0" id="table_odd" class="quickordertable table table-bordered table-striped table-condensed grid-table">
<tr>
<th style="width: 80px">
Details
</th>
<th style="width: 80px">
Filter
</th>
<th style="width: 30px">
Qty
</th>
<th style="width: 60px">
Include In Order
</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#Eval("Details")%></td>
<td><%#Eval("FilterType")%></td>
<td><%#Eval("Qty")%></td>
<td><asp:CheckBox ID="orderPartNumber" Checked="true" runat="server"/><asp:HiddenField ID="hiddenPartNumber" Value ='<%#Eval("PartNumber")%>'></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</div>
</FooterTemplate>
</asp:Repeater>
I have an ASP ItemTemplate with a field of <%#Eval("GenuineOnly")%>
If field GenuineOnly contains a value, (Or is not Null) Then I want to show this code
<td>GENUINE ONLY</td>
Else I want to show this code
<td><asp:CheckBox ID="orderPartNumber" runat="server"/><asp:HiddenField ID="hiddenPartNumber" Value ='<%#Eval("PartNumber")%>'></td>
I've tried a number of different ways but can't seem to get the syntax right! Any help would be appreciated.

You can achieve this using this way:
<td>
<asp:Panel runat="server" Visible='<%#Eval("GenuineOnly").ToString().Length > 0 %>'>
<asp:CheckBox ID="orderPartNumber" Checked="true" runat="server" />
<asp:HiddenField runat="server" ID="hiddenPartNumber" Value='<%#Eval("PartNumber")%>' />
</asp:Panel>
<asp:Panel runat="server" Visible='<%#Eval("GenuineOnly").ToString().Length == 0 %>'>
GENUINE ONLY
</asp:Panel>
</td>

I assume you can add Table/Td as per your need.
<asp:Repeater ID="rptr" runat="server" OnItemDataBound="rptr_ItemDataBound">
<ItemTemplate>
<asp:Label ID="lblGenuineOnly" runat="server" Text='<%#Eval("GenuineOnly") %>' />
<asp:CheckBox ID="orderPartNumber" runat="server"/>
<asp:HiddenField ID="hiddenPartNumber" Value ='<%#Eval("PartNumber")%>' runat="server" />
</ItemTemplate>
Code behind
protected void rptr_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
Label lblPartNumber = (Label)e.Item.FindControl("lblGenuineOnly");
CheckBox chkPart = (CheckBox)e.Item.FindControl("orderPartNumber");
if (string.IsNullOrEmpty(lblPartNumber.Text.Trim())) {
//Display GENUINE ONLY in any label like lblPartNumber.Text = "GENUINE ONLY"
chkPart.Visible = false;
}
else
{
chkPart.Visible = true;
}
}

Unable to hide and show panel

I have two panels Panel1 and panel2 when page loads, both panels are hidden. And I have a dropdown list, when I selct dropdown values the panel shoud be visible. Now its not visible as per my dropdown selection. My page load
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Panel1.Visible = false;
Panel2.Visible = false;
}
}
Dropdown click function
protected void ddmode_SelectedIndexChanged(object sender, EventArgs e)
{
if (ddmode.SelectedItem.Value == "4")
{
Panel1.Visible = true;
Panel2.Visible = false;
}
}
But now when I select dropdown with value 4 panel1 is not visible. My UI part
<tr>
<td align="left" class="style2">
Mode</td>
<td align="left">
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate >
<div class="input-prepend" title="Select Machine ID" data-rel="tooltip">
<asp:DropDownList ID="ddmode" runat="server" AutoPostBack="True"
onselectedindexchanged="ddmode_SelectedIndexChanged">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator9" runat="server"
ErrorMessage="RequiredFieldValidator" ControlToValidate="ddmode" ForeColor="Red">*
</asp:RequiredFieldValidator>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<asp:Panel ID="Panel1" runat="server">
<tr>
<td align="left" class="style2">
<asp:Label ID="lblfromdate" runat="server" Text="From Date"></asp:Label>
</td>
<td align="left">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="input-prepend" title="Select Date" data-rel="tooltip">
<asp:TextBox ID="txtfromdate" ClientIDMode="Static" runat="server"
TextMode="SingleLine" ></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="CalendarExtender2" TargetControlID ="txtfromdate"
Format="dd/MM/yyyy" runat="server">
</ajaxToolkit:CalendarExtender>
<asp:RequiredFieldValidator ID="RequiredFieldValidator10" runat="server"
ErrorMessage="RequiredFieldValidator"
ControlToValidate="txtfromdate" ForeColor="Red">*</asp:RequiredFieldValidator>
</ContentTemplate></asp:UpdatePanel>
</td>
</tr>
<tr>
<td align="left" class="style2">
<asp:Label ID="lbltodate" runat="server" Text="To Date"></asp:Label>
</td>
<td align="left">
<asp:UpdatePanel ID="UpdatePanel11" runat="server">
<ContentTemplate>
<div class="input-prepend" title="Select Date" data-rel="tooltip">
<asp:TextBox ID="txttodate" ClientIDMode="Static" runat="server"
TextMode="SingleLine" ></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="CalendarExtender3" TargetControlID ="txttodate"
Format="dd/MM/yyyy" runat="server">
</ajaxToolkit:CalendarExtender>
<asp:RequiredFieldValidator ID="RequiredFieldValidator11" runat="server"
ErrorMessage="RequiredFieldValidator"
ControlToValidate="txttodate" ForeColor="Red">*</asp:RequiredFieldValidator>
</ContentTemplate></asp:UpdatePanel>
</td>
</tr>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server">
<tr>
<td align="left" class="style2">
<asp:UpdatePanel ID="UpdatePanel14" runat="server">
<ContentTemplate>
<asp:Label ID="lbldept" runat="server" Text="From Department" ></asp:Label>
</ContentTemplate></asp:UpdatePanel>
</td>
<td align="left">
<asp:UpdatePanel ID="UpdatePanel12" runat="server">
<ContentTemplate>
<div class="input-prepend" title="Select Date" data-rel="tooltip">
<asp:TextBox ID="txtfromdept" ClientIDMode="Static" runat="server"
TextMode="SingleLine" ></asp:TextBox>
</ContentTemplate></asp:UpdatePanel>
</td>
</tr>
<tr>
<td align="left" class="style2">
<asp:UpdatePanel ID="UpdatePanel15" runat="server"><ContentTemplate>
<asp:Label ID="lbltodept" runat="server" Text="To Deprtment" ></asp:Label>
</ContentTemplate></asp:UpdatePanel>
</td>
<td align="left">
<asp:UpdatePanel ID="UpdatePanel13" runat="server">
<ContentTemplate>
<div class="input-prepend" title="Select Date" data-rel="tooltip">
<asp:TextBox ID="txttodept" ClientIDMode="Static" runat="server"
TextMode="SingleLine"></asp:TextBox>
</ContentTemplate></asp:UpdatePanel>
</td>
</tr>
</asp:Panel>

In this case, it looks like your dropdownlist is doing a partial postback within updatepanel4 but Panel1 is not in an updatepanel so it can't be updated in a partial postback. Either remove all the updatePanels or place Panel1 in an update panel.

You need to place your panel inside the update panel for it to work. Controls outside update panel cannot work for events of controls inside the update panel.
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate >
<div class="input-prepend" title="Select Machine ID" data-rel="tooltip">
<asp:DropDownList ID="ddmode" runat="server" AutoPostBack="True"
onselectedindexchanged="ddmode_SelectedIndexChanged">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator9" runat="server"
ErrorMessage="RequiredFieldValidator" ControlToValidate="ddmode" ForeColor="Red">*
</asp:RequiredFieldValidator>
<asp:Panel ID="Panel1" runat="server">
....
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>