locked
Adding Paging functionality to Repeater without a table RRS feed

  • Question

  • User-1286266314 posted

    Hi,

    I'm trying to add Paging functionality to a repeater control, which contains data stored in an SQL database. 

    All of the examples of this which I have found online involve a table or a grid view, etc.

    But, my repeater contains divs & paragraph tags, etc. rather than a table.

    Does anyone know of any tutorials that will help me with this problem?

    Thanks a lot in advance

    Thursday, June 1, 2017 2:07 PM

Answers

  • User-707554951 posted

    Hi damosull,

    Working example for your reference:

    ASPX:

    <head runat="server">
        <style>
            div.row           { display: table-row; }
            div.columns       { width: 1000px; }
            div.columns div   { width: 220px; height: 20px; float: left; }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:Repeater ID="allshowevent" runat="server" >
                <HeaderTemplate>
                     <div class="row">
                    <div class="columns">
                        <div style="width:20%;font-weight:bold">
                            <asp:Label ID="label1" runat="server" Text="userName"/>
                        </div>
                        <div style="width:20%;font-weight:bold">
                            <asp:Label ID="label2" runat="server" Text="userDetail"/>
                        </div>
                    </div>
                </div>
                </HeaderTemplate>
                <ItemTemplate>
                <div class="row">
                    <div class="columns">
                        <div style="width:20%">
                            <asp:Label ID="label1" runat="server" Text='<%#Eval("userName") %>'/>
                        </div>
                        <div style="width:20%">
                            <asp:Label ID="label2" runat="server" Text='<%#Eval("userDetail") %>'/>
                        </div>
                    </div>
                </div>
                </ItemTemplate>
            <FooterTemplate>
            </FooterTemplate>
            </asp:Repeater>
            <div style="overflow: hidden;">
                <asp:Repeater ID="rptPaging" runat="server" OnItemCommand="rptPaging_ItemCommand">
                    <ItemTemplate>
                            <asp:LinkButton ID="btnPage" style="padding:20px; margin:5px; background:#ffa100; border:solid 1px #666; font:8pt tahoma;"
                                CommandName="Page" CommandArgument="<%# Container.DataItem %>" runat="server" ForeColor="White" Font-Bold="True"><%# Container.DataItem %>
                            </asp:LinkButton>
                   </ItemTemplate>
                </asp:Repeater>
           </div>
            <asp:SqlDataSource 
              ConnectionString="<%$ ConnectionStrings:ConnectionString %>" ID="SqlDataSource1" runat="server" SelectCommand="SELECT * FROM [UserList]">
          </asp:SqlDataSource>
        </form>
    </body>
    </html>

    ASPX.cs

    public int PageNumber
            {
                get
                {
                    if (ViewState["PageNumber"] != null)
                    {
                        return Convert.ToInt32(ViewState["PageNumber"]);
                    }
                    else
                    {
                        return 0;
                    }
                }
                set { ViewState["PageNumber"] = value; }
            }
            protected void Page_Load(object sender, EventArgs e)
            {
                BindRepeater();
            }
            private void BindRepeater()
            {
                string mystr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
                SqlConnection conn = new SqlConnection(mystr);
                conn.Open();
                DataTable dt = new DataTable();
                SqlCommand cmd = new SqlCommand("select * from [UserList]", conn);
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                da.Fill(dt);
                //Create the PagedDataSource that will be used in paging
                PagedDataSource pgitems = new PagedDataSource();
                pgitems.DataSource = dt.DefaultView;
                pgitems.AllowPaging = true;
                //Control page size from here 
                pgitems.PageSize = 3;
                pgitems.CurrentPageIndex = PageNumber;
                if (pgitems.PageCount > 1)
                {
                    rptPaging.Visible = true;
                    ArrayList pages = new ArrayList();
                    for (int i = 0; i <= pgitems.PageCount - 1; i++)
                    {
                        pages.Add((i + 1).ToString());
                    }
                    rptPaging.DataSource = pages;
                    rptPaging.DataBind();
                }
                else
                {
                    rptPaging.Visible = false;
                }
                //Finally, set the datasource of the repeater
                allshowevent.DataSource = pgitems;
                allshowevent.DataBind();
            }
            //This method will fire when clicking on the page no link from the pager repeater
            protected void rptPaging_ItemCommand(object source, System.Web.UI.WebControls.RepeaterCommandEventArgs e)
            {
                PageNumber = Convert.ToInt32(e.CommandArgument) - 1;
                BindRepeater();
            }

    The database is shown as below:

    Output screenshot as below:

    Best regards

    Cathy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 2, 2017 6:25 AM

All replies

  • User-707554951 posted

    Hi damosull,

    Working example for your reference:

    ASPX:

    <head runat="server">
        <style>
            div.row           { display: table-row; }
            div.columns       { width: 1000px; }
            div.columns div   { width: 220px; height: 20px; float: left; }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:Repeater ID="allshowevent" runat="server" >
                <HeaderTemplate>
                     <div class="row">
                    <div class="columns">
                        <div style="width:20%;font-weight:bold">
                            <asp:Label ID="label1" runat="server" Text="userName"/>
                        </div>
                        <div style="width:20%;font-weight:bold">
                            <asp:Label ID="label2" runat="server" Text="userDetail"/>
                        </div>
                    </div>
                </div>
                </HeaderTemplate>
                <ItemTemplate>
                <div class="row">
                    <div class="columns">
                        <div style="width:20%">
                            <asp:Label ID="label1" runat="server" Text='<%#Eval("userName") %>'/>
                        </div>
                        <div style="width:20%">
                            <asp:Label ID="label2" runat="server" Text='<%#Eval("userDetail") %>'/>
                        </div>
                    </div>
                </div>
                </ItemTemplate>
            <FooterTemplate>
            </FooterTemplate>
            </asp:Repeater>
            <div style="overflow: hidden;">
                <asp:Repeater ID="rptPaging" runat="server" OnItemCommand="rptPaging_ItemCommand">
                    <ItemTemplate>
                            <asp:LinkButton ID="btnPage" style="padding:20px; margin:5px; background:#ffa100; border:solid 1px #666; font:8pt tahoma;"
                                CommandName="Page" CommandArgument="<%# Container.DataItem %>" runat="server" ForeColor="White" Font-Bold="True"><%# Container.DataItem %>
                            </asp:LinkButton>
                   </ItemTemplate>
                </asp:Repeater>
           </div>
            <asp:SqlDataSource 
              ConnectionString="<%$ ConnectionStrings:ConnectionString %>" ID="SqlDataSource1" runat="server" SelectCommand="SELECT * FROM [UserList]">
          </asp:SqlDataSource>
        </form>
    </body>
    </html>

    ASPX.cs

    public int PageNumber
            {
                get
                {
                    if (ViewState["PageNumber"] != null)
                    {
                        return Convert.ToInt32(ViewState["PageNumber"]);
                    }
                    else
                    {
                        return 0;
                    }
                }
                set { ViewState["PageNumber"] = value; }
            }
            protected void Page_Load(object sender, EventArgs e)
            {
                BindRepeater();
            }
            private void BindRepeater()
            {
                string mystr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
                SqlConnection conn = new SqlConnection(mystr);
                conn.Open();
                DataTable dt = new DataTable();
                SqlCommand cmd = new SqlCommand("select * from [UserList]", conn);
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                da.Fill(dt);
                //Create the PagedDataSource that will be used in paging
                PagedDataSource pgitems = new PagedDataSource();
                pgitems.DataSource = dt.DefaultView;
                pgitems.AllowPaging = true;
                //Control page size from here 
                pgitems.PageSize = 3;
                pgitems.CurrentPageIndex = PageNumber;
                if (pgitems.PageCount > 1)
                {
                    rptPaging.Visible = true;
                    ArrayList pages = new ArrayList();
                    for (int i = 0; i <= pgitems.PageCount - 1; i++)
                    {
                        pages.Add((i + 1).ToString());
                    }
                    rptPaging.DataSource = pages;
                    rptPaging.DataBind();
                }
                else
                {
                    rptPaging.Visible = false;
                }
                //Finally, set the datasource of the repeater
                allshowevent.DataSource = pgitems;
                allshowevent.DataBind();
            }
            //This method will fire when clicking on the page no link from the pager repeater
            protected void rptPaging_ItemCommand(object source, System.Web.UI.WebControls.RepeaterCommandEventArgs e)
            {
                PageNumber = Convert.ToInt32(e.CommandArgument) - 1;
                BindRepeater();
            }

    The database is shown as below:

    Output screenshot as below:

    Best regards

    Cathy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 2, 2017 6:25 AM
  • User-1286266314 posted

    Hi Cathy,

    Thanks a lot for your response, and detailed solution.

    I'm trying to merge your code with mine.

    At the moment, I am populating the first repeater, which contains the Dates.

    But, I am trying to bind the nested repeaters within this, but am unsuccessful at the moment.

    Below, I have posted my latest code, as well as the repeaters which I am trying to bind.

    This below repeater is working as expected, with paging.

     <asp:Repeater ID="allshowevent" runat="server">
                            <HeaderTemplate>
                                <div class="row">
                                    <div class="columns">
                                        <div style="width: 20%; font-weight: bold">
                                            <asp:Label ID="label1" runat="server" Text="userName" />
                                        </div>
                                        <div style="width: 20%; font-weight: bold">
                                            <asp:Label ID="label2" runat="server" Text="userDetail" />
                                        </div>
                                    </div>
                                </div>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <div class="row">
                                    <div class="columns">
                                        <div style="width: 20%">
                                            <asp:Label ID="label1" runat="server" Text='<%# Eval("Schedule_Date", "{0:dddd, dd MMMM yyyy}") %>' />
                                        </div>
                                        <div style="width: 20%">
                                            <asp:Label ID="label2" runat="server" Text='<%# Eval("Schedule_Date", "{0:dddd, dd MMMM yyyy}") %>' />
                                        </div>
                                    </div>
                                </div>
                            </ItemTemplate>
                            <FooterTemplate>
                            </FooterTemplate>
                        </asp:Repeater>
                        <div style="overflow: hidden;">
                            <asp:Repeater ID="rptPaging" runat="server" OnItemCommand="rptPaging_ItemCommand">
                                <ItemTemplate>
                                    <asp:LinkButton ID="btnPage" Style="padding: 20px; margin: 5px; background: #ffa100; border: solid 1px #666; font: 8pt tahoma;"
                                        CommandName="Page" CommandArgument="<%# Container.DataItem %>" runat="server" ForeColor="White" Font-Bold="True"><%# Container.DataItem %>
                                    </asp:LinkButton>
                                </ItemTemplate>
                            </asp:Repeater>

    C#:

    private void BindRepeaterWithPaging()
        {
            string mystr = ConfigurationManager.ConnectionStrings["Employee_Roster_DBConnectionString1"].ConnectionString;
            SqlConnection conn = new SqlConnection(mystr);
            conn.Open();
            DataTable dt = new DataTable();
            SqlCommand comm = new SqlCommand("SELECT DISTINCT Start_Date, End_Date FROM My_Subscription WHERE Subscription_Id = 1", conn);
            SqlDataReader reader = comm.ExecuteReader();
            while (reader.Read())
            {
                startDate = Convert.ToDateTime(reader["Start_Date"]);
                endDate = Convert.ToDateTime(reader["End_Date"]);
            }
            conn.Close();
            using (SqlConnection con = new SqlConnection(connectionString))
            {
                using (SqlCommand cmd = new SqlCommand("SELECT DISTINCT CAST(Schedule_Date AS DATE) As Schedule_Date FROM My_Employee_Schedule WHERE Start_Time BETWEEN @startReportDate AND @endReportDate", con))
                {
                    cmd.Parameters.AddWithValue("@startReportDate", startDate);
                    cmd.Parameters.AddWithValue("@endReportDate", endDate);
                    //SqlCommand cmd = new SqlCommand("select * from [UserList]", conn);
                    SqlDataAdapter da = new SqlDataAdapter(cmd);
                    da.Fill(dt);
                    //Create the PagedDataSource that will be used in paging
                    PagedDataSource pgitems = new PagedDataSource();
                    pgitems.DataSource = dt.DefaultView;
                    pgitems.AllowPaging = true;
                    //Control page size from here 
                    pgitems.PageSize = 3;
                    pgitems.CurrentPageIndex = PageNumber;
                    if (pgitems.PageCount > 1)
                    {
                        rptPaging.Visible = true;
                        ArrayList pages = new ArrayList();
                        for (int i = 0; i <= pgitems.PageCount - 1; i++)
                        {
                            pages.Add((i + 1).ToString());
                        }
                        rptPaging.DataSource = pages;
                        rptPaging.DataBind();
                    }
                    else
                    {
                        rptPaging.Visible = false;
                    }
                    //Finally, set the datasource of the repeater
                    allshowevent.DataSource = pgitems;
                    allshowevent.DataBind();
                }
            }

    Below is my original code. It is working as expected. I am just trying to add paging to it.

    As you can see above, I've managed to add the first repeater into your code, but I am having trouble adding the rest.

    <%--<asp:Repeater ID="repSubscription" runat="server" OnItemDataBound="repSubscription_ItemDataBound">
                            <ItemTemplate>
                                <div class="col-lg-2">
                                    <div class="panel panel-default">
                                        <div class="panel-heading" style="background-color: #3A6EA5; color: white">
                                            <h4 class="panel-title">
                                                <%# Eval("Schedule_Date", "{0:dddd, dd MMMM yyyy}") %>
                                            </h4>
                                        </div>
                                        <!--panel-heading-->
                                        <div class="panel-body">
                                            <asp:Repeater ID="repDays" runat="server" OnItemDataBound="repDays_ItemDataBound">
                                                <ItemTemplate>
                                                    <h4><%# Eval("Start_Time", "{00:HH:mm}") %> - <%# Eval("End_Time" , "{00:HH:mm}") %></h4>
                                                    <asp:Repeater ID="repEmployee" runat="server">
                                                        <ItemTemplate>
                                                            <%# Eval("Employee_Name") %>
                                                        </ItemTemplate>
                                                    </asp:Repeater>
                                                    -
                                                    <asp:Repeater ID="repJobType" runat="server">
                                                        <ItemTemplate>
                                                            <i><%# Eval("Job_Title") %></i>
                                                        </ItemTemplate>
                                                    </asp:Repeater>
                                                    <hr />
                                                </ItemTemplate>
                                            </asp:Repeater>
                                        </div>
                                        <!--panel-body-->
                                    </div>
                                    <!--panel-default-->
                                </div>
                                <!--col-lg-2-->
                            </ItemTemplate>
                        </asp:Repeater>--%>
      protected void repSubscription_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            conn = new SqlConnection(connectionString);
            conn.Open();
            
            if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
            {//THIS STATEMENT DISPLAYS THE SHIFT DETAILS IF THERE IS A SHIFT OCURING ON THAT DAY. ORDER THESE BY THE START_TIME (STARTING W/ EARLIEST SHIFT)
                Repeater repDays = (Repeater)(e.Item.FindControl("repDays"));
                SqlCommand cmd = new SqlCommand("SELECT Start_Time, End_Time, Emp_ID, Job_ID FROM My_Employee_Schedule WHERE Schedule_Date = @Date ORDER BY Start_Time", conn);
                DateTime myDate = Convert.ToDateTime(DataBinder.Eval(e.Item.DataItem, "Schedule_Date"));
                cmd.Parameters.AddWithValue("@Date", myDate);
                SqlDataAdapter sda = new SqlDataAdapter(cmd);
                DataTable dt = new DataTable();
                sda.Fill(dt);
                repDays.DataSource = dt;
                repDays.DataBind();
            }
            conn.Close();
        }
    
        protected void repDays_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            conn = new SqlConnection(connectionString);
            conn.Open();
            if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
            {//THIS DISPLAYS THE EMPLOYEE WHO'S SHIFT IT IS. THIS IS USED USING THE FOREIGN KEY (EMP_ID) STORED IN THE MY_EMPLOYEE_SCHEDULE TABLE
                Repeater repEmployee = (Repeater)(e.Item.FindControl("repEmployee"));
                SqlCommand cmd = new SqlCommand("SELECT Employee_Name FROM My_Employee WHERE Employee_Id=@Emp_Id", conn);
                string Group_Id = DataBinder.Eval(e.Item.DataItem, "Emp_ID").ToString();
                cmd.Parameters.AddWithValue("@Emp_Id", Group_Id);
                SqlDataAdapter sda = new SqlDataAdapter(cmd);
                DataTable dt = new DataTable();
                sda.Fill(dt);
                repEmployee.DataSource = dt;
                repEmployee.DataBind();
    
                //THIS DISPLAYS THE JOB TYPE OF A PARTICULAR SHIFT, USING THE FOREIGN KEY (JOB_ID) STORED IN THE MY_EMPLOYEE_SCHEDULE TABLE
                Repeater repJobType = (Repeater)(e.Item.FindControl("repJobType"));
                SqlCommand cmd1 = new SqlCommand("SELECT Job_Title FROM My_Job_Type WHERE Job_Type_Id=@Job_Id", conn);
                string Group_Id1 = DataBinder.Eval(e.Item.DataItem, "Job_ID").ToString();
                cmd1.Parameters.AddWithValue("@Job_Id", Group_Id1);
                SqlDataAdapter sda1 = new SqlDataAdapter(cmd1);
                DataTable dt1 = new DataTable();
                sda1.Fill(dt1);
                repJobType.DataSource = dt1;
                repJobType.DataBind();
            }
            conn.Close();
        }


    Can you please help me with merging my original code with your paging example?

    Thanks a lot!

    Saturday, June 3, 2017 12:51 PM