ajaxify controls inside a repeater

6 posts, 1 answers
  1. Jason Li
    Jason  Li avatar
    17 posts
    Member since:
    Apr 2010

    Posted 25 May 2013 Link to this post

    Hi,

    A very simple page with a repeater control. each row in the repeater has a button, clicking the button will change the button text to current time. But get js error when click the button after ajaxified the button. the error says "Uncaught TypeError: Cannot read property 'id' of undefined". the full set of code is attached below. can anyone help to have a look? Thanks in advance.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <div>
            <asp:Repeater ID="rptItems" runat="server">
                <ItemTemplate>
                    <asp:Button runat="server" ID="btnButton" Text="show time" OnClick="btnButton_Click" />
                </ItemTemplate>
            </asp:Repeater>
        </div>
        </form>
    </body>
    </html>

    using System;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    using System.Data;
    using System.Configuration;
    using System.Web.Security;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using Telerik.Web.UI;
     
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                int[] data = { 1, 2 };
                rptItems.DataSource = data;
                rptItems.DataBind();
            }
     
        }
     
        protected void Page_PreRender(object sender, EventArgs e)
        {
            foreach (RepeaterItem item in rptItems.Items)
            {
                var control = (Button)item.FindControl("btnButton");
                RadAjaxManager1.AjaxSettings.AddAjaxSetting(control, control);
            }
        }
     
        protected void btnButton_Click(object sender, EventArgs e)
        {
            (sender as Button).Text = DateTime.Now.ToString();
        }
     
    }
  2. Jason Li
    Jason  Li avatar
    17 posts
    Member since:
    Apr 2010

    Posted 27 May 2013 Link to this post

    Hi,

    Unfortunately just found the 2nd issue with the repeater and RadAjaxManager, when I tried to add Ajax settings in repeater item created event, an error came up, "Value cannot be null.Parameter name: page", strange thing is the same code "RadAjaxManager.GetCurrent(Page).AjaxSettings.AddAjaxSetting(btn, btn)
    " in the repeater item data bound event does not fire the error. here is the code, btw the first issue is still no luck even setting ajax when item data bound...

    protected void rptItems_ItemCreated(object sender, RepeaterItemEventArgs e)
    {
        var btn = (Button)e.Item.FindControl("btnButton");
        RadAjaxManager.GetCurrent(Page).AjaxSettings.AddAjaxSetting(btn, btn); //error occurs here!!
    }

    can a radajax expert help me with it?
     

     

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 29 May 2013 Link to this post

    Hi Jason,

    Please try to warp the repeater control into regular asp Panel and add this panel into the RadAjaxManager settings.

    Regards,
    Maria Ilieva
    Telerik
    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.
  5. Jason Li
    Jason  Li avatar
    17 posts
    Member since:
    Apr 2010

    Posted 01 Jun 2013 Link to this post

    Hi Maria,

    Thanks a lot for the reply, I did try to wrap the repeater into an asp panel, but it does not make any difference. put the panel as the updated control in the ajax settings will make the whole repeater updated. But what I want is a sort of partial postback, only update one repeater row when clicking on the button in the row. This kind of partial postback works well with RadGrid, but not repeater. The error is very easy to reproduce, can you have a further look?

    Regards,

    Jason
  6. Answer
    Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 06 Jun 2013 Link to this post

    Hi Jason,

    Set ClientIDMode="AutoID" for your Repeater and the problem should be resolved. The Manager can only handler AutoID, because it uses the server side ClientID property of the control, to Ajaxify it later client side.

    Regards,
    Vasil
    Telerik
    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 the blog feed now.
  7. Jason Li
    Jason  Li avatar
    17 posts
    Member since:
    Apr 2010

    Posted 10 Jun 2013 Link to this post

    Thanks Vasil, setting ClientIDMode="AutoID" does fix the issue!!

    Very appreciate your help!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017