When AJAX is enabled for the Grid with the <PagerStyle Mode="Advanced"> or <PagerStyle Mode="NextPrevNumericAndAdvanced"> the Go To Page by Number and Change Page Size Bugtons would not work.
On the other hand, if changing the Page or PageSize by typing and hitting the ENTER key instead of clicking the buttons, the Grid will behave accordingly.
Issue appears in RenderMode="Lightweight"
Hi Kevin,
Thank you for reporting this problem and for sharing the reproduction with us.
This is indeed an issue in the Grid source code which requires a fix.
Until the problem is fixed, we found a workaround for the problem. Please follow the steps below to implement the workaround.
Add the following JavaScript to the page. This will attach a click event to the GoToPage and ChangePageSize Buttons for triggering Custom Grid commands using the fireCommand() method.
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script>
function pageLoadHandler() {
// Get reference to RadGrid
var grid = $find('<%=RadGrid1.ClientID %>');
// Find the Pager Wrapper element
var $pagerWrapper = $(grid.get_element()).find('.rgPager .rgWrap.rgAdvPart');
// Find the GoToPage Button within the Grid element
var $goToPageButton = $($pagerWrapper).find('.rgPagerButton[id$=GoToPageLinkButton]');
var $changePageSizeButton = $($pagerWrapper).find('.rgPagerButton[id$=ChangePageSizeLinkButton]');
// Attach the click event listener to the button
$goToPageButton.on('click', function (e) {
// cancel the click event
e.preventDefault();
// Get the Current Page
var currentPage = grid._currentPageIndex + 1;
// Find the GoToPage Numeric TextBox
var goToPageTextBox = $telerik.findControl($pagerWrapper[0], 'GoToPageTextBox');
// Condition to check if the TextBox has a value and the value is different from the CurrentPage
if (goToPageTextBox.get_value() && goToPageTextBox.get_value() != currentPage) {
// fire a Custom command using the fireCommand() method
// pass two arguments to the method: CommandName, CommandArgument (e.g. the Page number)
grid.get_masterTableView().fireCommand("GoToPage", goToPageTextBox.get_value());
}
})
$changePageSizeButton.on('click', function (e) {
// cancel the click event
e.preventDefault();
// Find the ChangePageSize Numeric TextBox
var changePageSizeTextBox = $telerik.findControl($pagerWrapper[0], 'ChangePageSizeTextBox');
// Get the Current PageSize
var currentPageSize = grid.get_masterTableView().get_pageSize();
// Compare the Current Page Size with the TextBox value, if not identical
if (changePageSizeTextBox.get_value() != currentPageSize) {
// fire a Custom command using the fireCommand() method
// pass two arguments to the method: CommandName, CommandArgument (e.g. the New Page Size)
grid.get_masterTableView().fireCommand("ChangePageSize", changePageSizeTextBox.get_value());
}
})
// Sys.Application.remove_load(pageLoadHandler);
}
Sys.Application.add_load(pageLoadHandler);
</script>
</telerik:RadScriptBlock>
Capture the Custom Commands triggered in the Step 1 using the ItemCommand server event.
C#
protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
var grid = (RadGrid)sender;
// If the CommandName is the one we triggered manually
if (e.CommandName == "GoToPage")
{
// get the Page number from the arguments
var pageNumber = int.Parse(e.CommandArgument.ToString());
// Change the Grid's Page Index based on the Page number
// Extract one from the Page number as the Page indexes start from 0.
// Index of 0 being Page 1, Index 1 being Page 2, etc...
grid.CurrentPageIndex = pageNumber - 1;
}
else if (e.CommandName == "ChangePageSize")
{
// get the Page number from the arguments
int pageSize = int.Parse(e.CommandArgument.ToString());
// Change the Page Size using the new value
grid.PageSize = pageSize;
}
}
VB
Protected Sub RadGrid1_ItemCommand(ByVal sender As Object, ByVal e As GridCommandEventArgs)
Dim grid = CType(sender, RadGrid)
'If the CommandName is the one we triggered manually
If e.CommandName = "GoToPage" Then
'get the Page number from the arguments
Dim pageNumber = Integer.Parse(e.CommandArgument.ToString())
'Change the Grid's Page Index based on the Page number
'Extract one from the Page number as the Page indexes start from 0.
'Index of 0 being Page 1, Index 1 being Page 2, etc...
grid.CurrentPageIndex = pageNumber - 1
ElseIf e.CommandName = "ChangePageSize" Then
'get the Page number from the arguments
Dim pageSize As Integer = Integer.Parse(e.CommandArgument.ToString())
'Change the Page Size using the new value
grid.PageSize = pageSize
End If
End Sub
Test changing the page by defining a number in the TextBox and then clicking on the Go button.
Test changing the PageSize by defining a new value for the ChangePageSize TextBox and clicking on the Change button.
For more details you can refer to the following articles:
Regards,
Attila Antal
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.