I have a GridView in which the last Column has a Button which loads data.
Doing that takes like 2 Minutes.So, I need the user to know that some functions are going on in backend not that the screen is frozen
So,I need to show a ProgressBar on click of that button inside the GridView
How to do that??
I was searching for this for a while finally found it ,
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:GridView ID="Gridview" OnRowDataBound="Gridview_RowDataBound" OnRowCommand="Gridview_RowCommand" runat="server" Style="text-align: center" ShowFooter="true" Width="99%"
AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Total Customers" HeaderStyle-BackColor="#99CCCC">
<ItemTemplate>
<asp:Button ID="btnCombine" CssClass="btn-primary btn" Text="Combine"
Font-Bold="true"
CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" CommandName="More"
Style="padding-top: 1%; padding-bottom: 1%; margin-top: 1px; margin-bottom: 1px" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#99CCCC" ForeColor="#003399" />
<PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" />
<RowStyle BackColor="White" ForeColor="#003399" />
<SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
<SortedAscendingCellStyle BackColor="#EDF6F6" />
<SortedAscendingHeaderStyle BackColor="#0D4AC4" />
<SortedDescendingCellStyle BackColor="#D6DFDF" />
<SortedDescendingHeaderStyle BackColor="#002876" />
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2">
<ProgressTemplate>
<img src="images/progress_bar.gif" style="max-width: 250px" />
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnAddi" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
just name the same ID of the button u use in controlID of the AsyncPostBackTrigger and AssociatedUpdatePanelID same name u put the GridView
Related
I have a grid view with some command field (delete, edit),they work until I put the grid view in an update panel.
it is a asp.net web form.
thank a lot... I'm not use to work with asp.net
<h2><%: Title %>Contact List</h2>
<h3>click any contact to edit...</h3>
<asp:Button ID="insert1" runat="server" Height="21px" OnClick="insert1_Click" Text="new contact" />
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Always">
<ContentTemplate>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:contact_atidConnectionString %>"
SelectCommand="SELECT * FROM [contact_list]"
DeleteCommand="delete from [contact_list] where id=#id"></asp:SqlDataSource>
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataKeyNames="id"
DataSourceID="SqlDataSource1" Height="30px"
OnSelectedIndexChanged="GridView1_SelectedIndexChanged" Width="453px"
OnRowDeleted="GridView1_RowDeleted" OnSelectedIndexChanging="GridView1_SelectedIndexChanging" EnablePersistedSelection="True" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" GridLines="Horizontal">
<AlternatingRowStyle BackColor="#F7F7F7" />
<Columns>
<asp:BoundField DataField="id" HeaderText="id" SortExpression="id" ReadOnly="True" />
<asp:BoundField DataField="first name" HeaderText="first name" SortExpression="first name" />
<asp:BoundField DataField="last name" HeaderText="last name" SortExpression="last name" />
<asp:CommandField ShowDeleteButton="True" />
<asp:CommandField ShowSelectButton="True" />
</Columns>
<FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
<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>
</ContentTemplate>
</asp:UpdatePanel>
</div>
I found my problem! I simply forget to put the list view that the commad button have to open in the update panel.
here is the correct code:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Always">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataKeyNames="id"
DataSourceID="SqlDataSource1" Height="30px"
OnSelectedIndexChanged="GridView1_SelectedIndexChanged" Width="453px"
OnRowDeleted="GridView1_RowDeleted" OnSelectedIndexChanging="GridView1_SelectedIndexChanging" EnablePersistedSelection="True" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" GridLines="Horizontal"
CssClass="table table-striped">
<AlternatingRowStyle BackColor="#F7F7F7" />
<Columns>
<asp:BoundField DataField="id" HeaderText="id" SortExpression="id" ReadOnly="True" />
<asp:BoundField DataField="first name" HeaderText="first name" SortExpression="first name" />
<asp:BoundField DataField="last name" HeaderText="last name" SortExpression="last name" />
<asp:CommandField ShowDeleteButton="True" />
<asp:CommandField ShowSelectButton="True" />
</Columns>
<FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
<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>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:contact_atidConnectionString %>"
SelectCommand="SELECT * FROM [contact_list]"
DeleteCommand="delete from [contact_list] where id=#id"></asp:SqlDataSource>
<asp:Panel runat="server">
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource2" Visible="true">
<ItemTemplate>
<tr runat="server">
<td>
<asp:LinkButton ID="EditButton" runat="Server" Text="SAVE" CommandName="save" OnClick="EditButton_Click" CssClass="btn btn-default btn-lg" BackColor="MediumSpringGreen" />
</td>
<td>
<asp:TextBox ID="TextBox101" runat="Server" Text='<%#Eval("id") %>' Visible="false" class="form-control input-sm" />
</td>
<td>
<asp:TextBox ID="FirstNameLabel" runat="Server" Text='<%#Eval("first name") %>' class="form-control input-sm" />
</td>
<td>
<asp:TextBox ID="LastNameLabel" runat="Server" Text='<%#Eval("last name") %>' class="form-control input-sm" />
</td>
<td>
<asp:TextBox ID="TextBox1" runat="Server" Text='<%#Eval("[street]") %>' class="form-control input-sm" />
</td>
<td>
<asp:TextBox ID="TextBox5" runat="Server" Text='<%#Eval("born date") %>' class="form-control input-sm" />
</td>
<td>
<asp:TextBox ID="TextBox2" runat="Server" Text='<%#Eval("house number") %>' class="form-control input-sm" />
</td>
<td>
<asp:TextBox ID="TextBox3" runat="Server" Text='<%#Eval("telephone") %>' class="form-control input-sm" />
</td>
<td>
<asp:TextBox ID="TextBox4" runat="Server" Text='<%#Eval("pelephone") %>' class="form-control input-sm" />
</td>
</tr>
</ItemTemplate>
</asp:ListView>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
thank you :)
I have a gridview with 6 template field,on of them is rate and quantity.when rate and quantity is changed based on that value total amount will be change.I have used ajaxtoolkit and update panel but the changes does not effect in total field.
Here is my code
ASPX
<tr>
<td colspan="5">
<asp:GridView ID="gvOrder" runat="server" AutoGenerateColumns="False"
CellPadding="3" HorizontalAlign="Center" OnRowCreated="gvOrder_RowCreated"
BackColor="White" BorderColor="#CCCCCC" Font-Size="Small"
BorderStyle="None" BorderWidth="1px" ShowFooter="True" Width="950px" >
<Columns>
<asp:TemplateField HeaderText="Product Name">
<ItemTemplate>
<asp:DropDownList ID="drpproduct" Width="200px" runat="server" DataValueField="PName"
onselectedindexchanged="drpproduct_SelectedIndexChanged" AutoPostBack="true" >
</asp:DropDownList>
</ItemTemplate>
<HeaderStyle Width="200px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Sub Item">
<ItemTemplate>
<asp:UpdatePanel ID="Upsubitem" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="drpproduct" EventName="TextChanged" />
</Triggers>
<ContentTemplate>
<asp:DropDownList ID="drpsubitem" Width="200px" runat="server" DataValueField="BName"
onselectedindexchanged="drpsubitem_SelectedIndexChanged" AutoPostBack="true" >
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
<HeaderStyle Width="200px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate>
<asp:UpdatePanel ID="upqty" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="drpproduct" EventName="TextChanged" />
</Triggers>
<ContentTemplate>
<asp:TextBox ID="txtquantity" runat="server" MaxLength="5" CssClass="textb" Width="70px" OnTextChanged="QtyChanged" AutoPostBack="true" ></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
<HeaderStyle Width="70px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Unit">
<ItemTemplate>
<asp:UpdatePanel ID="upUnit" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="drpproduct" EventName="TextChanged" />
</Triggers>
<ContentTemplate>
<asp:TextBox ID="txtunit" runat="server" CssClass="textb" Width="60px" Enabled="false" ></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
<HeaderStyle Width="60px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Rate">
<ItemTemplate>
<asp:UpdatePanel ID="UpRate" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="drpsubitem" EventName="TextChanged" />
<asp:AsyncPostBackTrigger ControlID="drpproduct" EventName="TextChanged" />
</Triggers>
<ContentTemplate>
<asp:TextBox ID="txtrate" runat="server" CssClass="textb" Width="70px" MaxLength="5" OnTextChanged="RateChanged" AutoPostBack="true" ></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
<HeaderStyle Width="70px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Amount">
<ItemTemplate>
<asp:UpdatePanel ID="UpAmount" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="drpproduct" EventName="TextChanged" />
<asp:AsyncPostBackTrigger ControlID="drpsubitem" EventName="TextChanged" />
<asp:AsyncPostBackTrigger ControlID="txtrate" EventName="TextChanged" />
<asp:AsyncPostBackTrigger ControlID="txtquantity" EventName="TextChanged" />
</Triggers>
<ContentTemplate>
<asp:TextBox ID="txtamt" runat="server" OnTextChanged="AmtChanged" AutoPostBack="true" CssClass="textb" Width="80px" MaxLength="20" ></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
<FooterStyle HorizontalAlign="Center" />
<FooterTemplate>
<asp:Button ID="ButtonAdd" runat="server"
Text="Add New Row" onclick="ButtonAdd_Click"
Width="100" />
</FooterTemplate>
<HeaderStyle Width="80px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="PCode">
<ItemTemplate>
<asp:UpdatePanel ID="UpProductCode" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="drpproduct" EventName="TextChanged" />
</Triggers>
<ContentTemplate>
<asp:Label ID="lblpcode" runat="server" Text="" Width="10px" Enabled="false"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
<HeaderStyle Width="10px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="SCode">
<ItemTemplate>
<asp:UpdatePanel ID="UpSubitemCode" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="drpproduct" EventName="TextChanged" />
<asp:AsyncPostBackTrigger ControlID="drpsubitem" EventName="TextChanged" />
</Triggers>
<ContentTemplate>
<asp:Label ID="lblscode" runat="server" Text="" Width="10px" Enabled="false"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
<HeaderStyle Width="10px" />
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="White" ForeColor="#000066" />
<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
<RowStyle ForeColor="#000066" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#007DBB" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#00547E" />
</asp:GridView>
</td>
</tr>
<tr>
<td style="width:15%;">
<asp:Label ID="Label8" runat="server" CssClass="tranlbl" Text="Total Qunatity :"></asp:Label>
</td>
<td style="width:25%;">
<asp:TextBox ID="txttotqty" runat="server" CssClass="texttot" Width="180px"
Enabled="False" ></asp:TextBox>
</td>
<td style="width:20%;">
</td>
<td style="width:15%;">
<asp:Label ID="Label9" runat="server" CssClass="tranlbl" Text="Total Amount :"></asp:Label>
</td>
<td style="width:25%;">
<asp:UpdatePanel ID="uptotamt" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="txtrate" EventName="TextChanged" />
</Triggers>
<ContentTemplate>
<asp:TextBox ID="txttot" runat="server" CssClass="texttot" Width="180px"
Enabled="False" ></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
Every item field has some events which fires during text changed.But txttot amount doesn't change.
Code Behind
protected void RateChanged(object sender, EventArgs e)
{
GridViewRow row = (GridViewRow)drpsubitem.NamingContainer;
TextBox prate = (TextBox)row.FindControl("txtrate");
TextBox pqty = (TextBox)row.FindControl("txtquantity");
TextBox pamt = (TextBox)row.FindControl("txtamt");
pamt.Text = Convert.ToString(float.Parse(prate.Text) * Convert.ToInt32(pqty.Text));
float gvamt = 0;
int gqty = 0;
foreach (GridViewRow g1 in gvOrder.Rows)
{
gvamt = gvamt + float.Parse(pamt.Text);
gqty = gqty + Convert.ToInt32(pqty.Text);
}
txttot.Text = Convert.ToString(gvamt);
txttotqty.Text = Convert.ToString(gqty);
}
I am having a problem when I mark some checkbox checked in a grid view, the page itself will jump back to the top instead of staying at the same position when auto post back. Here is how I set up my grid view:
<UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
<ItemTemplate>
<!-- COLLAPSIBLE PANEL EXTENDER -->
<asp:Panel ID="pHeader1" runat="server" CssClass="cpHeader">
<!-- Collapsible panel extender header -->
<div class="form-group" style="background-color: #ffb848; height: 30px; vertical-align: middle">
<div class="col-md-3">
<div style="float: left; color: White; padding: 5px 5px 0 0">
<asp:Label ID="lblCategory" Text='<%# DataBinder.Eval(Container.DataItem, "categoryName") %>' runat="server" />
</div>
</div>
<div class="col-md-9">
<div style="float: right; color: White; padding: 5px 5px 0 0">
<asp:Label ID="lblHeaderText1" runat="server" />
</div>
</div>
<div style="clear: both"></div>
</div>
</asp:Panel>
<!-- Collapsible panel extender body -->
<asp:Panel ID="pBody1" runat="server" CssClass="cpBody">
<asp:Label ID="lblBodyText1" runat="server" />
<!-- Grid view to show products based on each category -->
<asp:GridView ID="gvProduct" runat="server" AutoGenerateColumns="False" Width="998px" CellPadding="4" ForeColor="#333333" GridLines="None" ShowHeader="False" DataKeyNames="id">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:TemplateField ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:CheckBox ID="cbCheckRow" runat="server" AutoPostBack="true"/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="name" HeaderText="Name" ItemStyle-Width="650px" />
<asp:BoundField DataField="inventoryQuantity" HeaderText="Total Unit" />
<asp:TemplateField HeaderText="Quantity" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="200px">
<ItemTemplate>
<asp:TextBox ID="tbQuantity" runat="server" Width="40" Text="0" OnTextChanged="tbQuantity_TextChanged" AutoPostBack="true"/>
<asp:Label ID="lblCheckAmount" runat="server" ForeColor="#a94442"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#ffb848" ForeColor="White" />
<PagerStyle BackColor="#d8d8d8" ForeColor="#333333" HorizontalAlign="Left" />
<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>
</asp:Panel>
<asp:CollapsiblePanelExtender ID="cpe1" runat="server" TargetControlID="pBody1" CollapseControlID="pHeader1"
ExpandControlID="pHeader1" Collapsed="true" TextLabelID="lblHeaderText1" CollapsedText="Show"
ExpandedText="Hide" CollapsedSize="0"
ScrollContents="false">
</asp:CollapsiblePanelExtender>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</UpdatePanel>
I've added the update panel. So far from my research, I know that we should use update panel to prevent the page jump up when auto post back. However, mine does not work. Any guides?
Thanks in advance.
You can use the MaintainScrollPositionOnPostback attribute of page Directive. See Sample below:
<%# Page MaintainScrollPositionOnPostback="true" %>
I am new to asp.net.I have gridview which displays data from database.One of the field contains image.The image which is shown dynamically as only image path is stored in database.
My table contains fields
Car_Name
Car_Id
Car_Photo
No_of_Seats
Now what i want is when user clicks on image i want a pop up image in modal.....or image should be zoomed something like that....
<%# Page Title="" Language="C#" MasterPageFile="~/Project/MasterPage/MasterPage.master"
AutoEventWireup="true" CodeFile="Reserve.aspx.cs" Inherits="Project_Reserve_Reserve" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link href="reserve.css" rel="stylesheet" type="text/css" />
<script src="../../javascript/jquery-1.9.0.js" type="text/javascript"></script>
<%-- <script src="myscript.js" type="text/javascript"></script>
<script src="f12.js" type="text/javascript"></script>--%>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="homepageContentPlaceHolder" runat="Server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
Select Start Date
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:CalendarExtender ID="TextBox1_CalendarExtender" runat="server" Enabled="True"
TargetControlID="TextBox1">
</asp:CalendarExtender>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"
ErrorMessage="*"></asp:RequiredFieldValidator>
<br />
<br />
Select End Date
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:CalendarExtender ID="TextBox2_CalendarExtender" runat="server" Enabled="True"
TargetControlID="TextBox2">
</asp:CalendarExtender>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox2"
ErrorMessage="*"></asp:RequiredFieldValidator>
<asp:AnimationExtender ID="RequiredFieldValidator2_AnimationExtender" runat="server"
Enabled="True" TargetControlID="RequiredFieldValidator2">
</asp:AnimationExtender>
<br />
<br />
<br />
Select Model <asp:DropDownList ID="ddlModel" runat="server"
AppendDataBoundItems="True" AutoPostBack="True" DataSourceID="SqlDataSource1"
DataTextField="Model_Name" DataValueField="Model_Id" OnSelectedIndexChanged="ddlModel_SelectedIndexChanged"
Width="100px">
<asp:ListItem Value="0">--Select--</asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="ddlModel"
ErrorMessage="Select a Model"></asp:RequiredFieldValidator>
<br />
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [Model]"></asp:SqlDataSource>
<br />
<br />
<br />
<asp:GridView ID="gvcar" runat="server" AllowPaging="True" AutoGenerateColumns="False"
CellPadding="4" ForeColor="#333333" GridLines="None" EmptyDataText="No data found!">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Car_Name" HeaderText="Car Name" />
<asp:BoundField DataField="No_of_Seats" HeaderText="Seats" />
<asp:TemplateField HeaderText="Photo">
<ItemTemplate>
<asp:Image Width="300" Height="200" ID="Image1" runat="server" ImageUrl='<%# Eval("Car_Photo") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
<div>
<h3>
<em>Sorry...No Car is available rightnow for this model</em></h3>
</div>
</EmptyDataTemplate>
<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>
<asp:Button runat="server" ID="btnModalPopUp" Style="display: none" />
<br />
<br />
<br />
<asp:Button ID="btnbook" runat="server" Text="Book" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
<br />
<br />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
Following links might be helpful to you:
http://technico.qnownow.com/zoom-image-on-mouse-over-in-asp-net-gridview-control/
and
http://www.aspdotnet-suresh.com/2011/12/jquery-fancy-zoom-effect-for-image-in.html
hope its helpful.
Can any one please tell me How to Bind Data from Sql DataBase to
DropDown List(Select Drop Down) using C#.net in Asp.net
OK! first youll have to write the javascript code using HTML in the client side using the selectedIndex function! you could read more about javascript in google , second you you bind your data in server side like this
dropdown1.DataSource = datatable;
dropdown1.DataBind();
OR read these links
http://shawpnendu.blogspot.com/2009/08/javascript-how-to-get-selectedtext-from.html
http://shawpnendu.blogspot.com/2009/05/how-to-bind-or-populate-data-into.html
i hope it helps you or at least show you the right directions or hints of what you want :)
Try this one ...you can achieve it
<script type="text/javascript">
function func() {
var grd = document.getElementById("Panel1");
grd.setAttribute("style", "display:inline;");
}
</script>
<asp:TextBox ID="txtDDL" CssClass="txtClass" runat="server" ReadOnly="true" onclick="javascript:func();" />
<asp:Panel ID="Panel1" runat="server" Style="display: none;">
<asp:GridView ID="GridView1" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan"
BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None">
<AlternatingRowStyle BackColor="PaleGoldenrod" />
<FooterStyle BackColor="Tan" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<SortedAscendingCellStyle BackColor="#FAFAE7" />
<SortedAscendingHeaderStyle BackColor="#DAC09E" />
<SortedDescendingCellStyle BackColor="#E1DB9C" />
<SortedDescendingHeaderStyle BackColor="#C2A47B" />
<Columns>
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:LinkButton ID="lbtnSelect" Text="Check All" runat="server" OnClick="Select" />
<asp:Button ID="btnSubmit" CssClass="btn" Text="Submit" runat="server" OnClick="Result" />
<asp:LinkButton ID="lbtnClear" Text="Clear All" runat="server" OnClick="Clear"></asp:LinkButton>
</asp:Panel>