Issue with paging - Dynamically loading UserControl via Jquery

2 posts, 0 answers
  1. Prasanth100
    Prasanth100 avatar
    17 posts
    Member since:
    Oct 2012

    Posted 10 Feb 2014 Link to this post

    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.
  2. Eyup
    Admin
    Eyup avatar
    3849 posts

    Posted 13 Feb 2014 Link to this post

    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
    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.
Back to Top