Unplanned
Last Updated: 23 Jun 2022 10:16 by ADMIN
Kevin
Created on: 23 Jun 2022 09:24
Category: Grid
Type: Bug Report
1
When AJAX is enabled, the Go To Page by number and ChangePageSize buttons do not work

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"

 

1 comment
ADMIN
Attila Antal
Posted on: 23 Jun 2022 10:16

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.

 

Step 1

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>

 

Step 2

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

 

Step 3

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/.