Wrong page requested by NeedDataSource event on data grid

[Valent]

I have a fairly standard data grid

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" BackgroundPosition="Center" Skin="Default">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel" LoadingPanelID="RadAjaxLoadingPanel1">
	<asp:UpdatePanel ID="UpdatePanel2" runat="server">    
		<ContentTemplate>
		<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" EnableViewState="true" AutoGenerateColumns="false" Height="100%"
			AllowSorting="true" GroupingEnabled="false" EnableLinqExpressions="false" AllowCustomSorting="true"
			EnableHeaderContextMenu="false" OnNeedDataSource="RadGrid1_NeedDataSource" AllowMultiRowSelection="true" AllowPaging="false">
			<MasterTableView TableLayout="Fixed" ClientDataKeyNames="ID" AllowCustomPaging="true" AllowPaging="True" PageSize="50"/>
			<ClientSettings EnableRowHoverStyle="true">
				<Virtualization EnableVirtualization="true" InitiallyCachedItemsCount="50"
					LoadingPanelID="RadAjaxLoadingPanel1" ItemsPerView="50" RetrievedItemsPerRequest="50"/>
				<Scrolling AllowScroll="true" UseStaticHeaders="true"/>
				<Resizing AllowColumnResize="true" ResizeGridOnColumnResize="true"/>
				<Selecting AllowRowSelect="True" UseClientSelectColumnOnly="true" CellSelectionMode="None" />
				 <ClientEvents OnKeyPress="KeyPress" />
			</ClientSettings>
			<PagerStyle Mode="NextPrevAndNumeric" PageSizeControlType="RadDropDownList" CssClass="TelerikPager"/>
		</telerik:RadGrid>
		</ContentTemplate>
	</asp:UpdatePanel>
</telerik:RadAjaxPanel>

I have 1007 items to show. Everything work fine, until I get to the last page, be it with scroll, clicking next pages, or jump to end button. For the last page (page 21, so index 20) the Grid in RadGrid1_NeedDataSource on it's MasterTableView.CurrentPageIndex has 19. So I return the wrong portion of the data.

Is something set up wrong or is there some other issue?

Up until that point everything is great, for page 19, index is 18, for 20 index is 19, and then for 21 it's again 19.

There is no rebind happening in the code and there is nothing really interesting happening on the server side code.

 

[Attila Antal]

Hi Valent,

Sounds like a custom paging issue. Do you have such an implementation? For instance, where you dynamically change the set of data that is returned to the Grid in the NeedDataSource event.

Please share the complete implementation of the Grid so we can understand what is being done and how, and based on that we can share our advice.

[Valent]

Here's my minimum reproduction code

protected void Page_Load(object sender, EventArgs e)
{
	RadGrid1.MasterTableView.AllowNaturalSort = false;
	RadGrid1.MasterTableView.PageSize = 50;
	RadGrid1.MasterTableView.NoMasterRecordsText = "Prazno";

	var column = new GridBoundColumn()
	{
		DataField = "Id",
		UniqueName = "Id",
		HeaderText = "Id",
		Display = true,
	};

	RadGrid1.MasterTableView.Columns.Add(column);

	column = new GridBoundColumn()
	{
		DataField = "Name",
		UniqueName = "Name",
		HeaderText = "Name",
		Display = true,
	};

	RadGrid1.MasterTableView.Columns.Add(column);

	var sb = new StringBuilder();
	sb.Append("function(sender,args){} ");
	RadGrid1.ClientSettings.ClientEvents.OnKeyPress = sb.ToString();
}

protected void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
{
	RadGrid1.MasterTableView.VirtualItemCount = 1007;

	List<Temp> retVal = new List<Temp>();

	for (int i = 0; i < 50; i++)
	{
		retVal.Add(new Temp()
		{
			Id = RadGrid1.MasterTableView.CurrentPageIndex * 50 + i,
			Name = $"Item {RadGrid1.MasterTableView.CurrentPageIndex * 50 + i}"
		});
	}


	RadGrid1.DataSource = retVal;
}

public class Temp
{
	public int Id { get; set; }
	public string Name { get; set; }
}

The rest of code behind is just boilerplate code.

And the code infront

<asp:Content ID="headerContent" ContentPlaceHolderID="headerContent" runat="Server">
    <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>
</asp:Content>
<asp:Content ID="pageContent" ContentPlaceHolderID="pageContent" runat="Server">
    <telerik:radajaxloadingpanel id="RadAjaxLoadingPanel1" runat="server" backgroundposition="Center" skin="Default">
    </telerik:radajaxloadingpanel>
    <telerik:radajaxpanel runat="server" id="RadAjaxPanel" loadingpanelid="RadAjaxLoadingPanel1">
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <telerik:radgrid rendermode="Lightweight" id="RadGrid1" runat="server" enableviewstate="true" autogeneratecolumns="false" height="100%"
                    allowsorting="true" groupingenabled="false" enablelinqexpressions="false" allowcustomsorting="true"
                    enableheadercontextmenu="false" onneeddatasource="RadGrid1_NeedDataSource">
                    <mastertableview tablelayout="Fixed" clientdatakeynames="ID" pagesize="50" allowpaging="True" allowcustompaging="True"/>
                    <clientsettings enablerowhoverstyle="true">
                        <virtualization enablevirtualization="true" initiallycacheditemscount="50"
                            loadingpanelid="RadAjaxLoadingPanel1" itemsperview="50" retrieveditemsperrequest="50" />
                        <scrolling allowscroll="true" usestaticheaders="true" />
                        <resizing allowcolumnresize="true" resizegridoncolumnresize="true" />
                        <selecting allowrowselect="True" useclientselectcolumnonly="true" cellselectionmode="None" />
                        <clientevents onkeypress="KeyPress" />
                    </clientsettings>
                    <pagerstyle mode="NextPrevAndNumeric" pagesizecontroltype="RadDropDownList" cssclass="TelerikPager" />
                </telerik:radgrid>
            </ContentTemplate>
        </asp:UpdatePanel>
    </telerik:radajaxpanel>
</asp:Content>
<asp:Content ID="afterFormScriptContent" ContentPlaceHolderID="afterFormScriptContent" runat="server">

</asp:Content>

 

[Attila Antal]

Hi Valent,

Thanks for sharing the code. I can see that the VirtualItemCount tells the grid there are 1007 items, whereas only binding 50 items to it.

Please review the online demo for Custom Paging to see how this is implemented and follow the same approach to implement the custom paging. If you do not need custom paging, you can just bind all the records to the grid. The Grid has its built-in paging feature and will only display as many records at once, as defined in the PageSize property.

[Valent]

It's a virtual scrolling + custom paging problem.

The code above is a minimal reproduction for the problem I have with the actual code.

I bind 50 to datasource the same as is in the demo you linked.

• RadGrid1_NeedDataSource in aspx
• calls RadGrid1_NeedDataSource in cs
• that one calls MyBusinessObjectCollection1 which return whatever the page size is and they're set to datasource even though the actual count in 100k.
  

I just skipped calling the MyBusinnesObjectCollection and create the data to reproduce in the needs datasource method.

Apart from that, and the virtualization I see no difference between the example and my code.

[Attila Antal]

Important: Virtual scrolling and Custom paging are two different things and need to be implemented differently. These cannot work together. If you want custom paging, you will need to follow the approach from the link I shared earlier. For Virtual Scrolling, this will be the approach: Virtualization