locked
Datapager responsive RRS feed

  • Question

  • User31164289 posted

    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?

    Sunday, April 5, 2020 8:28 AM

All replies

  • User-719153870 posted

    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

    Monday, April 6, 2020 8:16 AM
  • User31164289 posted

    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

     

    Monday, April 6, 2020 10:10 AM
  • User-719153870 posted

    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

    Tuesday, April 7, 2020 3:46 AM
  • User409696431 posted

    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>

    Tuesday, April 7, 2020 4:47 AM