How to enable scrolling and disable paging in a dynamic gridview - asp.net

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

GridView templatefield textbox and AutoCompleteExtender ASP.NET

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....

Ajax updateProgress does not show progress for the right UpdatePannel

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)

AJAX HoverMenuExtender expands/displays on page load

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>

Using UpdatePanel.Update() and having no result

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.

Display pop-up with simple text upon Button click

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();
}
}

Resources