GridView and ListView paging takes two clicks in datapager

Question

I have a ListView (with search bar) that I am binding data to from the SQL server and am using the DataPager control to break up all the information. The problem that I am having is that when the first page loads after a search I have to click twice on any page link or next/last button to show a new page. Can anyone please help me?

DataPager Code:

<div id="pagging" runat="server">
                        <asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1" PageSize="9" >
                            <Fields>

                                <asp:NextPreviousPagerField NextPageText=" Next <i class='fa fa-chevron-left'></i> " ShowNextPageButton="true"
                                    ShowPreviousPageButton="false" ShowFirstPageButton="false"
                                    ButtonCssClass="btn btn-default" RenderNonBreakingSpacesBetweenControls="false" RenderDisabledButtonsAsLabels="false" />

                                <asp:NumericPagerField ButtonType="Link" CurrentPageLabelCssClass="btn btn-primary disabled" RenderNonBreakingSpacesBetweenControls="false"
                                    NumericButtonCssClass="btn btn-default" ButtonCount="10" NextPageText="..." NextPreviousButtonCssClass="btn btn-default" />
                                <asp:NextPreviousPagerField PreviousPageText=" <i class='fa fa-chevron-right'></i> Prev" ShowPreviousPageButton="true"
                                    ShowNextPageButton="false" ShowLastPageButton="false"
                                    ButtonCssClass="btn btn-default" RenderNonBreakingSpacesBetweenControls="false" RenderDisabledButtonsAsLabels="false" />
                            </Fields>
                        </asp:DataPager>
                    </div>

C#

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

 private void SearchCustomers()
        {
            "select  * from aspnet_table where *** ", conString);
            DataTable dtTable = new DataTable();
            dad.Fill(dtTable);
            using (DataTable dt1 = new DataTable())
            {
                ListView1.DataSource = dtTable;
                ListView1.DataBind();
            }

        }

        protected void Search(object sender, EventArgs e)
        {
           SearchCustomers();
        }
 private void BindListView()
        {

            ListView1.DataSource = db.aspnet_table;
            ListView1.DataBind();

        }

        protected void list_PagePropertiesChanging(object sender, PagePropertiesChangingEventArgs e)
        {
            //set current page startindex, max rows and rebind to false
            //DataPager1.SetPageProperties( e.MaximumRows, e.StartRowIndex, false); when i remove comment here the second page need one click but data without applay search

            //rebind List View
            //BindListView();
        }

       

Answer 1

Well, you have removed/commented out the data page chaning event.

If you do NOT wire up the event, then you have that double click event issue/problem.

(you click on the pager - it will need double clicks - and not even work.

So, YOU MUST RE-BIND the lv EACH time for the data pager event.

So, I suggest you build/make a SINGLE listview data loader. And you persist the filter in ViewState (or hidden control).

So, I would suggest this:

protected void ListView1_PagePropertiesChanging(object sender, PagePropertiesChangingEventArgs e)
{
DataPager1.SetPageProperties(e.StartRowIndex, e.MaximumRows, false);

ListView1.DataSource = MyTableWithFilter;
ListView1.DataBind();
}

Now MyTableWithFitler - maybe it returns a "data table" table that starts without a filter - but you need that re-bind event in Page changing event. If you don't wire up that event correctly, and RE-BIND this pager event, then you get the double click issue/effect that you see.

So that routine will have to return the filtered data if a filter is active, or the whole table if no filter. But a re-bind NEEDS to occur for each pager event (regardless if you have some filter active or not).

Edit: so the question asked is how to filter?

That should be easy.

Say we have this markup - I'll use your pager:

        <br />
        <asp:Label ID="Label1" runat="server" Text="Search For Hotel Name:"></asp:Label>
        <asp:TextBox ID="txtHotel" runat="server" style="margin-left:20px;width:150px"></asp:TextBox>
        <asp:Button ID="cmdSearch" runat="server"  Text="Search" style="margin-left:20px;width:90px" />
        <asp:Button ID="cmdClear" runat="server"  Text="Clear Search" style="margin-left:20px;width:110px" />
        <br />

     <div id="mygrid" style="width:40%">
        <asp:ListView ID="ListView1" runat="server"  Allowpaging="true" >
            <ItemTemplate   >
                <tr>
                    <td><asp:Label ID="FirstNameLabel" runat="server" Text='<%# Eval("FirstName") %>' /></td>                        
                    <td><asp:Label ID="LastNameLabel" runat="server" Text='<%# Eval("LastName") %>' /></td>
                    <td><asp:Label ID="HotelNameLabel" runat="server" Text='<%# Eval("HotelName") %>' /></td>
                    <td><asp:Label ID="CityNameLabel" runat="server" Text='<%# Eval("City") %>' /></td>
                    <td><asp:Label ID="ProvinceLabel" runat="server" Text='<%# Eval("Province") %>' /></td>
                </tr>
            </ItemTemplate>
            <LayoutTemplate>
                <table id="itemPlaceholderContainer" runat="server" border="0" class="table table-hover">
                    <tr runat="server" >
                        <th runat="server">FirstName</th>
                        <th runat="server">LastName</th>
                        <th runat="server">HotelName</th>
                        <th runat="server">City</th>
                        <th runat="server">Province</th>
                    </tr>
                    <tr id="itemPlaceholder" runat="server" >
                    </tr>
                </table>
            </LayoutTemplate>
        </asp:ListView>

        </div>
        <div id="pagging" runat="server">
            <asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1" PageSize="9" >
                <Fields>
                    <asp:NextPreviousPagerField NextPageText=" Next <i class='fa fa-chevron-left'></i> " ShowNextPageButton="true"
                        ShowPreviousPageButton="false" ShowFirstPageButton="false"
                        ButtonCssClass="btn btn-default" RenderNonBreakingSpacesBetweenControls="false" RenderDisabledButtonsAsLabels="false" />

                    <asp:NumericPagerField ButtonType="Link" CurrentPageLabelCssClass="btn btn-primary disabled" RenderNonBreakingSpacesBetweenControls="false"
                        NumericButtonCssClass="btn btn-default" ButtonCount="10" NextPageText="..." NextPreviousButtonCssClass="btn btn-default" />
                    <asp:NextPreviousPagerField PreviousPageText=" <i class='fa fa-chevron-right'></i> Prev" ShowPreviousPageButton="true"
                        ShowNextPageButton="false" ShowLastPageButton="false"
                        ButtonCssClass="btn btn-default" RenderNonBreakingSpacesBetweenControls="false" RenderDisabledButtonsAsLabels="false" />
                </Fields>
            </asp:DataPager>

So I just added a text box and a search button.

So, now the code looks like this:

protected void Page_Load(object sender, System.EventArgs e)
{
    if (IsPostBack == false)
        LoadGrid();
}

public void LoadGrid()
{
    using (SqlCommand cmdSQL = new SqlCommand("Select * FROM tblHotels",
                               new SqlConnection(My.Settings.TEST3)))
    {

        // check for filter
        if (txtHotel.Text != "")
        {
            cmdSQL.CommandText += " WHERE HotelName like '%' + @Hotel +'%' ";
            cmdSQL.Parameters.Add("@Hotel", SqlDbType.NVarChar).Value = txtHotel.Text;
        }

        cmdSQL.CommandText += " ORDER BY HotelName";

        DataTable MyTable = new DataTable();

        cmdSQL.Connection.Open();
        MyTable.Load(cmdSQL.ExecuteReader);

        ListView1.DataSource = MyTable;
        ListView1.DataBind();
    }
}

protected void ListView1_PagePropertiesChanging(object sender, PagePropertiesChangingEventArgs e)
{
    DataPager1.SetPageProperties(e.StartRowIndex, e.MaximumRows, false);
    LoadGrid();
}

protected void cmdSearch_Click(object sender, EventArgs e)
{

    // with filter - always jump to first page first time.
    DataPager1.SetPageProperties(0, DataPager1.MaximumRows, false);
    LoadGrid();
}

protected void cmdClear_Click(object sender, EventArgs e)
{
    txtHotel.Text = "";
    LoadGrid();
}

It looks like this:

but say, I look for any hotel name with lodge, I get this:

I am somewhat "confused" as to why the filter is a probelm or issue. I mean, once you get the pager working, then since the dawn of time, applying some critera to the sql is standard fair - and has little much to do with this over-all problem (using the data pager).