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" %>
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 designed my website home page using a table
and I need to put a scroll bar in one field, yet I don't how to do so. So I'll put the html of that field.
<td colspan="4" style="background-position: center center; border: medium groove #FFFFFF; background-image: none; background-repeat: no-repeat;" rowspan="9">
<asp:DataList ID="DataList1" runat="server" CellPadding="4" CssClass="auto-style38" ForeColor="#333333" Width="1110px">
<AlternatingItemStyle BackColor="White" ForeColor="#284775" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<ItemStyle BackColor="#F7F6F3" ForeColor="#333333" />
<ItemTemplate>
Professor:
<asp:Label ID="Label2" runat="server" Text='<%# Eval("pu") %>'></asp:Label>
<br />
Title:
<asp:Label ID="Label3" runat="server" Text='<%# Eval("tu") %>'></asp:Label>
<br />
Body:<asp:Label ID="Label4" runat="server" Text='<%# Eval("bu") %>'></asp:Label>
</ItemTemplate>
<SelectedItemStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
</asp:DataList>
</td>
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
HoverMenuExtender only works after postback in gridview. Weird behavior.
<asp:TemplateField>
<HeaderStyle CssClass="CenterAligner" />
<ItemTemplate>
<asp:Image ID="imgNotes" runat="server" ImageUrl="Images/information.png" Style="position: relative" />
<asp:Panel ID="pnlNotes" runat="server" BackColor="GhostWhite" BorderColor="Black" BorderStyle="Solid" BorderWidth="1" Width="500px" Visible="true">
<div style="position: relative">
<div style="padding: 10px; margin: 10px; text-align: justify">
<asp:Label ID="lblCreditInfo" runat="server" Font-Size="9pt" ForeColor="Black"></asp:Label>
<asp:Label ID="lblCreditWebSite" runat="server" Font-Size="9pt" Text='<%# Bind("CreditWebSite") %>' Visible="false"></asp:Label>
<asp:Label ID="lblCreditUserName" runat="server" Font-Size="9pt" Text='<%# Bind("CreditUserName") %>' Visible="false"></asp:Label>
<asp:Label ID="lblCreditPassword" runat="server" Font-Size="9pt" Text='<%# Bind("CreditPassword") %>' Visible="false"></asp:Label>
</div>
<br />
</div>
</asp:Panel>
<ajaxToolkit:HoverMenuExtender ID="hmeNotes" runat="server" PopupControlID="pnlNotes" PopupPosition="left" TargetControlID="imgNotes">
</ajaxToolkit:HoverMenuExtender>
</ItemTemplate>
<ItemStyle HorizontalAlign="center" />
<HeaderStyle HorizontalAlign="Left" />
</asp:TemplateField>
Before Postback After Postback
I was missing the panel for the balloon extender that was also on the page.
I'm working with datalists and this particular datalist I'm currently working on retrieves data from a database. It queries the drives of a particular PC in the database, and shows its Total and free space. Rows should look like this in the data list:
Drive Total Free Label
C:/ 84.3 22.2 NFTS
D:/ 64.2 21.3 NFTS
E:/ 22.2 11.1 DVD
The requirement is, If the Free space is 10% or below the font of the row should go red, Green if not. Here is my code:
<asp:DataList ID="DataList1" runat="server" BackColor="#FFFF99"
BorderColor="Black" BorderWidth="2px" CellPadding="4" Font-Bold="False"
Font-Italic="False" Font-Overline="False" Font-Size="Small" Font-Strikeout="False"
Font-Underline="False" RepeatDirection="Horizontal" style="z-index: 1; left: 421px; top: 137px; position: absolute; height: 132px; width: 495px"
ForeColor="#333333" GridLines="Vertical" DataSourceID="DriveInfo">
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<AlternatingItemStyle BackColor="#FFFBD6" Font-Bold="False" Font-Italic="False"
Font-Overline="False" Font-Strikeout="False" Font-Underline="False" />
<ItemStyle BackColor="#FFFBD6" Font-Bold="False" Font-Italic="False"
Font-Overline="False" Font-Strikeout="False" Font-Underline="False" ForeColor="#333333" />
<SelectedItemStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<ItemTemplate>
DriveName:
<asp:Label ID="DriveNameLabel" runat="server" style="font-weight: 700" Text='<%# Eval("DriveName") %>' />
<br />
Total: <b>
<asp:Label ID="TotalLabel" runat="server" Text='<%# Eval("Total") %>' />
GB</b><br />
Free: <b>
<asp:Label ID="FreeLabel" runat="server" Text='<%# Eval("Free") %>' />
GB</b><br />
Label:
<asp:Label ID="LabelLabel" runat="server" style="font-weight: 700" Text='<%# Eval("Label") %>' />
<br />
<br />
</ItemTemplate>
</asp:DataList>
You could set the CssClass attribute of the asp:label like this:
<asp:Label ID="FreeLabel" runat="server" Text='<%# Eval("Free") %>' CssClass='<%# float.Parse(Eval("Free")) / float.Parse(Eval("Total")) < 0.10 ? "red" : "" %>' />
You'd also need a css class:
.red {
color: red;
}