Custom Paging and Scrol in grid.

2 posts, 1 answers
  1. Dhaval
    Dhaval avatar
    41 posts
    Member since:
    Aug 2010

    Posted 12 Dec 2011 Link to this post

    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
  2. Answer
    Antonio Stoilkov
    Admin
    Antonio Stoilkov avatar
    530 posts

    Posted 15 Dec 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top