Databinding with ajax causes paging to fail

[Wim]

Hi All

Scenario:
Page with a Telerik radGrid. A WCF service provides data (JSONP) dat is bound to the Radgrid. Page size is set to 10.

Problem:
The data is correctly loaded into the gridview. When loading 1 record from the wcf service, the paging bar still says: 11 items loaded.
As I understand from debugging, a fixed number equal to the page size of "items" is created in the tabel. Those items are then filled with the data records, an the remaining records are made invisible. That works correct, but the paging still counts those hidden rows...
When I add more than 10 rows, the 12 rows are shown on the first page,while max page size is 10.

Even when I hardcoded bind to an JSON string, the data is shown correct in the grid, but paging is displayed incorrectly.

the code for loading data:

function getData() {
    var proxy = new window.LiveIdService.ILiveIdService();
    proxy.set_enableJsonp(true);
    proxy.GetUserList(null, updateGrid);
}

function updateGrid(result) {
    var tableView = window.$find("<%= RadGrid2.ClientID %>").get_masterTableView();
    tableView.set_dataSource(data.UserList);
    tableView.dataBind();
}

My radGrid

<telerik:RadGrid ID="RadGrid2" runat="server" GridLines="None"
    AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False"
     Skin="LiveID" EnableEmbeddedSkins="False"   ><%-- OnItemCommand="gridUsers_ItemCommand" OnDataBound="gridUsers_DataBound"--%>
     <PagerStyle Mode="NextPrevAndNumeric"
                FirstPageToolTip="<%$ Resources: NextPreviousPagerField.FirstPageText %>"
                PageSizeLabelText="<%$ Resources: lblPageSize %>"
                LastPageTooltip="<%$ Resources:NextPreviousPagerField.LastPageText %>"
                PagerTextFormat="<%$ Resources: lblPagerTextFormat %>"
                />
    <ClientSettings EnableRowHoverStyle="true" >
        <ClientEvents OnCommand="function(){}" OnGridCreated="FillWithData" />
    </ClientSettings>

    <MasterTableView DataKeyNames="Id" ShowHeadersWhenNoRecords="True" EnableNoRecordsTemplate="true"  PageSize="10" CommandItemDisplay="Bottom">

        <CommandItemSettings AddNewRecordText="<%$ Resources: InsertButtonResource1.Text %>" ShowRefreshButton="false" />
        <Columns>
            <telerik:GridHyperLinkColumn DataTextField="FirstName" DataNavigateUrlFields="Id"
                                         UniqueName="FirstName" HeaderText="<%$ Resources: lblFirstName.Text %>" DataNavigateUrlFormatString="~/Pages/Users/UserFile.aspx?id={0}" />
            <telerik:GridHyperLinkColumn DataTextField="FirstName" DataNavigateUrlFields="Id"
                                         UniqueName="LastName" HeaderText="<%$ Resources: lblLastName.Text %>" DataNavigateUrlFormatString="~/Pages/Users/UserFile.aspx?id={0}" />
            <telerik:GridBoundColumn DataField="OrganisationNames" HeaderText="<%$ Resources: lblAccounts.Text%>" DataType="System.String" />

              <telerik:GridTemplateColumn DataField="OrganisationTypes" UniqueName="AccountType" HeaderStyle-Width="170" ItemStyle-VerticalAlign="Top">
                <HeaderTemplate>
                    <asp:LinkButton ID="lblAccountTypeHeader" runat="server" Text="<%$ Resources: lblAccountType.Text%>" CssClass="filter-text"
                        CommandName="Sort" CommandArgument="AccountType" Enabled="false"></asp:LinkButton>
                    <asp:LinkButton ID="lnkFilterAccountType" runat="server" CausesValidation="false" OnClientClick="openAccountTypeFilter(); return false;" class="action rounded filter">
                        <asp:Image ID="imgFilterAccountType" runat="server" ImageUrl="~/Resources/Images/funnel.png" />
                    </asp:LinkButton>
                </HeaderTemplate>
                  <ItemTemplate><asp:Label ID="OrganisationTypes" runat="server" /></ItemTemplate>
            </telerik:GridTemplateColumn>
             <telerik:GridTemplateColumn UniqueName="Actions" HeaderText="" ItemStyle-VerticalAlign="Top" HeaderStyle-Width="30">
                <ItemTemplate>
                    <asp:LinkButton ID="lnkDeleteAccount" runat="server"
                    CommandName="Delete" CausesValidation="false"
                    OnClientClick="openConfirmationDialogUserList(this); return false;"
                    CommandArgument='<%# Eval("ID") %>'>
                        <asp:Image ID="imgDeleteAccount" runat="server" ImageUrl="~/Resources/Images/delete.png" />
                    </asp:LinkButton>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
        <NoRecordsTemplate><asp:Literal ID="txtNoRecords" runat="server" Text="<%$ Resources: NoUsersLink %>"></asp:Literal></NoRecordsTemplate>
        <CommandItemTemplate>
        </CommandItemTemplate>
    </MasterTableView>
    <HeaderContextMenu EnableImageSprites="True" CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>
</telerik:RadGrid>

I hope this is sufficient info to help me fix this paging problem, if not please let me know.

Thanks for your time

Wim Devos

[Maria Ilieva]

Hi Wim,

Please ensure that you are properly updating the RadGrid virtualItemCount in order to have the paging functionality works properly.
Please follow this online demo which presents similar approach and provides the correct way for achieving this functionality.


Kind regards,
Maria Ilieva
the Telerik team