Custom Paging and Scrol in grid.

[Dhaval]

Hi there,

I have used the second option for scrolling in grid of following link:

http://demos.telerik.com/aspnet-ajax/grid/examples/client/virtualscrollpagingclientbinding/defaultcs.aspx

I want to implement the custom paging along with it. When i am trying to implement both of them, ajax panel goes on loading infinitely..

 Below is the code Snippet for Grid:

<telerik:RadAjaxManager ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1"
        runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="prospectGrid">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="prospectGrid" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="prospectGrid" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </telerik:RadAjaxManager>
<telerik:RadGrid ID="prospectGrid" AllowFilteringByColumn="true" AllowPaging="True"
                PageSize="50" runat="server" AllowSorting="true" OnNeedDataSource="prospectGrid_NeedDataSource"
                GridLines="None" AllowMultiRowSelection="false" Height="450px" OnItemDataBound="OnDataBound">
                <PagerStyle Visible="false" />
                <MasterTableView DataKeyNames="ID" TableLayout="Fixed" AutoGenerateColumns="false">
                    <Columns>
                        <telerik:GridBoundColumn DataField="ID" HeaderText="ProspectId" Display="false" UniqueName="ProspectId" />
                        <telerik:GridTemplateColumn DataField="Live" HeaderText="Live" AllowFiltering="false"
                            HeaderStyle-Width="30px">
                            <ItemTemplate>
                                <center>
                                    <asp:Image ID="Image1" runat="server" ImageUrl="~/images/live.png" Visible='<%#Eval("Live") %>' /></center>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn DataField="PartnerCompany" HeaderText="Partner Company"
                            UniqueName="PartnerCompany" />
                        <telerik:GridBoundColumn DataField="PersonName" HeaderText="Person Name" UniqueName="CustomerName" />
                        <telerik:GridBoundColumn DataField="ServiceType" HeaderText="Service Type" UniqueName="ServiceType" />
                        <telerik:GridBoundColumn DataField="PersonContact" HeaderText="Person Contact" UniqueName="Contact" />
                        <telerik:GridBoundColumn DataField="Title" HeaderText="Title" UniqueName="Title" />
                        <telerik:GridBoundColumn DataField="PersonDirectNumber" HeaderText="Person Direct No"
                            UniqueName="Phone No" />
                        <telerik:GridBoundColumn DataField="PersonEmail" HeaderText="Person Email" UniqueName="Email" />
                        <telerik:GridBoundColumn DataField="FollowUpDate" HeaderText="FollowUp Date" UniqueName="FollowUpDate" />
                        <telerik:GridBoundColumn DataField="FollowUpDesc" HeaderText="Follow Up Desc" UniqueName="Description" />
                        <telerik:GridBoundColumn DataField="ContractETA" HeaderText="Contract ETA" UniqueName="CotnactETA" />
                        <telerik:GridBoundColumn DataField="ServiceETA" HeaderText="Service ETA" UniqueName="ServiceETA" />
                        <telerik:GridTemplateColumn DataField="NotesDesc" HeaderText="Notes" AllowFiltering="false"
                            HeaderStyle-Width="55px">
                            <ItemTemplate>
                                <center>
                                    <a href="#" onclick="notesClick('<%#DataBinder.Eval(Container.DataItem,"ID")%>'); return false;">
                                        <input type="image" src="images/note.png" /></a></center>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridTemplateColumn DataField="" HeaderText="Follow Up" AllowFiltering="false"
                            HeaderStyle-Width="70px">
                            <ItemTemplate>
                                <center>
                                    <asp:HyperLink ImageUrl="~/images/schedule.png" ID="schedule" runat="server" />
                                </center>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings EnableRowHoverStyle="true" Resizing-AllowColumnResize="true" EnablePostBackOnRowClick="false">
                    <ClientEvents OnRowDblClick="OnRowDblClick" />
                    <Selecting AllowRowSelect="false" />
                    <Scrolling AllowScroll="true" FrozenColumnsCount="3" UseStaticHeaders="true" SaveScrollPosition="true" />
                    <ClientEvents OnScroll="handleScrolling" />
                </ClientSettings>
                <HeaderStyle Width="200px" />
            </telerik:RadGrid>

Below is the Code Snippet for Javascript Function:

<telerik:RadCodeBlock runat="server">
      function handleScrolling(e) {
                var grid = $find("<%=prospectGrid.ClientID %>");

                var scrollArea = document.getElementById("<%= prospectGrid.ClientID %>" + "_GridData");

                if (IsScrolledToBottom(scrollArea)) {
                    var currentlyDisplayedRecords = grid.get_masterTableView().get_pageSize() * (grid.get_masterTableView().get_currentPageIndex() + 1);

                    //if the presently visible items are less than the entire source records count
                    //trigger an ajax request to increase them


                   if (currentlyDisplayedRecords < 30) {
                        $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("LoadMoreRecords");
                    }
                }
           }
            //this method calculates whether you have reached the bottom when dragging the vertical grid scroll
            function IsScrolledToBottom(scrollArea) {
                var currentPosition = scrollArea.scrollTop + scrollArea.clientHeight;
                return currentPosition == scrollArea.scrollHeight;
           }
</telerik:RadCodeBlock>

Below is the Code Snippet for .cs file:

protected void prospectGrid_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
       {
           prospectGrid.VirtualItemCount = DbContext.getProspectProfile(startRowIndex ,endRowIndex).ToList().Count();
           int totalCount = prospectGrid.VirtualItemCount;
           int startRowIndex = (prospectGrid.CurrentPageIndex * prospectGrid.PageSize) + 1;
           int endRowIndex = ((startRowIndex + 15) > totalCount ? totalCount : startRowIndex + 15) - 1;
           prospectGrid.DataSource = DbContext.getProspectProfile(startRowIndex ,endRowIndex);
      }

Please help me on this issue.

Regards,
Dhaval

[Antonio Stoilkov]

Hi Dhaval,

You scenario is not supported by default. You could try and replicate the demo you already showed and set PagerStyle Visible property to true. You will observe that the pager works but do not update the current page index. You could update it by calling the MasterTableView set_currentPageIndex client method. Note that if you are setting the current page index you could use RadAjaxManager to ajaxify the grid.

Greetings,
Antonio Stoilkov
the Telerik team