Emphasizing Page Numbers with Repeater Control

In my program, I have implemented a repeater control with paging functionality. When clicking on a page number within the repeater, it gets highlighted in a different color which works correctly. However, there is also a "View all" button present. The issue arises when clicking on this button as both the Page number 1 and the "View all" button get highlighted. I want to change the color of only the "View all" button without affecting the page numbers. How can I achieve this? Should I utilize JavaScript or handle it through backend coding?

<div style="overflow: hidden;" class="inner_bold_txt">
  <asp:LinkButton ID="lnkviewall" runat="server" Text="View All" 
          onclick="lnkviewall_Click"></asp:LinkButton> |
          <asp:LinkButton ID="lnkviewpaging" runat="server" Text="Back to Paging" 
          onclick="lnkviewpaging_Click" Visible="false"></asp:LinkButton> 
    <asp:Repeater ID="rptPaging" runat="server" OnItemDataBound="rptPaging_ItemDataBound" onitemcommand="rptPaging_ItemCommand">

        <ItemTemplate>
         <asp:LinkButton ID="btnPage" style="padding:8px; margin:2px; background:#ffa100; border:solid 1px #666; font:8pt tahoma;"
            CommandName="Page" CommandArgument="<%# Container.DataItem %>" runat="server" OnClick="btnPage_Click" ForeColor="White" Font-Bold="True" >
            <%# Container.DataItem %>
          </asp:LinkButton>
       </ItemTemplate>
    </asp:Repeater>
    </div>

Coding in the ASPX file:

protected void BindRepeter()
 {
        DataTable dt = new DataTable();
        dt = (DataTable)Session["news"];

        PagedDataSource pds = new PagedDataSource();
        DataView dv = new DataView(dt);
        pds.DataSource = dv;
            pds.AllowPaging = true;
            pds.PageSize = Convert.ToInt32(drpItems.SelectedValue.ToString());

            pds.CurrentPageIndex = PageNumber;
            if (PageNumber == 1110)
            {

               // rptPaging.DataBind();
                repeator.DataSource = dt;
                repeator.DataBind();
            }
            else{
        if (pds.PageCount > 1)
        {
            rptPaging.Visible = true;
            ArrayList pages = new ArrayList();
            pages.Add("View all".ToString());
            for (int i = 0; i < pds.PageCount; i++)
                pages.Add((i + 1).ToString());
            rptPaging.DataSource = pages;
            rptPaging.DataBind();
        }
        else
        {
            rptPaging.Visible = false;
        }

        repeator.DataSource = pds;
        repeator.DataBind();
            }
        Session["news"] = dt;
//}
}
...
javascriptasp.netpaginationrepeater

Answer №1

I successfully implemented the solution .... 

 protected void DisplayItems()
 {
        DataTable data = new DataTable();
        data = (DataTable)Session["events"];

        PagedDataSource pds = new PagedDataSource();
        DataView dv = new DataView(data);
        pds.DataSource = dv;
            pds.AllowPaging = true;
            pds.PageSize = Convert.ToInt32(dropDownItems.SelectedValue.ToString());

            pds.CurrentPageIndex = PageNumber;
            if (PageNumber == 1110)
            {
                repeaterEvents.DataSource = data;
                repeaterEvents.DataBind();
                rptPager.Visible = true;
                ArrayList pages = new ArrayList();
                pages.Add("Show all".ToString());
                for (int i = 0; i < pds.PageCount; i++)
                    pages.Add((i + 1).ToString());
                rptPager.DataSource = pages;
                rptPager.DataBind();
            }
            else
            {
                if (pds.PageCount > 1)
                 {
                    rptPager.Visible = true;
                    ArrayList pages = new ArrayList();
                    pages.Add("Show all".ToString());
                    for (int i = 0; i < pds.PageCount; i++)
                        pages.Add((i + 1).ToString());
                    rptPager.DataSource = pages;
                    rptPager.DataBind();
                }
                else
                {
                    rptPager.Visible = false;
                 }
                 repeaterEvents.DataSource = pds;
                repeaterEvents.DataBind();
        }
        Session["events"] = data;
//}
}
public int PageNumber
{
    get
    {
        if (ViewState["PageNumber"] != null)
            return Convert.ToInt32(ViewState["PageNumber"]);
        else
            return 0;
    }
    set
    {
        ViewState["PageNumber"] = value;
    }
}
protected void rptPager_ItemDataBound(object source, RepeaterItemEventArgs e)
{
    LinkButton lnk = (LinkButton)e.Item.FindControl("btnPage");

    if (showAll_ == false)
    {

        //    if (ViewState["viewall"] != "1")

        if (lnk.CommandArgument.ToString() == (PageNumber + 1).ToString())
        {

            lnk.ForeColor = System.Drawing.Color.Black;

        }

        else
        {
            {
                lnk.ForeColor = System.Drawing.Color.White;
            }
        }
    }
    else
    {
        if (lnk.CommandArgument.ToString() == "Show all".ToString())
        {
            lnk.ForeColor = System.Drawing.Color.Black;
        } 
    }
}
protected void rptPager_ItemCommand(object source, RepeaterCommandEventArgs e)
{


    PageNumber = Convert.ToInt32(e.CommandArgument.ToString().Replace("Show all","1111")) - 1;
    if (PageNumber == 1110)
    {
        showAll_ = true;
    }
    DisplayItems();



}


protected void btnReadMore_Click(object sender, EventArgs e)
{
    LinkButton button = (sender as LinkButton);
    DataTable data = new DataTable();
    if (Session["events"] != null)
    {
        Session["events"] = null;
    }
    data.Columns.Add("event_id", typeof(int));
    DataRow row;
    row = data.NewRow();
    row["event_id"] = button.CommandArgument;
    data.Rows.Add(row);
    Session["events"] = data;
    Response.Redirect("EventDetails.aspx");


}
protected void SortEvents_OnSelectedIndexChanged(object sender, EventArgs e)
{
    DataTable data = new DataTable();
    SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString);
    connection.Open();
    string sql;

    if(drpSort.SelectedIndex==1)
    {
        sql = "SELECT event_id,DATENAME(MONTH, event_start_date)+ ' ' + RIGHT('0' + DATENAME(DAY, event_start_date), 2) + ', ' + DATENAME(YEAR, event_start_date) AS event_start_date,DATENAME(MONTH, event_end_date)+ ' ' + RIGHT('0' + DATENAME(DAY, event_end_date), 2) + ', ' + DATENAME(YEAR, event_end_date) AS event_end_date,event_subject,event_short_desc,event_position_id,event  from dbo.events where convert(nvarchar(15),event_start_date,103) >= convert(nvarchar(15),getdate(),103) and convert(nvarchar(15),event_end_date,103) >= convert(nvarchar(15),getdate(),103) order by event_subject asc";
    }
    else if (drpSort.SelectedIndex == 2)
    {
        sql = "SELECT event_id,DATENAME(MONTH, event_start_date)+ ' ' + RIGHT('0' + DATENAME(DAY, event_start_date), 2) + ', ' + DATENAME(YEAR, event_start_date) AS event_start_date,DATENAME(MONTH, event_end_date)+ ' ' + RIGHT('0' + DATENAME(DAY, event_end_date), 2) + ', ' + DATENAME(YEAR, event_end_date) AS event_end_date,event_subject,event_short_desc,event_position_id,event  from dbo.events where convert(nvarchar(15),event_start_date,103) >= convert(nvarchar(15),getdate(),103) and convert(nvarchar(15),event_end_date,103) >= convert(nvarchar(15),getdate(),103)  order by event_subject desc";
    }
    else if (drpSort.SelectedIndex == 3)
    {
        sql = "SELECT event_id,DATENAME(MONTH, event_start_date)+ ' ' + RIGHT('0' + DATENAME(DAY, event_start_date), 2) + ', ' + DATENAME(YEAR, event_start_date) AS event_start_date,DATENAME(MONTH, event_end_date)+ ' ' + RIGHT('0' + DATENAME(DAY, event_end_date), 2) + ', ' + DATENAME(YEAR, event_end_date) AS event_end_date,event_subject,event_short_desc,event_position_id,event  from dbo.events where convert(nvarchar(15),event_start_date,103) >= convert(nvarchar(15),getdate(),103) and convert(nvarchar(15),event_end_date,103) >= convert(nvarchar(15),getdate(),103) ORDER BY CONVERT(DateTime, event_start_date,101) asc";
    }
    else if (drpSort.SelectedIndex == 4)
    {
        sql = "SELECT event_id,DATENAME(MONTH, event_start_date)+ ' ' + RIGHT('0' + DATENAME(DAY, event_start_date), 2) + ', ' + DATENAME(YEAR, event_start_date) AS event_start_date,DATENAME(MONTH, event_end_date)+ ' ' + RIGHT('0' + DATENAME(DAY, event_end_date), 2) + ', ' + DATENAME(YEAR, event_end_date) AS event_end_date,event_subject,event_short_desc,event_position_id,event  from dbo.events where convert(nvarchar(15),event_start_date,103) >= convert(nvarchar(15),getdate(),103) and convert(nvarchar(15),event_end_date,103) >= convert(nvarchar(15),getdate(),103) ORDER BY CONVERT(DateTime, event_start_date,101) DESC";
    }
    else
    {
        sql = "SELECT event_id,DATENAME(MONTH, event_start_date)+ ' ' + RIGHT('0' + DATENAME(DAY, event_start_date), 2) + ', ' + DATENAME(YEAR, event_start_date) AS event_start_date,DATENAME(MONTH, event_end_date)+ ' ' + RIGHT('0' + DATENAME(DAY, event_end_date), 2) + ', ' + DATENAME(YEAR, event_end_date) AS event_end_date,event_subject,event_short_desc,event_position_id,event  from dbo.events where convert(nvarchar(15),event_start_date,103) >= convert(nvarchar(15),getdate(),103) and convert(nvarchar(15),event_end_date,103) >= convert(nvarchar(15),getdate(),103) order by event_position_id";
    }
    SqlCommand cmd = new SqlCommand(sql, connection);
    SqlDataAdapter sda = new SqlDataAdapter(cmd);
    sda.Fill(data);
    Session["events"] = data;  
    DisplayItems();
    connection.Close();
}
protected void dropDownItems_SelectedIndexChanged(object sender, EventArgs e)
{
    DisplayItems();
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Perform a function within another function in Vue

I am dealing with two nested functions in Vue. The parent function needs to retrieve the value of an attribute, while the child function is responsible for using this attribute value to make an API call. How can I ensure that both parts are executed simult ...

javascriptvue.js

Retrieve the Smallest Value from an Array of Objects in a JSON document

My data.json contains information about travel deals. I am looking for the minimum cost when arriving in Amsterdam and departing from London. Could someone guide me on how to properly map through this data? { "currency":"EUR", "d ...

javascriptarraysjsonreactjs

Obtain the text that is shown for an input field

My website is currently utilizing Angular Material, which is causing the text format in my type='time' input field to change. I am looking for a way to verify this text, but none of the methods I have tried give me the actual displayed text. I a ...

javascriptcssangularjsseleniumangular-material

Implementing HTML5 form validation without a submit button and using a personalized error message

I am facing an issue with displaying the HTML5 inline validation bubble without the use of a submit button. The catch is, I am not allowed to use jQuery, only vanilla JavaScript. Here is the HTML I am working with: <a id="send" href="#">Send</a& ...

javascripthtmlformsvalidation

Guide to using Vue.js and Vue Router to create a sub menu for the children of the current route

I am currently working on customizing the navigation for my Vue application. My goal is to create a main menu at the top that displays all the root level routes, and a side menu that appears when navigating through child routes. Here is an example of what ...

javascriptuser-interfacevue.jsroutes

How to implement server-side rendering in Next.js 14 with GraphQL queries

I recently completed a Next.js project and configured Apollo Client. I integrated it with my components, as shown in my layout.tsx file: import { Inter } from "next/font/google"; import "./globals.css"; import ApolloProviderClient from ...

javascriptreactjsnext.jsgraphqlapollo-client

"What is the best way to connect a md-input to the value of a md-slider

I'm in the process of developing an application using Angular 2.0/meteor, and I'm facing a challenge with binding an input to md-slider. Below is the HTML code for the component: <div class="panel-body"> <form [formGroup]="filtreFor ...

javascriptjqueryangularmaterial-design

Caution: A duplicate key was found in ReactJS when attempting to flatten children

Currently, I am utilizing Tabs from Material UI to showcase a List component that is filtered by the tab. Take a look at the code snippet below from my Container Component: <Tabs className="DrawerTabs" ...

javascriptreactjsmaterial-ui

The style in {filename} was not applied as it has a MIME type of 'text/html', which is not a compatible stylesheet MIME type

Currently, I am working with an index.ejs file in conjunction with Express for a local host web server. However, I seem to be encountering 4 errors of 2 different types. You can view the errors here. Below is a snippet of my code: <html> <head> ...

javascripthtmlcssexpressejs

Tips for toggling the visibility of a <div> element using PHP code inside

I'm having trouble with a dropdown list that is supposed to show/hide some divs containing PHP files. However, when I try to toggle the visibility of the divs using the dropdown list, it doesn't seem to work as expected. Can anyone help me figure ...

javascriptphpjqueryhtmlcss

Using CSS to position an element relative/absolute within text inline

Need help aligning caret icons next to dynamically populated text in a navbar menu with dropdown tabs at any viewport size. Referring to positioning similar to the green carets shown here: https://i.stack.imgur.com/4XM7x.png Check out the code snippet bel ...

javascripthtmlcssflexbox

``There seems to be an issue with the Child component not appearing within the

I can't seem to get my child component to display correctly. Here is a snippet from App.js: <Route element={<ProtectedRoutes allowedRoles={[userRoles.FIELD_FORCE_MANAGER]} />} > <Route path="/dashboard-ff" element ...

javascriptreactjsreact-router-dom

What is the reason behind only seeing empty brackets [] when Array.prototype is displayed in

When looking at String.prototype, Object.prototype, and Boolean.prototype, we see that they all have a similar structure where the object {} is displayed. However, when it comes to Array.prototype, instead of displaying Array [], it outputs []. Why does ...

javascriptarraysgoogle-chrome

The JSON.parse function encountered an Uncaught SyntaxError due to an unexpected token 'o

I'm struggling with this JSON data: const info = [{ "ID":1,"Name":"Test", "subitem": [ {"idenID":1,"Code":"254630"}, {"idenID":2,"Code":"4566"}, {"idenID":3,"Code":"4566"} ] }]; console.log(JSON.parse(info)); //U ...

javascriptjson

Why isn't my Jquery click event able to download the csv file?

Initially, I was able to export a csv file using the html onclick element. However, when I switched to a jquery click event, the functionality stopped working. I don't understand why, as I believe the same function is being called. The Export.Expor ...

javascriptjqueryhtmlcsv

How can I fetch the ID from a posted AJAX request in PHP?

Is there a way to retrieve the data from an ajax request in PHP? I am able to successfully return a string of data using ajax, but I'm having trouble accessing the variable passed as a json object. How can I access a json object that only contains one ...

phpjavascriptjquery

Leverage nan for the transmission and retrieval of Float32Array within an addon module

I am currently attempting to utilize nan in order to perform calculations on an array of floating point numbers within an add-on and then return the result as a Float32Array. However, while the arguments have IsNumber() and NumberValue() functions, there ...

javascriptc++node.jsv8node.js-addon

Problem regarding data-th-id

I am facing an issue with a button that triggers a modal view and trying to capture its value using JavaScript. Here is how it's set up: <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#myModal" d ...

javascripthtmlthymeleaf

Troubleshooting problem with video recording functionality using HTML 5 media streams

My HTML 5 code for video recording and uploading is encountering a JavaScript error when the start button is clicked. The error messages I am receiving are: "TypeError: webcamstream.record is not a function streamRecorder = webcamstream.record();" "TypeE ...

javascripthtml

Executing Passport.js for Authentication

I've been trying to understand passport.js by watching tutorials online, but I'm still confused. Can someone clarify my doubts below? Please read the paragraph at the bottom first. If everything is set up correctly, this is how the login strateg ...

javascriptnode.jsexpresspassport.jspassport-local