Page Next and Previous not firing ItemCommand until after postback

[Carling]

Hello!

We've implemented custom paging but the next and previous button only work after a postback has already happened.  For example, I load the grid, click next and nothing happens.  But if I page to a page number, and then click the next button, it works.

<telerik:RadGrid ID="RadGridTicketDetails" runat="server" ActiveItemStyle-BackColor="Green"
            HeaderStyle-BackColor="#00597A" Skin="Metro" ShowGroupPanel="True" EnableLinqExpressions="False"
            OnInit="RadGridTicketDetails_OnInit" OnNeedDataSource="RadGridTicketDetails_OnNeedDataSource"
            Width="100%" CellSpacing="0" GridLines="None" OnItemCommand="RadGridTicketDetails_OnItemCommand">
            <MasterTableView TableLayout="Fixed" AllowPaging="true" AllowCustomPaging="true"
                AllowSorting="true" AllowFilteringByColumn="true" GroupsDefaultExpanded="true"
                PageSize="10" AutoGenerateColumns="false" EnableViewState="true">
                <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="True">
                </PagerStyle>
                <EditFormSettings>
                    <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                    </EditColumn>
                </EditFormSettings>
                <HeaderStyle CssClass="RadGridHeader"></HeaderStyle>
                <FooterStyle CssClass="FooterStyle"></FooterStyle>
                <CommandItemSettings ExportToPdfText="Export to PDF" />
                <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" Visible="True">
                </RowIndicatorColumn>
                <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True">
                </ExpandCollapseColumn>
                <Columns>
                    <telerik:GridBoundColumn DataField="Id" UniqueName="Id" HeaderText="#"
                        AutoPostBackOnFilter="false" />
                    <telerik:GridBoundColumn DataField="Name" UniqueName="Name" HeaderText="Name"
                        AutoPostBackOnFilter="false" Display="false"  />
                    <!-- etc... -->
                </Columns>
            </MasterTableView>
            <GroupingSettings ShowUnGroupButton="true" CaseSensitive="false" />
            <ClientSettings EnableRowHoverStyle="true" AllowDragToGroup="True" EnablePostBackOnRowClick="false"
                AllowGroupExpandCollapse="True" AllowColumnsReorder="true">
                <Selecting AllowRowSelect="True" />
                <ClientEvents OnRowClick="RowClick" />
            </ClientSettings>
            <HeaderStyle BackColor="#00597A" />
            <ActiveItemStyle BackColor="Green" />
            <PagerStyle AlwaysVisible="True" />
            <FilterMenu EnableImageSprites="False">
            </FilterMenu>
        </telerik:RadGrid>

On the first visit, the HTML of the button is

<input type="submit" class="rgPageNext" title="Next Page" value=" " name="ctl00$ctl23$g_b6bc5c7c_8c99_4d92_93de_27af5146203d$ctl00$RadGridTicketDetails$ctl00$ctl03$ctl01$ctl28">

But on the second load after an action (postback) the output is

<input type="button" class="rgPageNext" title="Next Page" onclick="javascript:__doPostBack('ctl00$ctl23$g_b6bc5c7c_8c99_4d92_93de_27af5146203d$ctl00$RadGridTicketDetails$ctl00$ctl03$ctl01$ctl28','')" value=" " name="ctl00$ctl23$g_b6bc5c7c_8c99_4d92_93de_27af5146203d$ctl00$RadGridTicketDetails$ctl00$ctl03$ctl01$ctl28">

which fires the itemcommand as it should.

Can anyone help?

[Carling]

I really have no idea what to do about this besides going with just numeric paging.

Testing in IE, I get this error message with AJAX enabled:
Sys.WebForms.PageRequestManagerServerErrorException: Invalid postback or callback argument.  Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%@ Page EnableEventValidation="true" %> in a page.  For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them.  If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

With AJAX disabled, before clicking on anything I get:
Sys.ArgumentNullException: Value cannot be null.
Parameter name: panelsCreated[2]

And upon clicking, these same with AJAX enabled:
Sys.WebForms.PageRequestManagerServerErrorException: Invalid postback or callback argument.  Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%@ Page EnableEventValidation="true" %> in a page.  For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them.  If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

What else can I do to troubleshoot this?

[Carling]

Upon trying implement custom pager templates, I discovered that <asp:Button> elements have the same issue, whereas <asp:LinkButton> elements do not.

Thanks for all the wonderful help, Telerik! :-|

[Andrey]

Hi,

The described behavior could be observed if the ViewState of the Page or the RadGrid is turned off, that is why Paging with ViewState is not supported.

However, I noticed that you have the EnableViewState property of RadGrid set to True, could you verify that the same property is set to true for the entire page? Additionally, could you check whether you are calling the DataBind method of RadGrid somewhere in your code?

I am looking forward your reply.

Greetings,
Andrey
the Telerik team

[Carling]

ViewState is enabled for both the grid and the page; if it weren't how could the other paging elements work?  The numeric paging works fine.  Also, I am not calling DataBind anywhere.

[Andrey]

Hello,

The numeric paging send the page index always when it is used. When you are using next/prev they are sending the page index relatively to the current page and that is why the ViewState is used in this scenario.

Without further information like the full page source code you are using or a sample project that replicates the issue I am afraid that I will not be able to provide you further assistance.

Greetings,
Andrey
the Telerik team

[Jayesh Goyani]

Hello Carling,

Please check below code snippet.

Please set VirtaulItemCount in Your grid.

<telerik:RadGrid ID="RadGridTicketDetails" runat="server" VirtualItemCount="10"

Actual issue is you are not set virtualItemCount so grid think that you have only 10 records. So when you click on next button it will not load next page because as per its knowledge there is only 10 records it have.

Please check below link for more info.
Grid / Custom Paging

Let me know if any concern.

Thanks,
Jayesh Goyani

[Carling]

We set the VirtualItemCount property when we bind the grid:

//- Bind the Grid.
if (result != null && result.Result == ServiceResultType.Success)
{
   RadGridTicketDetails.VirtualItemCount = result.Data.Count;
   RadGridTicketDetails.DataSource = result.Data.Rows;
}

I will try to get to the sample project, but I am at the end of a sprint here.  Stay tuned.  Like I said, I was able to get the paging working with a pager template, using LinkButtons and NOT regular buttons.  The issue was the same with buttons.

[Jayesh Goyani]

Hello,

I have tried with your code and its working fine in my system.

<telerik:RadGrid ID="RadGridTicketDetails" runat="server" VirtualItemCount="10" ActiveItemStyle-BackColor="Green"
           HeaderStyle-BackColor="#00597A" Skin="Metro" ShowGroupPanel="True" EnableLinqExpressions="False"
           OnNeedDataSource="RadGridTicketDetails_OnNeedDataSource" Width="100%" CellSpacing="0"
           GridLines="None" OnItemCommand="RadGridTicketDetails_OnItemCommand" >
           <MasterTableView TableLayout="Fixed" AllowPaging="true" AllowCustomPaging="true"
               AllowSorting="true" AllowFilteringByColumn="true"
               PageSize="1" AutoGenerateColumns="false" >
               <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="True"></PagerStyle>
               <EditFormSettings>
                   <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                   </EditColumn>
               </EditFormSettings>
               <HeaderStyle CssClass="RadGridHeader"></HeaderStyle>
               <FooterStyle CssClass="FooterStyle"></FooterStyle>
               <CommandItemSettings ExportToPdfText="Export to PDF" />
               <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" Visible="True">
               </RowIndicatorColumn>
               <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True">
               </ExpandCollapseColumn>
               <Columns>
                   <telerik:GridBoundColumn DataField="Id" UniqueName="Id" HeaderText="#" AutoPostBackOnFilter="false" />
                   <telerik:GridBoundColumn DataField="Name" UniqueName="Name" HeaderText="Name" AutoPostBackOnFilter="false"
                       Display="false" />
               </Columns>
           </MasterTableView>
           <GroupingSettings ShowUnGroupButton="true" CaseSensitive="false" />
           <ClientSettings EnableRowHoverStyle="true" AllowDragToGroup="True" EnablePostBackOnRowClick="false"
               AllowGroupExpandCollapse="True" AllowColumnsReorder="true">
               <Selecting AllowRowSelect="True" />
               <ClientEvents />
           </ClientSettings>
           <HeaderStyle BackColor="#00597A" />
           <ActiveItemStyle BackColor="Green" />
           <PagerStyle AlwaysVisible="True" />
           <FilterMenu EnableImageSprites="False">
           </FilterMenu>
       </telerik:RadGrid>

protected void RadGridTicketDetails_OnNeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{

    dynamic data = new[] {
           new { ID = 1, Name ="Name_1"},
           new { ID = 2, Name = "Name_2"},
           new { ID = 3, Name = "Name_3"},
           new { ID = 4, Name = "Name_4"},
           new { ID = 5, Name = "Name_5"}
       };
    RadGridTicketDetails.DataSource = data;
}

protected void RadGridTicketDetails_OnItemCommand(object sender, GridCommandEventArgs e)
{

}

Let me know you have any concern.

Thanks,
Jayesh Goyani

[Andrey]

Hello,

I noticed that in your code you set the AllowCustomPaging property to false. When this property is set to false RadGrid expects from you to handle manually the paging process as shown in this online demo application.

If you set the AllowCustomPaging property to false, everything works as expected.

P.S. The VirtulItemCount property allows RadGrid to correctly calculate the page count based on the provided page size as described in this help topic.

Regards,
Andrey
the Telerik team

[Carling]

I don't know where you are seeing that, but in the markup I posted, I haveAllowCustomPaging="true"

[Carling]

here is a project with the issue reproduced.  FYI - I tried setting AllowCustomPaging to both true and false and the issue persists.

RadControlsWebApp2.zip - link fixed

[Andrey]

Hello,

Thank you for providing sample project that replicates the issue.

I was able to replicate and find the source of issue. The issue with the event callback arguments is caused by the Rebind operation you are invoking in the Page_Load method.

Once you comment out this call everything works as expected. I am attaching the modified project.

All the best,
Andrey
the Telerik team

[Carling]

We have to do this because we have external web parts that are passing parameters to our grid.  What is the other option here?

[Jayesh Goyani]

Hello,

Try to

protected void Page_PreRender(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            RefreshOnPostBack();
        }
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        RadAjaxManager radAjaxManager = RadAjaxManager.GetCurrent(Page);
           // radAjaxManager.AjaxSettings.AddAjaxSetting(RadGridTicketDetails, RadAjaxPanel1, RadAjaxLoadingPanel1);

            _isPaging = false; //- Initiate the Page with IsPaging = false

            if (IsPostBack)
            {
                //RefreshOnPostBack();
            }
            else
            {
                RadGridTicketDetails.MasterTableView.DataKeyNames = new[] {"TicketKey"};
            }
    }

//OR

protected void Page_Load(object sender, EventArgs e)
    {
        RadAjaxManager radAjaxManager = RadAjaxManager.GetCurrent(Page);
           // radAjaxManager.AjaxSettings.AddAjaxSetting(RadGridTicketDetails, RadAjaxPanel1, RadAjaxLoadingPanel1);

            _isPaging = false; //- Initiate the Page with IsPaging = false

            if (IsPostBack)
            {
                //RefreshOnPostBack();
            }
            else
            {
                RadGridTicketDetails.MasterTableView.DataKeyNames = new[] {"TicketKey"};
            }
    }

protected void RadGridTicketDetails_OnNeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        // try to set some web service variables here
        var data = GetTicketList();

        RadGridTicketDetails.VirtualItemCount = 10;
        RadGridTicketDetails.DataSource = data;
    }

Note : If yon bind your grid in page_load then it was re-create viewstate again. so that it was abort your page changing request.

Thanks,
Jayesh Goyani

[Pradeep]

Just try Binding the data in Item Command..,

Eg:
if(e.commandname="Update")
{

your code..,

}
else
{

Bindgrid();
}

[Andrey]

Hi,

RadGrid should be bind either with NeedDataSource event, or with declarative datasource(like SQLDataSource, ObjectDataSource and so on) or by calling DataBind method and assigning the DataSource property. The last approach should be used only when you do NOT require advanced functionality like paging, sorting, grouping, and filtering.


Kind regards,
Andrey
the Telerik team