Repeater, RadAjax and ItemDataBound

[David Johnson]

Hi,

I am trying to ensure that when the user clicks on a link within a pager control, that a control on the page (a datalist) is updated. So far the AJAX works fine, however the loading panel won't show up.
 
I've tried programmatically adding the AjaxSettings in the ItemDataBound event of the repeater (as well as the ItemCreated, and PreRender events) to each of the Hyperlinks within the RepeaterItem, however I'm continually getting either an 'Object reference not set to instance of object' error, or a 'value cannot be null error'.

<telerik:RadAjaxLoadingPanel id="LoadingPanel" cssclass="loading" transparency="20" Runat="server">

</telerik:RadAjaxLoadingPanel>


<h3>Images <a href="javascript://" class="upload">Upload Image</a></h3>
<div id="images">
    <telerik:RadAjaxManager ID="ajaxManager" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="dlImages">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ajaxPanelPaging" loadingpanelid="LoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:ajaxsetting ajaxcontrolid="lnkPage">
                <updatedcontrols>
                    <telerik:ajaxupdatedcontrol controlid="ajaxPanelDataList" loadingpanelid="LoadingPanel" />
                    <telerik:ajaxupdatedcontrol controlid="ajaxPanelTabs" />
                    <telerik:AjaxUpdatedControl ControlID="ajaxPanelPaging" loadingpanelid="LoadingPanel" />
                </updatedcontrols>
            </telerik:ajaxsetting>
            <telerik:ajaxsetting ajaxcontrolid="lnkCategory">
                <updatedcontrols>
                    <telerik:ajaxupdatedcontrol controlid="ajaxPanelDataList" loadingpanelid="LoadingPanel" />
                    <telerik:ajaxupdatedcontrol controlid="ajaxPanelTabs" loadingpanelid="LoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="ajaxPanelPaging" loadingpanelid="LoadingPanel" />
                </updatedcontrols>
            </telerik:ajaxsetting>
            <telerik:ajaxsetting ajaxcontrolid="lnkImageLibrary">
                <updatedcontrols>
                    <telerik:ajaxupdatedcontrol controlid="ajaxPanelDataList" loadingpanelid="LoadingPanel" />
                    <telerik:ajaxupdatedcontrol controlid="ajaxPanelTabs" />
                    <telerik:AjaxUpdatedControl ControlID="ajaxPanelPaging" loadingpanelid="LoadingPanel" />
                </updatedcontrols>
            </telerik:ajaxsetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>




    <telerik:RadAjaxPanel ID="ajaxPanelTabs" runat="server" >
    <ul class="tabs">
        <li class="page"><asp:linkbutton id="lnkPage" runat="server" text="Images for this page" /></li>
        <li class="category"><asp:linkbutton id="lnkCategory" runat="server"/></li>
        <li class="library"><asp:linkbutton id="lnkImageLibrary" runat="server" text="Park Image Library"/></li>
    </ul>
    </telerik:RadAjaxPanel>




    <div class="data">
        <telerik:RadAjaxPanel ID="ajaxPanelDataList" runat="server" LoadingPanelID="LoadingPanel">
        <asp:datalist id="dlImages" repeatcolumns="6" cellspacing="2" repeatdirection="Horizontal" runat="server">
            <itemtemplate>
                <div>
                    <a rel="lightbox" href="<%=FullSizeURL %>"><asp:image id="imgThumb" runat="server"/></a>
                </div>
                <ul>
                    <li><asp:linkbutton runat="server" id="lnkAdd" cssclass="add" title="Add image to this category" commandname="add">Add</asp:linkbutton></li>
                    <li class="last"><asp:hyperlink id="lnkView" runat="server" target="_blank" cssclass="view" rel="lightbox" titlre="View this image">View</asp:hyperlink></li>
                </ul>
            </itemtemplate>
        </asp:datalist>
        </telerik:RadAjaxPanel>
    </div>




    <telerik:RadAjaxPanel id="ajaxPanelPaging" visible="true" runat="server">
    <asp:linkbutton id="lnkFirstPage" runat="server">First Page</asp:linkbutton>
    <asp:repeater id="rptPaging" runat="server">
    <headertemplate><ul class="verticalpager"></headertemplate>
    <itemtemplate>
        <li><asp:linkbutton id="lnkPageIndex" commandname="page" runat="server" /></li>
    </itemtemplate>
    <footertemplate></ul></footertemplate>
    </asp:repeater>
    </telerik:RadAjaxPanel>
</div>

And the code behind

void rptPaging_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if ((e.Item.ItemType == ListItemType.Item) || (e.Item.ItemType == ListItemType.AlternatingItem))
    {
        LinkButton lnkPageIndex = (LinkButton)e.Item.FindControl("lnkPageIndex");
        lnkPageIndex.Text = (e.Item.ItemIndex + 1).ToString();

        if (this.CurrentPage == e.Item.ItemIndex) {
            lnkPageIndex.CssClass = "selected";
        }

        // THIS IS WHERE THE ERROR IS THROWN
        ajaxManager.AjaxSettings.AddAjaxSetting(lnkPageIndex, dlImages, LoadingPanel);
    }
}

Any ideas?

[Vlad]

Hi Nath,

Please check this example to know more about how to achieve your goal:
http://www.telerik.com/DEMOS/ASPNET/Prometheus/Ajax/Examples/Manager/PartialAjaxification/DefaultCS.aspx

You can use similar approach with repeater, datalist, etc.

All the best,
Vlad
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[David Johnson]

Vlad,

As I said, I can get the AJAX to work on the paging links fine, however when I try to assign a loading panel to the links that's where it goes pear shaped, and when I get the errors I mentioned in my first post.

[David Johnson]

Okay so I managed to solve one problem, it required me to add an ajaxManagerProxy to each DataListItem, and the links are now displaying the loading panel. However, rather than having 1 loadingpanel, I would like to display a single loading panel per DataListItem.

I have added the code thusly:

<itemtemplate>
    <telerik:RadAjaxManagerProxy ID="ajaxManagerDataList" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="lnkAdd">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ajaxPanelDataList" loadingpanelid="LoadingPanelDataList" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
    <telerik:RadAjaxLoadingPanel id="LoadingPanelDataList" cssclass="loading" transparency="5" Runat="server"/>

    <div>
        <asp:hyperlink id="lnkThumb" runat="server"><asp:image id="imgThumb" runat="server"/></asp:hyperlink>
    </div>
    <ul>
        <asp:placeholder id="plRemove" runat="server"><li><asp:linkbutton runat="server" id="lnkRemove" cssclass="remove" title="Remove image from this category" commandname="remove">Remove</asp:linkbutton></li></asp:placeholder>
        <asp:placeholder id="plHero" runat="server"><li><asp:linkbutton runat="server" id="lnkHero" cssclass="hero" title="Make this image the hero shot" commandname="hero">Hero</asp:linkbutton></li></asp:placeholder>
        <asp:placeholder id="plAdd" runat="server"><li><asp:linkbutton runat="server" id="lnkAdd" cssclass="add" title="Add image to this category" commandname="add">Add</asp:linkbutton></li></asp:placeholder>
        <li class="last"><asp:hyperlink id="lnkView" runat="server" target="_blank" cssclass="view" rel="lightbox" title="View this image">View</asp:hyperlink></li>
    </ul>
</itemtemplate>

However it's only adding a single loading panel, as you can see by the Javascript that RadAjax spits out:

[{ControlID:"ctl01_ctl00_ajaxPanelDataList",PanelID:"ctl01_ctl00_dlImages_ctl00_LoadingPanelDataList"}]},{InitControlID : "ctl01_ctl00_dlImages_ctl01_lnkAdd",UpdatedControls :
[{ControlID:"ctl01_ctl00_ajaxPanelDataList",PanelID:"ctl01_ctl00_dlImages_ctl00_LoadingPanelDataList"}]},{InitControlID : "ctl01_ctl00_dlImages_ctl02_lnkAdd",UpdatedControls :
[{ControlID:"ctl01_ctl00_ajaxPanelDataList",PanelID:"ctl01_ctl00_dlImages_ctl00_LoadingPanelDataList"}]},{InitControlID : "ctl01_ctl00_dlImages_ctl03_lnkAdd",UpdatedControls :
[{ControlID:"ctl01_ctl00_ajaxPanelDataList",PanelID:"ctl01_ctl00_dlImages_ctl00_LoadingPanelDataList"}]},{InitControlID : "ctl01_ctl00_dlImages_ctl04_lnkAdd",UpdatedControls :
[{ControlID:"ctl01_ctl00_ajaxPanelDataList",PanelID:"ctl01_ctl00_dlImages_ctl00_LoadingPanelDataList"}]},{InitControlID : "ctl01_ctl00_dlImages_ctl05_lnkAdd",UpdatedControls :
[{ControlID:"ctl01_ctl00_ajaxPanelDataList",PanelID:"ctl01_ctl00_dlImages_ctl00_LoadingPanelDataList"}]},{InitControlID : "ctl01_ctl00_dlImages_ctl06_lnkAdd",UpdatedControls :
[{ControlID:"ctl01_ctl00_ajaxPanelDataList",PanelID:"ctl01_ctl00_dlImages_ctl00_LoadingPanelDataList"}]},{InitControlID : "ctl01_ctl00_dlImages_ctl07_lnkAdd",UpdatedControls :
[{ControlID:"ctl01_ctl00_ajaxPanelDataList",PanelID:"ctl01_ctl00_dlImages_ctl00_LoadingPanelDataList"}]},{InitControlID : "ctl01_ctl00_dlImages_ctl08_lnkAdd",UpdatedControls :
[{ControlID:"ctl01_ctl00_ajaxPanelDataList",PanelID:"ctl01_ctl00_dlImages_ctl00_LoadingPanelDataList"}]},{InitControlID : "ctl01_ctl00_dlImages_ctl09_lnkAdd",UpdatedControls :
[{ControlID:"ctl01_ctl00_ajaxPanelDataList",PanelID:"ctl01_ctl00_dlImages_ctl00_LoadingPanelDataList"}]},{InitControlID : "ctl01_ctl00_dlImages_ctl10_lnkAdd",UpdatedControls :
[{ControlID:"ctl01_ctl00_ajaxPanelDataList",PanelID:"ctl01_ctl00_dlImages_ctl00_LoadingPanelDataList"}]},{InitControlID : "ctl01_ctl00_dlImages_ctl11_lnkAdd",UpdatedControls :
[{ControlID:"ctl01_ctl00_ajaxPanelDataList",PanelID:"ctl01_ctl00_dlImages_ctl00_LoadingPanelDataList"}]},{InitControlID : "ctl01_ctl00_dlImages_ctl12_lnkAdd",UpdatedControls :
[{ControlID:"ctl01_ctl00_ajaxPanelDataList",PanelID:"ctl01_ctl00_dlImages_ctl00_LoadingPanelDataList"}]},{InitControlID : "ctl01_ctl00_dlImages_ctl13_lnkAdd",UpdatedControls :
[{ControlID:"ctl01_ctl00_ajaxPanelDataList",PanelID:"ctl01_ctl00_dlImages_ctl00_LoadingPanelDataList"}]},{InitControlID : "ctl01_ctl00_dlImages_ctl14_lnkAdd",UpdatedControls :
[{ControlID:"ctl01_ctl00_ajaxPanelDataList",PanelID:"ctl01_ctl00_dlImages_ctl00_LoadingPanelDataList"}]},{InitControlID : "ctl01_ctl00_dlImages_ctl15_lnkAdd",UpdatedControls :
[{ControlID:"ctl01_ctl00_ajaxPanelDataList",PanelID:"ctl01_ctl00_dlImages_ctl00_LoadingPanelDataList"}]},{InitControlID : "ctl01_ctl00_dlImages_ctl16_lnkAdd",UpdatedControls :
[{ControlID:"ctl01_ctl00_ajaxPanelDataList",PanelID:"ctl01_ctl00_dlImages_ctl00_LoadingPanelDataList"}]},{InitControlID : "ctl01_ctl00_dlImages_ctl17_lnkAdd",UpdatedControls :
[{ControlID:"ctl01_ctl00_ajaxPanelDataList",PanelID:"ctl01_ctl00_dlImages_ctl00_LoadingPanelDataList"}]},{InitControlID : "ctl01_ctl00_dlImages_ctl18_lnkAdd",UpdatedControls :

Is there any way around this?

[Iana Tsolova]

Hi Nath Manley,

RadAjaxLoadingPanel is shown as a progress indication when a callback request is performed. By default it appears over the updated control and multiple loading panels are displayed over each updated control per callback.
Therefore in your case where the updated control is the panel holding the datalist, it is expected that the loading panel appear only over the data list panel.

Find more about AjaxLoadingPanel here.

All the best,
Iana
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[jonnyO]

I'm trying to AJAXify a hyperlink that loads a webcontrol in "Panel1".  The hyperlink is located in a datalist within a datalist.

                    <asp:DataList ID="DataList1" runat="server" DataKeyField="InterestTopicsID" DataSourceID="SDSTopicsTypes" OnItemDataBound="DataList1_ItemDataBound">
                        <ItemTemplate>
                            <asp:Label ID="Label1" runat="server" Font-Bold="true" Text='<%# Eval("InterestTopicsLabel")%>'></asp:Label><br />
                            <asp:SqlDataSource ID="TopicsList" runat="server" ConnectionString="<%$ ConnectionStrings:dbxyz %>" SelectCommand="xyz" SelectCommandType="StoredProcedure">
                                <SelectParameters>
                                    <asp:Parameter Name="xyz" Type="Int32" />
                                </SelectParameters>
                            </asp:SqlDataSource>
                            <asp:DataList ID="dlLinks" runat="server" DataSourceID="SDSTopicsList" RepeatColumns="1" RepeatDirection="Vertical">
                                <ItemTemplate>
                                    <asp:HyperLink ID="lnkTopicsNav" runat="server" CssClass="normalLink" NavigateUrl='<%# "?Content=" + (Eval("InterestTopicsEntryURL").ToString()) + "&SubjectID=" + (Eval("InterestTopicsEntryID").ToString()) %>'>
                                        <asp:Label ID="lblTopicsEntryLabel" runat="server" Text='<%# Eval("InterestTopicsEntryLabel") %>' ToolTip='<%# Eval("InterestTopicsEntryLabel") %>'></asp:Label></asp:HyperLink>
                                </ItemTemplate>
                                <ItemStyle HorizontalAlign="Left" Width="190px" />
                                <FooterTemplate>
                                </FooterTemplate>
                                <FooterStyle Height="12px" />
                            </asp:DataList>
                        </ItemTemplate>
                    </asp:DataList>
                    <asp:SqlDataSource ID="TopicsTypes" runat="server" ConnectionString="<%$ ConnectionStrings:dbxyz %>" OnSelecting="TopicsTypes_Selecting" SelectCommand="Topics" SelectCommandType="StoredProcedure">
                        <SelectParameters>
                            <asp:Parameter Name="xyz" Type="Int32" />
                        </SelectParameters>
                    </asp:SqlDataSource>

    Protected Sub DataList1_ItemCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataListItemEventArgs) Handles DataList1.ItemCreated
            Dim Panel1 As Panel = CType(FindControl("Panel1"), Panel)
            If (TypeOf e.Item Is DataListItem) Then
                Dim listItem As DataListItem = CType(e.Item, DataListItem)
                Dim dlLinks As DataList = CType(listItem.FindControl("dlLinks"), DataList)
                Dim lnkTopicsNav As HyperLink = CType(listItem.FindControl("lnkTopicsNav"), HyperLink)
                RadAjaxManager1.AjaxSettings.AddAjaxSetting(lnkTopicsNav, Panel1)
            End If
    End Sub

I'm getting the following error:
________________________________________________
Object reference not set to an instance of an object.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

Source Error:

Line 514: Dim dlLinks As DataList = CType(listItem.FindControl("dlLinks"), DataList) Line 515: Dim lnkTopicsNav As HyperLink = CType(listItem.FindControl("lnkTopicsNav"), HyperLink) Line 516: RadAjaxManager1.AjaxSettings.AddAjaxSetting(lnkTopicsNav, Panel1)Line 517: End If Line 518: End Sub

Source File: E:\Visual Studio 2005\Projects\HOASampleSite\Default.aspx.vb    Line: 516

Stack Trace:

[NullReferenceException: Object reference not set to an instance of an object.] Telerik.Web.UI.AjaxSettingsCollection.AddAjaxSetting(Control ajaxifiedControl, Control updatedControl) +56 _Default.DataList1_ItemCreated(Object sender, DataListItemEventArgs e) in E:\Visual Studio 2005\Projects\HOASampleSite\Default.aspx.vb:516 System.Web.UI.WebControls.DataList.OnItemCreated(DataListItemEventArgs e) +1605994 System.Web.UI.WebControls.DataList.CreateItem(Int32 itemIndex, ListItemType itemType, Boolean dataBind, Object dataItem) +93 System.Web.UI.WebControls.DataList.CreateControlHierarchy(Boolean useDataSource) +613 System.Web.UI.WebControls.BaseDataList.OnDataBinding(EventArgs e) +56 System.Web.UI.WebControls.BaseDataList.DataBind() +52 System.Web.UI.WebControls.BaseDataList.EnsureDataBound() +76 System.Web.UI.WebControls.BaseDataList.CreateChildControls() +63 System.Web.UI.Control.EnsureChildControls() +87 System.Web.UI.Control.PreRenderRecursiveInternal() +50 System.Web.UI.Control.PreRenderRecursiveInternal() +170 System.Web.UI.Control.PreRenderRecursiveInternal() +170 System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +2041

---

Version Information: Microsoft .NET Framework Version:2.0.50727.1433; ASP.NET Version:2.0.50727.1433
___________________________________________

Any help would be appreciated.
Regards
John

[Iana Tsolova]

Hi jonnyO,

Please try debugging your project and make sure that you have found the proper HyperLink on ItemCreated.

Additionally, I suggest that you update the panel directly from the datalist. Thus when any link is clicked from the datalist, the panel is updated.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="DataList1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Panel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

Give it a try and let us know how it goes.

Sincerely yours,
Iana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[jonnyO]

Thanks
After playing with RadTreeView I realized I would probably be best off using radPanelBar.. sure was.  I created CustomAttributes and passed them via session variable to the loaded WebUserControl and I easy achieved the AJAXified limited "page rendering" I wanted.  I was also able to create the perfect look and feel of my left menu "text links" with a custom skin and the generated code is a fraction of what I was trying with a DataList control.  My hats off to the Telerik team for an ever better RAdControls ASP.NET AJAX suite. 

[mathieu cupryk]

Link is dead