I have a dynamic gridview, want vertical scrolling functionality and disable paging altogether
You can wrap the gridview inside a div and set the height of the div. Like
<div style="overflow: auto; width: 100%;height:200px">
--your Gridview
</div>
It worked for me ,where the paging is off for the Gridview.
in gridview PageIndexChanging you must change PageSize to big number size
gridview.PageSize = 100
or more than 100
for vertical scrolling use java
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="up" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="ContactName" HeaderText="Contact Name" />
<asp:BoundField DataField="City" HeaderText="City" />
<asp:BoundField DataField="Country" HeaderText="Country" />
</Columns>
</asp:GridView>
<asp:Button ID="Button1" runat="server" Text="Refresh" />
</ContentTemplate>
</asp:UpdatePanel>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/ScrollableGridViewPlugin_ASP.NetAJAXmin.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=GridView1.ClientID %>').Scrollable({
ScrollHeight: 300,
IsInUpdatePanel: true
});
});
</script>
Related
I am having some issues using AJAX tool kit.
I am having a GridView with a template field, which has a textbox.
I have added an AutoCompleteExtender for this textbox. I have also set the ServicePath and ServiceMethod properties of the AutoCompleteExtender.
I wont get any error, but when i type text in the textbox, i wont get anything returned. I will post the code below.
Since i am a newbie to AJAX, i dont know if there is some other things which needs to be set for using AJAX in my project.
I am using ASP.NET and VB.NET for code-behind.
<%# Page Language="vb" AutoEventWireup="false" MasterPageFile="~/Plain.Master" CodeBehind="BillPatient.aspx.vb" Inherits="Test.BillPatient" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="Content/themes/base/minified/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Content" runat="server">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnCancel" EventName="Click" />
</Triggers>
<ContentTemplate>
<center>
<br />
<h1>
<asp:Label ID="lblTitle" runat="server" Text="New OP Patient Bill" />
</h1>
<br />
<asp:Label ID="lblStatus" runat="server" ForeColor="Green" />
<table id="tblModify" class="table" frame="border" width="100%">
<tr>
<td>
<asp:Label ID="lblBillDetail" runat="server" Text="Bill Detail(s)" Visible="false"></asp:Label>
<asp:GridView ID="gvBillDetail" runat="server" AllowPaging="True" AutoGenerateColumns="False" CssClass="table" Width="100%">
<Columns>
<asp:BoundField DataField="Id" HeaderText="ID">
<HeaderStyle HorizontalAlign="Center" Width="50px" />
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:TemplateField HeaderText="Particulars">
<ItemTemplate>
<asp:TextBox ID="txtBillableItem" runat="server" Columns="30" MaxLength="30"></asp:TextBox>
<asp:AutoCompleteExtender ServiceMethod="GetCompletionList" MinimumPrefixLength="1" ID="txtBillableItem_AutoCompleteExtender" runat="server" DelimiterCharacters="" Enabled="True" ServicePath="~/BillDetail.asmx" TargetControlID="txtPatientName">
</asp:AutoCompleteExtender>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Billable Amount">
<ItemTemplate>
<asp:Label ID="lblBillableAmount" runat="server"></asp:Label>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" />
</asp:TemplateField>
<asp:ButtonField ButtonType="Button" CommandName="Modify" HeaderText="Modify" Text="Modify">
<ControlStyle CssClass="btn btn-info btn-xs" />
<HeaderStyle HorizontalAlign="Center" Width="90px" />
<ItemStyle HorizontalAlign="Center" />
</asp:ButtonField>
</Columns>
<PagerSettings Mode="NumericFirstLast" Position="TopAndBottom" />
<PagerStyle HorizontalAlign="Right" />
</asp:GridView>
<asp:ValidationSummary ID="ValidationSummary2" runat="server" ForeColor="#993333" Style="text-align: center" Visible="True" ValidationGroup="AddBillDetail" />
<asp:Button ID="btnSave" runat="server" CssClass="btn btn-primary" Text="Save" ValidationGroup="Save" />
<asp:Button ID="btnCancel" runat="server" CausesValidation="False" CssClass="btn" Text="Cancel" />
</center>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
Please forgive me for not formatting the code correctly :)
And my web service code is:-
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.ComponentModel
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<System.Web.Services.WebService(Namespace:="http://tempuri.org/")> _
<System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<ToolboxItem(False)> _
Public Class BillDetail
Inherits System.Web.Services.WebService
<WebMethod()> _
Public Function HelloWorld() As String
Return "Hello World"
End Function
<System.Web.Services.WebMethodAttribute(),System.Web.Script.Services.ScriptMethodAttribute()>
Public Shared Function GetCompletionList(ByVal prefixText As String, ByVal count As Integer) As String()
' Create array of movies
Dim movies() As String = {"Star Wars", "Star Trek", "Superman", "Memento", "Shrek", "Shrek II"}
' Return matching movies
Return (
From m In movies
Where m.StartsWith(prefixText, StringComparison.CurrentCultureIgnoreCase)
Select m).Take(count).ToArray()
End Function
End Class
I hope the above information is sufficient. If not, please comment i will provide more info.
Thank you!
I got the solution for this myself.
I just stopped using WebService and put my ServiceMethod in my code-behind.
Set the property ServicePath to your own page. i.e If AutoCompleteExtender is in Test.aspx and the Service method is in Test.aspx.vb, then the properties will be:-
ServiceMethod="GetCompletionList"
and
ServicePath="~/Test.aspx.vb"
if the ServiceMethod is actually getting executed but if dropdown is not visible in U.I, then add the follwing code in head tag in html.
<style type="text/css" >
.popUpDialog
{
z-index: 99 !important;
}
.autoComplete_listMain
{
z-index: 2147483647 !important;
background: #ffffff;
border: solid 2px #808080;
color: #000000;
}
</style>
i dont know why i should add this , but it surely did work for me! :)
if anyone knows why, please be free to comment here....
I have an Ajax panel first panel inside another panel second panel and an updateProgress linked to the first panel
With this I have two problems:
The updateProgress show the progress image when the second panel updates but not when the first panel updates
To update the 2nd panel I have to press the button inside the second panel twice
<asp:UpdateProgress ID="UProc_TabContainer" runat="server" AssociatedUpdatePanelID="UP_FirstPanel"
DisplayAfter="1">
<ProgressTemplate>
<div id="dvProgress" runat="server" style="position: absolute; top: 300px; left: 450px;
text-align: center;">
<asp:Image ID="wait" runat="server" ImageUrl="~/Images/wait3.gif" Height="120px"
Width="128px" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UP_FirstPanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<script language="javascript" type="text/javascript">
function divexpandcollapse(divname) {
var div = document.getElementById(divname);
var img = document.getElementById('img' + divname);
if (div.style.display == "none") {
div.style.display = "block"; img.src = "Images/Icons/minus.jpg";
} else { div.style.display = "none"; img.src = "Images/Icons/plus.jpg"; }
}</script>
<asp:DropDownList ID="DateSelection" runat="server" AutoPostBack="True" Height="21px"
Width="134px">
</asp:DropDownList>
<asp:GridView ID="GV_SL" runat="server" OnRowDataBound="gvUserInfo_RowDataBound"
OnRowCommand="GV_SL_RowCommand" AutoGenerateColumns="false" DataSourceID="SQL_Weekly">
<Columns>
<asp:TemplateField ItemStyle-Width="50px">
<ItemTemplate>
<a href="JavaScript:divexpandcollapse('div<%# Eval("name") %>');">
<img id="imgdiv<%# Eval("name") %>" width="15px" border="0" src="Images/Icons/plus.jpg" /></a></ItemTemplate>
<ItemStyle Width="40px" />
</asp:TemplateField>
<asp:BoundField DataField="name" HeaderText="Group" SortExpression="name" />
<asp:BoundField DataField="ASL" HeaderText="SL% Act" ReadOnly="True" SortExpression="ASL" />
<asp:TemplateField>
<ItemTemplate>
<tr>
<td colspan="100%">
<div id="div<%# Eval("name") %>" style="display: none; position: relative; left: 15px;
overflow: auto">
<asp:GridView ID="gvChildGrid" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Metric" HeaderText=" " HeaderStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="Actual" HeaderText="Actual" HeaderStyle-HorizontalAlign="Left" />
</Columns>
</asp:GridView>
<br />
<asp:UpdatePanel ID="UP_SecondPanel" runat="server" UpdateMode="Always">
<ContentTemplate>
<%-- --%>
<asp:TextBox ID="TB_Comments" runat="server" Text="Example: Text will be entered here"
TextMode="MultiLine" Rows="4" Width="510px"></asp:TextBox>
<asp:Button ID="B_Save" runat="server" CommandName="AddText" CommandArgument="<%# CType(Container,GridViewRow).RowIndex %>"
Text="Save Changes" />
</ContentTemplate>
</asp:UpdatePanel>
<%-- --%>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DateSelection" EventName="SelectedIndexChanged" />
</Triggers>
Any ideas on what I'm doing wrong?
Thanks
I have resolved the 1st problem presented by removing AssociatedUpdatePanelID="UP_FirstPanel" from the UpdateProgress. I hope it helps someone
I've created a separate posting with further detail and simplified code for the second problem (Nested Ajax UpdatePanel in Gridview needs button control to be clicked twice)
Anybody help me to resolve this issue ?
I am displaying one grid on hover of linkbutton using AJAX hovermenu extender.
But when page is loading first time or on postback, that grid is displaying.
Below is the code:
<asp:LinkButton ID="lnkItm" runat="server" Text="Click"></asp:LinkButton>
<AjaxToolKit:HoverMenuExtender ID="hme2" runat="Server" TargetControlID="lnkItm"
PopupControlID="PopupMenu" HoverCssClass="popupHover" PopupPosition="Right" OffsetX="0"
OffsetY="0" PopDelay="50" />
<asp:Panel CssClass="PopupMenu" ID="PopupMenu" runat="server">
<asp:GridView ID="grd" runat="server" Width="100px" AutoGenerateColumns="False">
<Columns>
...
</Columns>
</asp:GridView>
</asp:Panel>
Please let me know how to resolve this issue.
Add this.It will hide the popup when the page loads.
<style type="text/css">
.PopupMenu
{
display: none;
}
</style>
I have an aspx web page contains jquery mobile, I don't know why, whenever I call UpdatePanel.Update() in my code a white page appears as a result! of course the page is not empty because when I view source code (ctrl+u) all content are available. The strange point is for one call in a page, 2 ajax requests submit so two different responses received either two different post parameters. Post in first request is like this:
ScriptManager: UpdatePanel1|grdRequests$ctl03$btnCancel
__ASYNCPOST: true
__EVENTARGUMENT: nothing
__EVENTTARGET: nothing
__EVENTVALIDATION: value here
__LASTFOCUS: nothing
__VIEWSTATE value here
and response is like this:
1|#| |4|5451|updatePanel|UpdatePanel1|
but in second request there is no ScriptManager and ASYNCPOST parameteres, also in response only old content could see no more data. any idea?
CLIENT SIDE:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="ConfOne.aspx.cs" Inherits="ConfDC"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.1.1.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server" dir="rtl" defaultbutton="btnpage" name="form1">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode = "Conditional">
<ContentTemplate>
<table>
<tr>
<td>
<asp:Button runat="server" ID="btnpage" Width="1px" Height="1px" Visible="false"/>
<asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
</td>
</tr>
</table>
<div id="mcnt">
<div data-role="page">
<div data-role="content" style="padding: 10px; text-align: center;">
<asp:GridView ID="tbls runat="server" AutoGenerateColumns="False" Width="100%"
CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt"
CellPadding="1" CellSpacing="1" AllowPaging="True" DataKeyNames="Id" OnRowCommand="tbls_RowCommand"
OnPageIndexChanging="tbls_PageIndexChanging">
<Columns>
<asp:TemplateField HeaderText="Amount">
<ItemTemplate>
<asp:Label ID="lblAmount" runat="server" Text='<%# Bind("Amount") %>'></asp:Label>
</ItemTemplate>
<ItemStyle/>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Button Text="Decline" ID="btnCancel" CommandName="CancelRequest" runat="server"
CommandArgument='<%# DataBinder.Eval(Container, "DataItem.id") %>' />
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Button Text="Accept" ID="btnConfirm" CommandName="ConfirmRequest" runat="server"
OnClientClick="return confirm('Are you sure?');"
CommandArgument='<%# DataBinder.Eval(Container, "DataItem.id") %>' />
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
</Columns>
<PagerStyle CssClass="pgr"></PagerStyle>
<AlternatingRowStyle CssClass="alt"></AlternatingRowStyle>
</asp:GridView>
</div>
<div id="rsnCnt">
<asp:Panel ID="pnlReasons" Width="100%" runat="server" Visible="false">
<fieldset>
<asp:TextBox runat="server" ID="txtReasons" CssClass="TextArea" Height="70px" Width="100%"
TextMode="MultiLine"></asp:TextBox>
<asp:Label ID="lblError" runat="server" ForeColor="Red"></asp:Label>
<div id="btnActionCnt">
<div style="float:right;">
<asp:Button type="button" runat="server" ID="btnCancelRequest" Width="100px" class="groovybutton2"
Text="OK " OnClientClick="return confirm('are you sure?');" />
</div>
<div style="float:left;">
<asp:Button type="button" runat="server" ID="btnCancel" class="groovybutton2" Text="NOT OK"
onmouseover="" onmouseout=""
OnClick="btnCancel_Click" Height="25px" Width="100px" />
</div>
</div>
</fieldset>
</asp:Panel>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
SERVER SIDE:
protected void tbls_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "CancelRequest")
{
pnlReasons.Visible = true;
UpdatePanel1.Update();
}
}
Where are you binding your gridview..
You need to bind that in
private void Page_Load()
{
if (!IsPostBack)
{
// Need to Bind your grid here
}
}
I dont know why but when I removed updatepanel works ok.
I have a button placed on each row of my GridView. When the user presses the button I would like to display a simple popup where I show text. Part of the text is the DataKeyName related to the specific row.
I already tried with ModalPopupExtender myMPE triggered by the button and I used a Panel myPanel as PopupControlID. The problem is that the TextBox txtPanel of the Panel where I place the DataKeyName value is always empty. I tried to debug without myMPE and the txtPanel of the Panel is correctly filled. I guess it makes a mess with the postbacks.
Anybody knows a solution?
Are you doing a manual refresh of the UpdaePanel on the modal popup panel ? If not, try manually refreshing the updatePanel & set its updateMode to Conditional.
Check above example
ASPX
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
<link rel="Stylesheet" type="text/css" href="css/StyleSheet.css" />
<style type="text/css">
.modal
{
background-color: Aqua;
width: 150px;
height: 100px;
padding: 6px;
}
.modalBackground
{
background-color: #CCCCFF;
filter: alpha(opacity=40);
opacity: 0.5;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:UpdatePanel ID="upnGrid" runat="server">
<ContentTemplate>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:GridView CssClass=".Grid-blue" ID="GridView1" runat="server" AllowPaging="True"
AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="ProductID" DataSourceID="LinqDataSource1">
<Columns>
<asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False"
ReadOnly="True" SortExpression="ProductID" />
<asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" />
<asp:BoundField DataField="SupplierID" HeaderText="SupplierID" SortExpression="SupplierID" />
<asp:BoundField DataField="CategoryID" HeaderText="CategoryID" SortExpression="CategoryID" />
<asp:BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit" SortExpression="QuantityPerUnit" />
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" />
<asp:BoundField DataField="UnitsInStock" HeaderText="UnitsInStock" SortExpression="UnitsInStock" />
<asp:BoundField DataField="UnitsOnOrder" HeaderText="UnitsOnOrder" SortExpression="UnitsOnOrder" />
<asp:BoundField DataField="ReorderLevel" HeaderText="ReorderLevel" SortExpression="ReorderLevel" />
<asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued" SortExpression="Discontinued" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lbEdit" runat="server" OnClick="lbEdit_Click">Edit</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:LinqDataSource ID="LinqDataSource1" runat="server" ContextTypeName="DataClassesDataContext"
EntityTypeName="" TableName="Products">
</asp:LinqDataSource>
</div>
<ajaxToolkit:ModalPopupExtender BackgroundCssClass="modalBackground" ID="mpeDetails"
CancelControlID="btnClosePopup" TargetControlID="btnShowModal" PopupControlID="pnlDetails"
runat="server">
</ajaxToolkit:ModalPopupExtender>
<asp:Button ID="btnShowModal" runat="server" Text="Button" Style="display: none" />
<asp:Panel ID="pnlDetails" CssClass="modal" runat="server" Style="display: none">
<asp:UpdatePanel ID="upnDetails" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<label>
ID:</label><asp:TextBox ID="txtID" runat="server"></asp:TextBox>
<br />
<label>
Name:</label>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<br />
</ContentTemplate>
</asp:UpdatePanel>
<div>
<asp:Button ID="btnClosePopup" runat="server" Text="Cancel" /></div>
</asp:Panel>
</form>
</body>
</html>
.CS
protected void lbEdit_Click(object sender, EventArgs e)
{
LinkButton lbTemp = (LinkButton)sender;
if (lbTemp != null)
{
GridViewRow grow =(GridViewRow) lbTemp.NamingContainer;
int id = Convert.ToInt32(GridView1.DataKeys[grow.RowIndex][0].ToString());
mpeDetails.Show();
txtID.Text = id.ToString();
upnDetails.Update();
}
}