Datapager responsive

Reply

Member

16 Points

Datapager responsive

Apr 05, 2020 08:28 AM|clembo67|LINK

As I am using a responsive HTML template that allows you to use the application even on small screen devices I would like, as for the listview control, that the datapager would adapt to the screen size by displaying limit page numbers to fit in the available sizes. Unfortunately even using CSS I can't get this effect. Is there another way?

Reply

Yang Shen

Contributor

2860 Points

910 Posts

Re: Datapager responsive

Apr 06, 2020 08:16 AM|Yang Shen|LINK

Hi clembo67,

clembo67
that the datapager would adapt to the screen size by displaying limit page numbers to fit in the available sizes.

The requirement is not clear, let's take below demo from Using DataPager control with example in ASP.Net as an example, what do you want for this listview?

aspx:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ListView ID="lvCustomers" runat="server" GroupPlaceholderID="groupPlaceHolder1"
                ItemPlaceholderID="itemPlaceHolder1" OnPagePropertiesChanging="OnPagePropertiesChanging">
                <LayoutTemplate>
                    <table cellpadding="0" cellspacing="0">
                        <tr>
                            <th>CustomerId
                            </th>
                            <th>ContactName
                            </th>
                            <th>Country
                            </th>
                        </tr>
                        <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
                        <tr>
                            <td colspan="3">
                                <asp:DataPager ID="DataPager1" runat="server" PagedControlID="lvCustomers" PageSize="10">
                                    <Fields>
                                        <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="false" ShowPreviousPageButton="true"
                                            ShowNextPageButton="false" />
                                        <asp:NumericPagerField ButtonType="Link" />
                                        <asp:NextPreviousPagerField ButtonType="Link" ShowNextPageButton="true" ShowLastPageButton="false" ShowPreviousPageButton="false" />
                                    </Fields>
                                </asp:DataPager>
                            </td>
                        </tr>
                    </table>
                </LayoutTemplate>
                <GroupTemplate>
                    <tr>
                        <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
                    </tr>
                </GroupTemplate>
                <ItemTemplate>
                    <td>
                        <%# Eval("CustomerId") %>
                    </td>
                    <td>
                        <%# Eval("ContactName") %>
                    </td>
                    <td>
                        <%# Eval("Country") %>
                    </td>
                </ItemTemplate>
            </asp:ListView>
        </div>
    </form>
</body>
</html>

cs:

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                this.BindListView();
            }
        }

        public void BindListView()
        {
            DataTable dt = new DataTable();
            dt.Columns.AddRange(new DataColumn[3] { new DataColumn("CustomerId"), new DataColumn("ContactName"), new DataColumn("Country") });
            for (int i = 0; i < 25; i++)
            {
                dt.Rows.Add(i, "name" + i.ToString(), "country" + i.ToString());
            }
            lvCustomers.DataSource = dt;
            lvCustomers.DataBind();
        }

        protected void OnPagePropertiesChanging(object sender, PagePropertiesChangingEventArgs e)
        {
            (lvCustomers.FindControl("DataPager1") as DataPager).SetPageProperties(e.StartRowIndex, e.MaximumRows, false);
            this.BindListView();
        }

Best Regard,

Yang Shen

Reply

clembo67

Member

16 Points

225 Posts

Re: Datapager responsive

Apr 06, 2020 10:10 AM|clembo67|LINK

Hi Yang Shen,

I'm using a responsive template for my webapp. When I load my webpage on a small screen listview fit to screen size cause css applied. This not happened for DataPager control because page number shown was fixed and not fit screen size.

There is a way to show only 3 DataPager page when load on small screen my web app and 6 page for large screen?

I hope to have clarified despite my bad english

Reply

Yang Shen

Contributor

2860 Points

910 Posts

Re: Datapager responsive

Apr 07, 2020 03:46 AM|Yang Shen|LINK

Hi clembo67,

Sorry the requirement is not clear still, do you mean you want to dynamically set the pagesize of the datapager control? Show more records in large screen and less on small one?

Can you provide your current code so that we can see if it can be implemented to your webapp?

Best Regard,

Yang Shen

Reply

KathyW

Contributor

5441 Points

2218 Posts

Re: Datapager responsive

Apr 07, 2020 04:47 AM|KathyW|LINK

I believe the requirement is not to change the PageSize, but to reduce the DataPager's NumericPagerField ButtonCount based on screen size.

Clembo67, can you confirm that is what you are trying to do?

If so, the way to do that is to add two DataPagers, and hide the one you don't want to show using media queries in the CSS. The DataPager displays in a span, so target the appropriate span ID in the CSS.

If you need more than one breakpoint, go to 3 datapagers and add the CSS to "display:none" two of three, and only display one at each screen size.

Simple example with a ListView bound declaratively in the page:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ListView.aspx.cs" Inherits="ListView" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ListView Responsive Pager</title>
    <style type="text/css">
      @media screen and (max-width: 600px) {
        span#ListView1_DataPager2 {
            display: none;
        }
      }
      @media screen and (min-width: 600px) {
        span#ListView1_DataPager1 {
            display: none;
        }
      }
    </style> 
</head>
<body>
    <form id="form1" runat="server">
        <div>
        <asp:ListView ID="ListView1"
        DataSourceID="SQLDataSource1"
        DataKeyNames="Id"
        runat="server">
        <LayoutTemplate>
          <table cellpadding="2" width="640px" border="1" ID="tbl1" runat="server">
            <tr runat="server" style="background-color: #98FB98">
              <th runat="server">ID</th>
              <th runat="server">Group</th>
              <th runat="server">Item</th>
            </tr>
            <tr runat="server" id="itemPlaceholder" />
          </table>
          <asp:DataPager ID="DataPager1" runat="server" PageSize="15">
            <Fields>
              <asp:NumericPagerField ButtonCount="4" />
            </Fields>
          </asp:DataPager>
          <asp:DataPager ID="DataPager2" runat="server" PageSize="15">
            <Fields>
              <asp:NumericPagerField ButtonCount="10" />
            </Fields>
          </asp:DataPager>
        </LayoutTemplate>
        <ItemTemplate>
          <tr runat="server">
            <td>
              <asp:Label ID="IdLabel" runat="server" Text='<%# Eval("Id") %>' />
            </td>
            <td>
              <asp:Label ID="GroupLabel" runat="server" Text='<%# Eval("Group") %>' />
            </td>
            <td>
              <asp:Label ID="ItemLabel" runat="server" Text='<%# Eval("Item") %>' /></td>
          </tr>
        </ItemTemplate>
      </asp:ListView>
            <br />
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DefaultConnection %>" SelectCommand="SELECT [Id], [Group], [Item] FROM [Items]"></asp:SqlDataSource>
        </div>
    </form>
</body>
</html>

Datapager responsiveRSS

4 replies

Shortcuts

Related Links

Datapager responsive

Re: Datapager responsive

clembo67

Re: Datapager responsive

Re: Datapager responsive

Re: Datapager responsive