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

ajaxify controls inside a repeater

5 Answers 481 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Jason Li
Top achievements
Rank 1
Jason Li asked on 25 May 2013, 12:30 PM
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();
    }
 
}

5 Answers, 1 is accepted

Sort by
0
Jason Li
Top achievements
Rank 1
answered on 27 May 2013, 12:57 PM
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?
 

 

0
Maria Ilieva
Telerik team
answered on 29 May 2013, 01:53 PM
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.
0
Jason Li
Top achievements
Rank 1
answered on 02 Jun 2013, 01:26 AM
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
0
Accepted
Vasil
Telerik team
answered on 06 Jun 2013, 11:36 AM
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.
0
Jason Li
Top achievements
Rank 1
answered on 11 Jun 2013, 02:57 AM
Thanks Vasil, setting ClientIDMode="AutoID" does fix the issue!!

Very appreciate your help!
Tags
Ajax
Asked by
Jason Li
Top achievements
Rank 1
Answers by
Jason Li
Top achievements
Rank 1
Maria Ilieva
Telerik team
Vasil
Telerik team
Share this question
or