[Solved] RadListView + radDataPager + Ajax (panel or manager))

[Olivier]

Hello

I would like to add a ajax manager like this sample and it's doesn't work ? do you know why ?

http://www.telerik.com/help/aspnet-ajax/listview-datapager-for-paging.html

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                   <AjaxSettings>
                       <telerik:AjaxSetting AjaxControlID="RLV_BIEN">
                           <UpdatedControls>
                               <telerik:AjaxUpdatedControl ControlID="RLV_BIEN" LoadingPanelID="RadAjaxLoadingPanel1" />
                           </UpdatedControls>
                       </telerik:AjaxSetting>
                   </AjaxSettings>
               </telerik:RadAjaxManager>
               <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" MinDisplayTime="0" Skin="Metro"/>



               <!-- debut du listview-->
               <telerik:RadListView ID="RLV_BIEN" runat="server" ItemPlaceholderID="EmployeesContainer" DataSourceID="WbAffaires" OnItemDataBound="RLV_BIEN_Affaires_ItemDataBound"
                   AllowPaging="True" AllowSorting="true" DataKeyNames="bi_id">
                   <LayoutTemplate>
                       <fieldset style="width:635px;" id="RLV_BIEN">
                           <legend></legend>
                           <telerik:RadDataPager ID="RadDataPager1" PagedControlID="RLV_BIEN" runat="server" CssClass="RadDataPager" PageSize="10">
                               <Fields>
                                   <telerik:RadDataPagerPageSizeField  PageSizeText="Biens par page" PageSizes="10,20,30"/>
                                   <telerik:RadDataPagerButtonField FieldType="FirstPrev" FirstButtonText="First" PrevButtonText="Prev" />
                                   <telerik:RadDataPagerButtonField FieldType="Numeric" PageButtonCount="5"></telerik:RadDataPagerButtonField>

                                   <telerik:RadDataPagerButtonField FieldType="NextLast" NextButtonText="Next" LastButtonText="Last" />

                                   <telerik:RadDataPagerTemplatePageField>
                                        <PagerTemplate>
                                           <asp:DropDownList runat="server" ID="DDL_TRI" OnSelectedIndexChanged="DDL_TRI_SelectedIndexChanged" AutoPostBack="true" CssClass="DDL_LIST_BIEN">
                                               <asp:ListItem Text="Choisir votre tri" Value="" Selected="true"></asp:ListItem>
                                               <asp:ListItem Text="Prix ascendant" Value="prixasc" ></asp:ListItem>
                                               <asp:ListItem Text="Prix descendant" Value="prixdesc"></asp:ListItem>
                                               <asp:ListItem Text="Date plus recent" Value="dateasc"></asp:ListItem>
                                               <asp:ListItem Text="Date moins recent" Value="datedesc"></asp:ListItem>
                                               <asp:ListItem Text="Surface ascendant" Value="surfaceasc"></asp:ListItem>
                                               <asp:ListItem Text="Surface descendant" Value="surfacedesc"></asp:ListItem>
                                               <asp:ListItem Text="Nb pièce ascendant" Value="pieceasc"></asp:ListItem>
                                               <asp:ListItem Text="Nb pièce descendant" Value="piecedesc"></asp:ListItem>
                                               <asp:ListItem Text="Nature du bien" Value="naturebien"></asp:ListItem>
                                           </asp:DropDownList>
                                        </PagerTemplate>
                                   </telerik:RadDataPagerTemplatePageField>
                               </Fields>
                           </telerik:RadDataPager><br />

                           <asp:PlaceHolder ID="EmployeesContainer" runat="server">
                           </asp:PlaceHolder>
                           <div class="clear"></div>
                           <telerik:RadDataPager ID="RadDataPager2" PagedControlID="RLV_BIEN" runat="server" CssClass="RadDataPager" PageSize="10" >
                               <Fields>
                                   <telerik:RadDataPagerPageSizeField PageSizeText="Biens par page" PageSizes="10,20,30"/>
                                   <telerik:RadDataPagerButtonField FieldType="FirstPrev" FirstButtonText="First" PrevButtonText="Prev" />
                                   <telerik:RadDataPagerButtonField FieldType="Numeric" PageButtonCount="5"></telerik:RadDataPagerButtonField>
                                   <telerik:RadDataPagerButtonField FieldType="NextLast" NextButtonText="Next" LastButtonText="Last" />
                                   <telerik:RadDataPagerTemplatePageField>
                                        <PagerTemplate>
                                           <asp:DropDownList runat="server" ID="DDL_TRI2" OnSelectedIndexChanged="DDL_TRI_SelectedIndexChanged" AutoPostBack="true" CssClass="DDL_LIST_BIEN">
                                               <asp:ListItem Text="Choisir votre tri" Value="" Selected="true"></asp:ListItem>
                                               <asp:ListItem Text="Prix ascendant" Value="prixasc"></asp:ListItem>
                                               <asp:ListItem Text="Prix descendant" Value="prixdesc"></asp:ListItem>
                                               <asp:ListItem Text="Date plus recent" Value="dateasc"></asp:ListItem>
                                               <asp:ListItem Text="Date moins recent" Value="datedesc"></asp:ListItem>
                                               <asp:ListItem Text="Surface ascendant" Value="surfaceasc"></asp:ListItem>
                                               <asp:ListItem Text="Surface descendant" Value="surfacedesc"></asp:ListItem>
                                               <asp:ListItem Text="Nb pièce ascendant" Value="pieceasc"></asp:ListItem>
                                               <asp:ListItem Text="Nb pièce descendant" Value="piecedesc"></asp:ListItem>
                                               <asp:ListItem Text="Nature du bien" Value="naturebien"></asp:ListItem>
                                           </asp:DropDownList>
                                        </PagerTemplate>
                                   </telerik:RadDataPagerTemplatePageField>
                               </Fields>
                           </telerik:RadDataPager>

                           <div><img src="images/px.gif" height="10" /></div>
                       </fieldset>
                   </LayoutTemplate>

                   <ItemTemplate>
                       <fieldset style="float: left; width: 420px;">
                           <legend><%-- Company: <%#Eval("naturebien")%>--%></legend>

                           <article class="listeBien marT10">
                               <!--Titre -->
                               <div class="typeBienTitre">
                                   <span class="plus_info"><asp:LinkButton runat="server" id="HPL_PLUSDETAIL" onclick="BTN_BIENDETAIL_CLICK" Text="Plus de détails"></asp:LinkButton></span>
                                   <asp:LinkButton runat="server" id="HPL_PLUSDETAIL2" onclick="BTN_BIENDETAIL_CLICK">
                                       <h3>Réf : <asp:Label ID="LBL_REFERENCE" runat="server"></asp:Label><br />
                                           <asp:Label ID="LBL_NATUREBIEN" runat="server"></asp:Label> - <asp:Label ID="LBL_NBPIECES_M2" runat="server"></asp:Label><asp:Label ID="LBL_VILLEBIEN3" runat="server" ></asp:Label> (<asp:Label ID="LBL_CPBIEN3" runat="server"></asp:Label>)
                                       </h3>
                                   </asp:LinkButton>
                               </div><!--Fin titre -->

                               <!--Bloc Gallery Photo -->
                               <div class="bGaucheList">
                                   <div style="text-align:center;margin-bottom:10px!important;"><asp:HyperLink runat="server"  id="HPL_IMG_GRAND"><asp:Image alt="Holder" CssClass="photoHolder marT0" id="IMG_GRAND" runat="server" height="100%"></asp:Image></asp:HyperLink></div>
                                   <ul id="mycarousel" class="monCarousel jcarousel-skin-tango">
                                       <telerik:RadListView ID="RadLvPhoto" runat="server" DataSourceID="WbPhoto" OnItemDataBound="RadLvPhoto_ItemDataBound">
                                           <ItemTemplate>
                                               <li><asp:HyperLink runat="server" id="HPL_PHOTOLIST"><asp:Image runat="server" alt="to" id="PHOTO" width="55px" height="36px"></asp:Image></asp:HyperLink></li>
                                            </ItemTemplate>
                                        </telerik:RadListView>
                                    </ul>
                                </div><!--Fin Bloc Gallery Photo -->

                                <div class="bDroiteList"><!--Description -->
                                   <h2><asp:Label ID="LBL_NATUREBIEN2" runat="server"></asp:Label> à <asp:Label ID="LBL_VILLEBIEN" runat="server"></asp:Label> (<asp:Label ID="LBL_CPBIEN" runat="server"></asp:Label>) <br />
                                       <div id="DIV_TERRAIN" runat="server" visible="false"><asp:Label ID="LBL_TERR_DESCRIP" runat="server"></asp:Label><asp:Label ID="LBL_SURF_TERRAIN" runat="server"></asp:Label> m² environ<br /></div>
                                       <div id="DIV_PIECES" runat="server" style="float:left;"><asp:Label ID="LBL_NBPIECES2" runat="server"></asp:Label> pièces de <asp:Label ID="LBL_SURFACETOT" runat="server"></asp:Label> m² environ - </div><asp:Label ID="LBL_PRIX" runat="server"></asp:Label> € F.A.I
                                    </h2><br /><br />
                                    <asp:Label ID="LBL_PUBLONG" runat="server" ></asp:Label><br /><br />
                                    <table id="TAB_DPE" runat="server">
                                        <tr>
                                           <td>Effet de serre</td>
                                           <td>Consomation énergétique</td>
                                        </tr>
                                        <tr>
                                           <td><asp:Image ID="IMG_CONSO_PETIT" runat="server" /></td>
                                           <td><asp:Image ID="IMG_CO2_PETIT" runat="server" /></td>
                                        </tr>
                                    </table>
                                </div><!--Fin Description -->

                                <div class="clear"></div>
                               <br />
                               <div class="bAgentContact"><!--Agence a contacter -->
                                   <h2><asp:HyperLink runat="server" id="HPL_AGENCE" onclick="BTN_DETAIL_CLICK" ><asp:Label ID="LBL_ENSEIGNE2" runat="server" ></asp:Label></asp:HyperLink></h2>
                                   <p class="infosAgent">
                                       <asp:Label ID="LBL_ADRESSE" runat="server"></asp:Label><br />
                                       <asp:Label ID="LBL_TEL_AGENCE" runat="server" Font-Size="12"></asp:Label><br />
                                       <asp:HyperLink id="HPL_ETRE_CONTACT"  runat="server" class="iconEtreContact" NavigateUrl="#">Nous contacter par email</asp:HyperLink>
                                   </p>
                                   <div>
                                       <telerik:RadSocialShare ID="RadSocialShare1" runat="server" BackColor="Transparent" BorderColor="Transparent">
                                           <MainButtons>
                                               <telerik:RadSocialButton SocialNetType="ShareOnFacebook"></telerik:RadSocialButton>
                                               <telerik:RadSocialButton SocialNetType="ShareOnTwitter"></telerik:RadSocialButton>
                                               <telerik:RadGoogleButton ButtonSize="Small" />
                                           </MainButtons>
                                       </telerik:RadSocialShare>
                                   </div>
                                   <div><asp:ImageButton id="IMG_AGENCE" runat="server" OnClick="BTN_DETAIL_CLICK" CssClass="photoAgenceBien"/></div>
                                   <div class="clear"></div>
                               </div><!--Fin Agent a contacter -->
                           </article>
                       </fieldset>
                   </ItemTemplate>
               </telerik:RadListView>
               <!-- fin du listview-->

i test so with ajaxPanel, and i see my blue metro loading but the page stay in 1 and nothing doesn't work.

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Metro" Transparency="30" MinDisplayTime="0"></telerik:RadAjaxLoadingPanel>

           <!-- debut du listview-->
         <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
           <telerik:RadListView ID="RLV_AGENCE" runat="server" ItemPlaceholderID="AgenceHolder" DataSourceID="WbAg"
               OnItemDataBound="RLV_AGENCE_ItemDataBound" AllowPaging="true" DataKeyNames="ag_id">
               <LayoutTemplate>
                   <fieldset style="width:635px;" id="RLV_AGENCE">
                       <legend></legend>
                       <asp:Panel ID="AgenceHolder" runat="server" />
                           <table cellpadding="0" cellspacing="0" width="100%">
               <tr>
                   <td>
                           <telerik:RadDataPager ID="RadDataPager1" PagedControlID="RLV_AGENCE" runat="server" CssClass="RadDataPager" PageSize="5">
                               <Fields>
                                   <telerik:RadDataPagerPageSizeField PageSizeText="Agences par page" PageSizes="10,20,30"/>
                                   <telerik:RadDataPagerButtonField FieldType="FirstPrev" FirstButtonText="First" PrevButtonText="Prev" />
                                   <telerik:RadDataPagerButtonField FieldType="Numeric" PageButtonCount="5"></telerik:RadDataPagerButtonField>
                                   <telerik:RadDataPagerButtonField FieldType="NextLast" NextButtonText="Next" LastButtonText="Last" />
                                   <telerik:RadDataPagerTemplatePageField>
                                           <PagerTemplate></PagerTemplate>
                                   </telerik:RadDataPagerTemplatePageField>
                               </Fields>
                           </telerik:RadDataPager>
                           <br />

                        <telerik:RadDataPager ID="RadDataPager2" PagedControlID="RLV_AGENCE" runat="server" CssClass="RadDataPager" PageSize="5">
                               <Fields>
                                   <telerik:RadDataPagerPageSizeField PageSizeText="Agences par page" PageSizes="10,20,30"/>
                                   <telerik:RadDataPagerButtonField FieldType="FirstPrev" FirstButtonText="First" PrevButtonText="Prev" />
                                   <telerik:RadDataPagerButtonField FieldType="Numeric" PageButtonCount="5"></telerik:RadDataPagerButtonField>
                                   <telerik:RadDataPagerButtonField FieldType="NextLast" NextButtonText="Next" LastButtonText="Last" />
                                   <telerik:RadDataPagerTemplatePageField>
                                           <PagerTemplate></PagerTemplate>
                                   </telerik:RadDataPagerTemplatePageField>
                               </Fields>
                           </telerik:RadDataPager>
                       <br />
                        </td>
               </tr>
           </table>

                   </fieldset>
               </LayoutTemplate>

               <ItemTemplate>
                   <div class="bAgentContact agences"> <!--bAgentContact1 -->
                       <h2><asp:Label ID="LBL_ENSEIGNE" runat="server" ></asp:Label></h2>
                       <p class="marL17 marT10"><strong><asp:Label ID="LBL_CODEAGENCE" runat="server" ></asp:Label></strong></p>
                       <p class="infosAgent"><asp:Label ID="LBL_ADRESSE" runat="server" ></asp:Label><br/>
                           <asp:Label ID="LBL_TEL" runat="server" Font-Size="12"></asp:Label><br/>
                           <asp:HyperLink id="HPL_ETRE_CONTACT" runat="server" class="iconEtreContact" NavigateUrl="#">Nous contacter par email</asp:HyperLink>
                       </p>
                       <div><asp:ImageButton alt="Photo" CssClass="pAgenceBien"  id="IMG_AGENCE" runat="server" OnClick="BTN_DETAIL_CLICK"></asp:ImageButton></div>
                       <div class="clear"></div>
                   </div><!--Fin bAgentContact -->
               </ItemTemplate>
           </telerik:RadListView>
             </telerik:RadAjaxPanel>

If a person , get a success , with radDatapager in Radlistview with ajax, please help me !

[Konstantin Dikov]

Hi Olivier,

I have tested the provided code snippet and everything is working as expected on my side.

Please try the attached sample page and see how it works on your end. Please note that even though the RadListView is ajaxified, when the RadSocialShare loads, in the browser it will seems like a postback occurs, but to show you that an AJAX request is made instead, I have added a simple Label at the beginning of the page. 

Since the markup is not enough to reproduce the described issue, I would assume that the root of the problem is somewhere in the code-behind, so if you continue to experience difficulties after examine the attached page, please provide the code-behind or, preferably, open a regular support ticket with a sample, runnable project, so we could test it locally.

Additionally, please elaborate about the current RadControls version you are using.

 

Regards,
Konstantin Dikov
Telerik

[Olivier]

Hello

I find my error, cause ScriptReference for core.js, jQuery_Old, JqueryInclude. i remove this and its ok.

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableScriptGlobalization="true">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery_old.js"></asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude_old.js"></asp:ScriptReference>
            </Scripts>
        </telerik:RadScriptManager>

Do you Know the right syntax in RadScriptManager ? if i remove the 3 lines it's ok ? for jquery i use already this, but for the telerik core,
i don't if need this.

thanks
Olivier,

[Konstantin Dikov]

Hi Olivier,

I am glad to see that you were able to locate the error and resolve the issue. 

About the right syntax for the ScriptReferences within the RadScriptManager you could use the following:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>
    </Scripts>
</telerik:RadScriptManager>

More information is available in this help article.

 

Regards,
Konstantin Dikov
Telerik