Client side binding using Pagemethods fails with more than 20 rows

[Alex]

when i try to bind the Grid view using the Pagemathods or webmethods, everything works well and its fast.
but the above is true only if my web method returns not more than 20 rows of data.
as soon the webmethod returns more than 20 rows, the RadGrid control simply doesnt bind or refresh, as if no action was made !?
at first i thought that it might be just slow so i tried waiting for more than 30min and the result is the same...

if i do the same thing but bind the grid on server side using the NeedDataSource event then it loads more than 20 rows, but because the performance is much faster on client side binding, i need to make it work on client side.

using the visual studio 2010 debugger i followed step by step and a strange thing happens the ajax call to the webmethod is beingsent ok, and the pagemethod / webmethod is executed ok and returns the data, once the data is returned to radgrid its like it swallows it and no further action happens nor any other client side events are fired or javascript code is executed...

Please help, i spent almost a week on this issue and cant find a solution... many thanks in advance...

please see below the grid code and pagemethods that i am using:

grid from .aspx:
<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False"
                CellSpacing="0" GridLines="None">
                <ClientSettings>
                    <ClientEvents OnCommand="showLoadingPanel" OnDataBinding="alert('databinding')"
                        OnDataBindingFailed="function () {alert('binding failed');}" OnDataBound="hideLoadingPanel"
                        OnDataSourceResolved="alert('data source resolved')" />
                </ClientSettings>
                <MasterTableView>
                    <CommandItemSettings ExportToPdfText="Export to PDF" />
                    <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
                        <HeaderStyle Width="20px" />
                    </RowIndicatorColumn>
                    <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
                        <HeaderStyle Width="20px" />
                    </ExpandCollapseColumn>
                    <Columns>
                        <telerik:GridBoundColumn DataField="JobItemId"
                            FilterControlAltText="Filter JobItemId column" HeaderText="Ref"
                            UniqueName="JobItemId">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="ItemName"
                            FilterControlAltText="Filter ItemName column" HeaderText="Name"
                            UniqueName="ItemName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="ItemBarcode"
                            FilterControlAltText="Filter ItemBarcode column" HeaderText="Barcode"
                            UniqueName="Barcode">
                        </telerik:GridBoundColumn>
                    </Columns>
                    <EditFormSettings>
                        <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                        </EditColumn>
                    </EditFormSettings>
                </MasterTableView>
                <FilterMenu EnableImageSprites="False">
                </FilterMenu>
                <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">
                </HeaderContextMenu>
            </telerik:RadGrid>

client side javascript from .aspx:

<script type="text/javascript">

            var currentLoadingPanel = null;
            var currentUpdatedControl = null;
            function RequestStart(sender, args) {
                if (args.get_eventTarget() == "<%= RadButtonLoadLoc.UniqueID %>") {
                    currentLoadingPanel = $find("<%= RadAjaxLoadingPanel.ClientID%>");
                    currentUpdatedControl = "<%= PanelMain.ClientID %>";
                    //show the loading panel over the updated control
                    currentLoadingPanel.show(currentUpdatedControl);
                }
            }
            function ResponseEnd(sender, args) {
                //hide the loading panel and clean up the global variables
                if (currentLoadingPanel != null) {
                    currentLoadingPanel.hide(currentUpdatedControl);
                    //alert('Hide: ' + currentUpdatedControl);
                }
                currentUpdatedControl = null;
                currentLoadingPanel = null;
            }

            function showLoadingPanel(sender, args) {
                toggleLoadingPanel(sender.get_id(), true);
            }

            function hideLoadingPanel(sender, args) {
                toggleLoadingPanel(sender.get_id(), false);
            }

            function toggleLoadingPanel(elementId, show) {
                var loadingPanel = $find("<%= RadAjaxLoadingPanel.ClientID%>");
                if (show) {
                    loadingPanel.show(elementId);
                }
                else {
                    loadingPanel.hide(elementId);
                }
            }

            function NodeClicked(sender, args) {
                //alert(args.get_node().get_value());
                toggleLoadingPanel("<%=RadGrid1.ClientID %>", false);
                toggleLoadingPanel("<%=RadGrid1.ClientID %>", true);
                var selectedTreeViewLocId = args.get_node().get_value();            
                LoadChildRecords(selectedTreeViewLocId);
                //PageMethods.GetCount(tableView.get_filterExpressions().toList(), updateVirtualItemCount);
                //RefreshGrid();
            }
            
            function RefreshGrid() {
                var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                masterTable.rebind();
            }
            function LoadChildRecords(selectedTreeViewLocId) {
                var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                
                PageMethods.GetDataByLocId(selectedTreeViewLocId, updateGrid);
            }

            function pageLoad() {
                PageMethods.set_path('/ProductionView/PView.aspx');
            }

            function updateGrid(result) {
                //alert("update control");
                var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                tableView.set_dataSource(result);
                updateVirtualItemCount(result.length)
                alert(result.length);
                tableView.dataBind();
            }

            function updateVirtualItemCount(result) {
                var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                tableView.set_virtualItemCount(result);
            }

            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);
            function endRequest(sender, e) {
                if (e.get_error()) {
                    debug.trace("[" + new Date().toLocaleTimeString() + "] An error occurred while processing the request on the server. Please try again later.");
                    alert("error");
                    e.set_errorHandled(true);
                }
            }
            Sys.Application.notifyScriptLoaded();
       
        </script>

Page method that returns the data to the grid:

[WebMethod]
        public static IEnumerable<JobItems> GetDataByLocId(int selectedTreeViewLocId)
        {
            JobItemsDataTable table = new JobItemsTableAdapter().GetData(selectedTreeViewLocId);
            foreach (JobItemsDataRow row in table.Rows)
            {
                yield return new JobItem(row.JobItemId, row.JobId, row.ItemName, row.ItemBarcode, row.LocationId, row.IsInRush);       
            }   
        }

[Tsvetoslav]

Hi Alex,

You need to explicitly set the page size of the grid in the UpdateVirtualItemCount method. Please, change it as follows:

function updateVirtualItemCount(result) {

    var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
    tableView.set_pageSize(result);
    tableView.set_virtualItemCount(result);
}

Hope it helps.

All the best, Tsvetoslav
the Telerik team