Prasanth100
Top achievements
Rank 1
Rank 1
Prasanth100
asked on 10 Feb 2014, 07:43 AM
Hello Gurus,
I have posted my Code below. here the user control is loaded dynamically via jquery,
how to implement paging via jquery, I have refered few sites but not sure how to implement in my scenario.
few of sites
http://bunjeeb.com/2011/07/06/asp-net-grid-view-with-jquery-ajax-dynamic-load-for-ascx-html/http://aspsolutionkirit.blogspot.in/2014/01/load-usercontrol-dynamically-using.html
My code below:
-----------------------Aspx page--------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#ShowCustomers").click(function () {
$.ajax({
url: "Default2.aspx/ShowCustomers",
type: "POST",
data: "",
contentType: "application/json; charset=utf-8",
success: OnSuccess,
error: OnError
});
});
});function OnSuccess(data) {
$("#UpdatePanel").html(data.d);
}function OnError() {
$("#UpdatePanel").html("Error!");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>
Add Usercontrol Dinamically in ASP.NET</h3>
<div>
<input type="button" id="ShowCustomers" value="Show Customers" />
</div>
<div id="UpdatePanel">
</div>
</div>
</form>
</body>
</html>
-----------Code behind------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.IO;public partial class Controls_Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{}[WebMethod]
public static string ShowCustomers()
{
string content = "";
Page pg = new Page();
UserControl ucGadgets = (UserControl)pg.LoadControl("~/Controls/UCWeatherReport.ascx");
pg.Controls.Add(ucGadgets);
StringWriter sw = new StringWriter();
HttpContext.Current.Server.Execute(pg, sw, true);
content = sw.ToString();
return content;
}}
UCWeatherReport.ascx
------------------------------------
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UCWeatherReport.ascx.cs"
Inherits="Controls_UCWeatherReport" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.grid_paging
{
background-color: Green;
padding: 4px;
width: 238px;
}
.grid_paging a
{
color: #343434;
text-decoration: none;
padding-right: 4px;
margin-left: 4px;
}
.grid_paging a:hover
{
text-decoration: underline;
color: Orange;
border-color: Orange;
border-style: solid;
}
</style></head>
<body>
<form id="form1" runat="server">
<div id="pager">
<asp:GridView ID="Gv1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="ID">
<ItemTemplate>
<asp:Label ID="lblID" runat="server" Text='<%#Eval("ID") %>' Visible="true"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Text='<%# Eval("FName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="DOB">
<ItemTemplate>
<asp:Label ID="lblDOB" runat="server" Text='<%# Eval("DOB") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField></Columns>
</asp:GridView>
<asp:DataList CellPadding="5" RepeatDirection="Horizontal" runat="server" ID="dlPager"
OnItemCommand="dlPager_ItemCommand" CssClass="grid_paging">
<ItemTemplate>
<asp:LinkButton Enabled='<%#Eval("Enabled") %>' runat="server" ID="lnkPageNo" Text='<%#Eval("Text") %>'
CommandArgument='<%#Eval("Value") %>' CommandName="PageNo" CausesValidation="false"></asp:LinkButton>
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
UCWeatherReport.ascx.cs
---------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;public partial class Controls_UCWeatherReport : System.Web.UI.UserControl
{
protected void Page_PreRender(object sender, EventArgs e)
{
// Workaround to prevent clicking twice on the pager to have results displayed properly
this.Gv1.DataBind();
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGrid(1);
}
}
private void BindGrid(int currentPage)
{
List<Employee> empList = new List<Employee>();
empList.Add(new Employee() { ID = 1, FName = "John", DOB = DateTime.Parse("12/11/1971") });
empList.Add(new Employee() { ID = 2, FName = "Mary", DOB = DateTime.Parse("01/17/1961") });
empList.Add(new Employee() { ID = 3, FName = "Amber", DOB = DateTime.Parse("12/23/1971") });
empList.Add(new Employee() { ID = 4, FName = "Kathy", DOB = DateTime.Parse("11/15/1976") });
empList.Add(new Employee() { ID = 5, FName = "Lena", DOB = DateTime.Parse("05/11/1978") });
empList.Add(new Employee() { ID = 6, FName = "John1", DOB = DateTime.Parse("12/11/1971") });
empList.Add(new Employee() { ID = 7, FName = "Mary1", DOB = DateTime.Parse("01/17/1961") });
empList.Add(new Employee() { ID = 8, FName = "Amber1", DOB = DateTime.Parse("12/23/1971") });
empList.Add(new Employee() { ID = 9, FName = "Kathy1", DOB = DateTime.Parse("11/15/1976") });
empList.Add(new Employee() { ID = 10, FName = "Lena1", DOB = DateTime.Parse("05/11/1978") });
empList.Add(new Employee() { ID = 11, FName = "John2", DOB = DateTime.Parse("12/11/1971") });
int TotalCount = empList.Count();
var pgNo = currentPage;
var pgRec = 10;
empList = empList.Skip((pgNo - 1) * pgRec).Take(pgRec).ToList();
Gv1.DataSource = empList;
Gv1.DataBind();
generatePager(TotalCount, pgRec, pgNo);
}
public void generatePager(int totalRowCount, int pageSize, int currentPage)
{
int totalLinkInPage = 3;
int totalPageCount = (int)Math.Ceiling((decimal)totalRowCount / pageSize);
int startPageLink = Math.Max(currentPage - (int)Math.Floor((decimal)totalLinkInPage / 2), 1);
int lastPageLink = Math.Min(startPageLink + totalLinkInPage - 1, totalPageCount);
if ((startPageLink + totalLinkInPage - 1) > totalPageCount)
{
lastPageLink = Math.Min(currentPage + (int)Math.Floor((decimal)totalLinkInPage / 2), totalPageCount);
startPageLink = Math.Max(lastPageLink - totalLinkInPage + 1, 1);
}
List<ListItem> pageLinkContainer = new List<ListItem>();if (startPageLink != 1)
{
int prevcounts = currentPage - 1;
pageLinkContainer.Add(new ListItem("First", prevcounts.ToString(), currentPage != 1));
}
for (int i = startPageLink; i <= lastPageLink; i++)
{
pageLinkContainer.Add(new ListItem(i.ToString(), i.ToString(), currentPage != i));
}
if (lastPageLink != totalPageCount)
{
int Nextcounts = currentPage + 1;
pageLinkContainer.Add(new ListItem("Last", Nextcounts.ToString(), currentPage != totalPageCount));
}dlPager.DataSource = pageLinkContainer;
dlPager.DataBind();
}
protected void dlPager_ItemCommand(object source, DataListCommandEventArgs e)
{
if (e.CommandName == "PageNo")
{
BindGrid(Convert.ToInt32(e.CommandArgument));
}
}
class Employee
{
public int ID { get; set; }
public string FName { get; set; }
public DateTime DOB { get; set; }
}
}
I have pasted my code above,pls help me to create the paging with same scenario.
Thanks in Advance.
I have posted my Code below. here the user control is loaded dynamically via jquery,
how to implement paging via jquery, I have refered few sites but not sure how to implement in my scenario.
few of sites
http://bunjeeb.com/2011/07/06/asp-net-grid-view-with-jquery-ajax-dynamic-load-for-ascx-html/http://aspsolutionkirit.blogspot.in/2014/01/load-usercontrol-dynamically-using.html
My code below:
-----------------------Aspx page--------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#ShowCustomers").click(function () {
$.ajax({
url: "Default2.aspx/ShowCustomers",
type: "POST",
data: "",
contentType: "application/json; charset=utf-8",
success: OnSuccess,
error: OnError
});
});
});function OnSuccess(data) {
$("#UpdatePanel").html(data.d);
}function OnError() {
$("#UpdatePanel").html("Error!");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>
Add Usercontrol Dinamically in ASP.NET</h3>
<div>
<input type="button" id="ShowCustomers" value="Show Customers" />
</div>
<div id="UpdatePanel">
</div>
</div>
</form>
</body>
</html>
-----------Code behind------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.IO;public partial class Controls_Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{}[WebMethod]
public static string ShowCustomers()
{
string content = "";
Page pg = new Page();
UserControl ucGadgets = (UserControl)pg.LoadControl("~/Controls/UCWeatherReport.ascx");
pg.Controls.Add(ucGadgets);
StringWriter sw = new StringWriter();
HttpContext.Current.Server.Execute(pg, sw, true);
content = sw.ToString();
return content;
}}
UCWeatherReport.ascx
------------------------------------
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UCWeatherReport.ascx.cs"
Inherits="Controls_UCWeatherReport" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.grid_paging
{
background-color: Green;
padding: 4px;
width: 238px;
}
.grid_paging a
{
color: #343434;
text-decoration: none;
padding-right: 4px;
margin-left: 4px;
}
.grid_paging a:hover
{
text-decoration: underline;
color: Orange;
border-color: Orange;
border-style: solid;
}
</style></head>
<body>
<form id="form1" runat="server">
<div id="pager">
<asp:GridView ID="Gv1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="ID">
<ItemTemplate>
<asp:Label ID="lblID" runat="server" Text='<%#Eval("ID") %>' Visible="true"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Text='<%# Eval("FName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="DOB">
<ItemTemplate>
<asp:Label ID="lblDOB" runat="server" Text='<%# Eval("DOB") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField></Columns>
</asp:GridView>
<asp:DataList CellPadding="5" RepeatDirection="Horizontal" runat="server" ID="dlPager"
OnItemCommand="dlPager_ItemCommand" CssClass="grid_paging">
<ItemTemplate>
<asp:LinkButton Enabled='<%#Eval("Enabled") %>' runat="server" ID="lnkPageNo" Text='<%#Eval("Text") %>'
CommandArgument='<%#Eval("Value") %>' CommandName="PageNo" CausesValidation="false"></asp:LinkButton>
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
UCWeatherReport.ascx.cs
---------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;public partial class Controls_UCWeatherReport : System.Web.UI.UserControl
{
protected void Page_PreRender(object sender, EventArgs e)
{
// Workaround to prevent clicking twice on the pager to have results displayed properly
this.Gv1.DataBind();
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGrid(1);
}
}
private void BindGrid(int currentPage)
{
List<Employee> empList = new List<Employee>();
empList.Add(new Employee() { ID = 1, FName = "John", DOB = DateTime.Parse("12/11/1971") });
empList.Add(new Employee() { ID = 2, FName = "Mary", DOB = DateTime.Parse("01/17/1961") });
empList.Add(new Employee() { ID = 3, FName = "Amber", DOB = DateTime.Parse("12/23/1971") });
empList.Add(new Employee() { ID = 4, FName = "Kathy", DOB = DateTime.Parse("11/15/1976") });
empList.Add(new Employee() { ID = 5, FName = "Lena", DOB = DateTime.Parse("05/11/1978") });
empList.Add(new Employee() { ID = 6, FName = "John1", DOB = DateTime.Parse("12/11/1971") });
empList.Add(new Employee() { ID = 7, FName = "Mary1", DOB = DateTime.Parse("01/17/1961") });
empList.Add(new Employee() { ID = 8, FName = "Amber1", DOB = DateTime.Parse("12/23/1971") });
empList.Add(new Employee() { ID = 9, FName = "Kathy1", DOB = DateTime.Parse("11/15/1976") });
empList.Add(new Employee() { ID = 10, FName = "Lena1", DOB = DateTime.Parse("05/11/1978") });
empList.Add(new Employee() { ID = 11, FName = "John2", DOB = DateTime.Parse("12/11/1971") });
int TotalCount = empList.Count();
var pgNo = currentPage;
var pgRec = 10;
empList = empList.Skip((pgNo - 1) * pgRec).Take(pgRec).ToList();
Gv1.DataSource = empList;
Gv1.DataBind();
generatePager(TotalCount, pgRec, pgNo);
}
public void generatePager(int totalRowCount, int pageSize, int currentPage)
{
int totalLinkInPage = 3;
int totalPageCount = (int)Math.Ceiling((decimal)totalRowCount / pageSize);
int startPageLink = Math.Max(currentPage - (int)Math.Floor((decimal)totalLinkInPage / 2), 1);
int lastPageLink = Math.Min(startPageLink + totalLinkInPage - 1, totalPageCount);
if ((startPageLink + totalLinkInPage - 1) > totalPageCount)
{
lastPageLink = Math.Min(currentPage + (int)Math.Floor((decimal)totalLinkInPage / 2), totalPageCount);
startPageLink = Math.Max(lastPageLink - totalLinkInPage + 1, 1);
}
List<ListItem> pageLinkContainer = new List<ListItem>();if (startPageLink != 1)
{
int prevcounts = currentPage - 1;
pageLinkContainer.Add(new ListItem("First", prevcounts.ToString(), currentPage != 1));
}
for (int i = startPageLink; i <= lastPageLink; i++)
{
pageLinkContainer.Add(new ListItem(i.ToString(), i.ToString(), currentPage != i));
}
if (lastPageLink != totalPageCount)
{
int Nextcounts = currentPage + 1;
pageLinkContainer.Add(new ListItem("Last", Nextcounts.ToString(), currentPage != totalPageCount));
}dlPager.DataSource = pageLinkContainer;
dlPager.DataBind();
}
protected void dlPager_ItemCommand(object source, DataListCommandEventArgs e)
{
if (e.CommandName == "PageNo")
{
BindGrid(Convert.ToInt32(e.CommandArgument));
}
}
class Employee
{
public int ID { get; set; }
public string FName { get; set; }
public DateTime DOB { get; set; }
}
}
I have pasted my code above,pls help me to create the paging with same scenario.
Thanks in Advance.
1 Answer, 1 is accepted
0
Hi Prasanth,
You can make avail of the in-built paging functionality of RadGrid:
http://demos.telerik.com/aspnet-ajax/grid/examples/functionality/paging/basic-paging/defaultcs.aspx
And load the control using AjaxRequest:
http://www.telerik.com/help/aspnet-ajax/ajax-onajaxrequest.html
Hope this helps.
Regards,
Eyup
Telerik
You can make avail of the in-built paging functionality of RadGrid:
http://demos.telerik.com/aspnet-ajax/grid/examples/functionality/paging/basic-paging/defaultcs.aspx
And load the control using AjaxRequest:
http://www.telerik.com/help/aspnet-ajax/ajax-onajaxrequest.html
Hope this helps.
Regards,
Eyup
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.