[Solved] Telerik Radgrid and paging

[Rakhee]

Hi

I am using visual studio 2022 c# .netframework 4.8 to create my application.

I am using telerik radgrid which has paging enabled. On the page there is a couple of inputs fields that users can enter, then when they run the Display button the values are passed the query that is run to populate the grid.

This works great if your on the first page of the data, if you scroll to the other pages and change the input fields value and click display the grid returns no rows. Even though the datasource has the correct rows, the grid is displaying no rows.

You can see the datasource has data returned

But the grid display nothing

 

[Vasko]

Hello Rakhee,

Thank you for the provided screenshots.

When you navigate to page 2 or beyond in a RadGrid, the grid remembers its current page index. The moment you change your filter inputs and click Display, ASP.NET begins a postback and the page lifecycle kicks in. The critical detail here is that NeedDataSource fires before your button click handler runs. This means the grid fetches its data first, and only after that does your button code execute. Because of this ordering, if you were storing the filter values only in local variables or reading them fresh inside the button click, the grid has already grabbed its data without knowing about your new filter values.

Once the grid has its data, it then tries to render the page index it was already on, say page 3. If your new filtered dataset returns fewer rows than expected for that page, or the filter was not applied at all because of the lifecycle timing, the grid finds nothing to display on that page and renders an empty result, even though the datasource does contain rows.

The fix works by saving the filter values into ViewState the moment the user clicks Display, then resetting the page index back to zero before calling Rebind. Because ViewState persists across postbacks, when NeedDataSource fires on the next or any subsequent postback such as a page navigation click, it can safely read the correct filter values and return the right data. Resetting the page index to zero is equally important because it tells the grid to stop trying to render a page that may no longer exist in the new result set and instead start fresh from the beginning.

Below you can find a sample code implementation:

<div style="margin-bottom: 12px; display: flex; gap: 16px; align-items: center;">
    <label for="txtShipName" style="color: white; font-family: Arial;">Ship Name:</label>
    <asp:TextBox ID="txtShipName" runat="server" />

    <label for="txtShipCountry" style="color: white; font-family: Arial;">Ship Country:</label>
    <asp:TextBox ID="txtShipCountry" runat="server" />

    <telerik:RadButton ID="btnDisplay" runat="server" Text="Display"
        OnClick="btnDisplay_Click" />
</div>

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID">
        <Columns>
            <telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
                FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
                ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
            </telerik:GridBoundColumn>
            <telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
                FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
                SortExpression="OrderDate" UniqueName="OrderDate">
            </telerik:GridDateTimeColumn>
            <telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
                FilterControlAltText="Filter Freight column" HeaderText="Freight"
                SortExpression="Freight" UniqueName="Freight">
            </telerik:GridNumericColumn>
            <telerik:GridBoundColumn DataField="ShipName"
                FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
                SortExpression="ShipName" UniqueName="ShipName">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ShipCountry"
                FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
                SortExpression="ShipCountry" UniqueName="ShipCountry">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

private string FilterShipName
{
    get { return ViewState["FilterShipName"] as string ?? string.Empty; }
    set { ViewState["FilterShipName"] = value; }
}

private string FilterShipCountry
{
    get { return ViewState["FilterShipCountry"] as string ?? string.Empty; }
    set { ViewState["FilterShipCountry"] = value; }
}

protected void btnDisplay_Click(object sender, EventArgs e)
{
    // Persist the filter values entered by the user.
    FilterShipName = txtShipName.Text.Trim();
    FilterShipCountry = txtShipCountry.Text.Trim();

    // Reset to page 1 so the grid always shows results from the beginning.
    RadGrid1.CurrentPageIndex = 0;
    RadGrid1.MasterTableView.CurrentPageIndex = 0;

    RadGrid1.Rebind();
}

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    (sender as RadGrid).DataSource = OrdersTable(FilterShipName, FilterShipCountry);
}

private DataTable OrdersTable(string shipName = "", string shipCountry = "")
{
    DataTable dt = new DataTable();

    dt.Columns.Add(new DataColumn("OrderID", typeof(int)));
    dt.Columns.Add(new DataColumn("OrderDate", typeof(DateTime)));
    dt.Columns.Add(new DataColumn("Freight", typeof(double)));
    dt.Columns.Add(new DataColumn("ShipName", typeof(string)));
    dt.Columns.Add(new DataColumn("ShipCountry", typeof(string)));

    dt.PrimaryKey = new DataColumn[] { dt.Columns["OrderID"] };

    for (int i = 0; i < 100; i++)
    {
        int index = i + 1;

        DataRow row = dt.NewRow();

        row["OrderID"] = index;
        row["OrderDate"] = DateTime.Now.Date.AddDays(index);
        row["Freight"] = index * 0.01;
        row["ShipName"] = "Name " + index;
        row["ShipCountry"] = "Country " + index;

        dt.Rows.Add(row);
    }

    // Apply filters if values were provided.
    DataView dv = dt.DefaultView;

    var filterParts = new System.Collections.Generic.List<string>();

    if (!string.IsNullOrEmpty(shipName))
        filterParts.Add($"ShipName LIKE '%{shipName}%'");

    if (!string.IsNullOrEmpty(shipCountry))
        filterParts.Add($"ShipCountry LIKE '%{shipCountry}%'");

    if (filterParts.Count > 0)
        dv.RowFilter = string.Join(" AND ", filterParts);

    return dv.ToTable();
}

Try the above approach and see if it will work for your scenario.

Regards,
Vasko
Progress Telerik