This is a migrated thread and some comments may be shown as answers.

radajaxmanager control on multiple usercontrol

1 Answer 127 Views
UI for ASP.NET AJAX in ASP.NET MVC
This is a migrated thread and some comments may be shown as answers.
Satyajit
Top achievements
Rank 1
Satyajit asked on 01 Mar 2012, 06:22 AM

Hi,

Below I have given code of user control which I used multiple times on single page.But my problem is that I got null values in HandleScrolling() function when I moved grid scroll down to bottom.
I have placed Radscriptmanager on main .aspx page.
And one more important thing is I have made this user control's DLL and used in other project by adding reference of that usercontrol's dll.




<%@ Control Language="C#" ClassName="Acme.MyTestUC" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Import Namespace="System.Web.UI.WebControls" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace=" System.Reflection" %>

<script runat="server">
   
    protected void Page_Load(object sender, EventArgs e)
    {
        manager1 = RadAjaxManager.GetCurrent(this.Page);
        manager1.AjaxSettings.AddAjaxSetting(manager1, RadGrid2);
        manager1.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(manager1_AjaxRequest);
        
 

    }

    void manager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {
        RadGrid2.PageSize += 15;
        RadGrid2.Rebind();
    }
    RadAjaxManager manager1;
   
   
</script>

<!-- content start -->
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
            <!--
        function HandleScrolling(e) {
          
            var grid = $find("<%=RadGrid2.ClientID %>");

            //alert(grid.hasOwnProperty());

                        var scrollArea = document.getElementById("<%= RadGrid2.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 < 100) {
                    $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;
        }
            -->
    </script>
</telerik:RadCodeBlock>

 

<telerik:RadAjaxManagerProxy  id="RadAjaxManager1" runat="server"> 
        <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1"> 
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid2" LoadingPanelID="RadAjaxLoadingPanel2"></telerik:AjaxUpdatedControl>
            </UpdatedControls>
        </telerik:AjaxSetting>
        </AjaxSettings>
</telerik:RadAjaxManagerProxy >

<telerik:RadGrid ID="RadGrid2" AllowSorting="True"
    runat="server" AllowPaging="true" Width="97%" PageSize="15" GridLines="Vertical">
    <PagerStyle Visible="false" />
    <MasterTableView TableLayout="Fixed" />
    <ClientSettings>
        <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" />
        <ClientEvents OnScroll="HandleScrolling" />
    </ClientSettings>
</telerik:RadGrid>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server">
</telerik:RadAjaxLoadingPanel>
<br />


Thanks in advance for any help.
Regards,
Satyajit Kadam.

1 Answer, 1 is accepted

Sort by
0
Andrey
Telerik team
answered on 05 Mar 2012, 02:42 PM
Hello,

The only problem that I see in your code is that you set the ID property of the RadAjaxManagerProxy control to "RadAjaxManager1" and then you are trying to find the RadAjaxManager control with the same ID("RadAjaxManager1"). And since the RadAjaxManagerProxy control does not have AjaxRequest function that is why you are getting the null value in the JavaScript function. You could check this help topic for more information on how to initiate Ajax request through RadAjaxManager when you are using RadAjaxManagerProxy control.

Basically, you need to change this if statement:

if (currentlyDisplayedRecords < 100) {
   $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("LoadMoreRecords");
}

with this one:

if (currentlyDisplayedRecords < 100) {
   $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest("LoadMoreRecords");  
}

Give this suggestion a try and check whether the issue is resolved.

Regards,
Andrey
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.
Tags
UI for ASP.NET AJAX in ASP.NET MVC
Asked by
Satyajit
Top achievements
Rank 1
Answers by
Andrey
Telerik team
Share this question
or