change pagesize cause different html rendered

7 posts, 0 answers
  1. TIGER
    TIGER avatar
    24 posts
    Member since:
    Mar 2008

    Posted 05 Oct 2011 Link to this post

    Hi,
      I'm implementing a listview in which a chage page size combobox is used inside the layouttemplate. a ajaxmanager is added so that the trigger element is the listview and the updated element is also the listview and another control to prevent page flicker. I have some jquery code defined in the header section. when the page is first loaded, the jquery work fine, but when I change the pagesize by the combobox, the jquery stop working. Strange enough, when I change the jquery to javascript event, the event handler works in all cases. I use firebug from firefox to debug and find out that when change pagesize triggers a postback, the html is rendered back to the browser with a different version; the header part is completely missing, so is the jquery. If I define javascript event handler, it is missing too, but still functions, except I cannot step into the javascript source. I checked and find out this is caused by the ajaxmanager because when I checked off the listview from the ajax trigger control, the complete html is rendered back and the jquery works as expected. Is there any way to fix this but still retain ajax effect ? I wonder if moving the change pagesize combobox out of the listview and set it to the ajax update trigger would make it work. In that case how to get the pager control inside the layouttemplate equivalent to previouse code sample: combo.NamingContainer as RadDataPagerFieldItem).Owner.PageSize.
      I would appreciate it very much if you could explain the details and give some advice.
    thank you.
  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 11 Oct 2011 Link to this post

    Hello Tiger,

    Please refer to the forum thread below which elaborates on similar subject and let me know if it helps:
    http://www.telerik.com/community/forums/aspnet-ajax/listview/paging-and-javascript-problem.aspx

    Kind regards,
    Pavlina
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. TIGER
    TIGER avatar
    24 posts
    Member since:
    Mar 2008

    Posted 11 Oct 2011 Link to this post

    Hi, Pavlina;
       Thank you for your advice. It worked for my design now. I think it is all about re-registering script. The topic you recommanded used server side register script for client side function. In my case, I have jquery event like the following:

             $(document).ready(function () {
                $(".div_item").mouseover(function () {
                    $(this).css("border-style", "solid");
                   
                })
            })
            $(document).ready(function () {
                $(".div_item").mouseout(function () {
                    $(this).css("border-style", "none");
                   
                })
            })
    I changed the above using jquery event binding to :
            $(document).ready(
                 function () {
                     $(".div_item").bind("mouseover", function () {
                         $(this).css("border-style", "solid");
                     });
                     $(".div_item").bind("mouseout", function () {
                         $(this).css("border-style", "none");
                     });
                 }
             );
    Now it worked perfectly.
    Best regards.
    Thank you


  5. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 11 Oct 2011 Link to this post

    Hello Tiger,

    I am glad you managed to get things working. Good luck with your project!

    Kind regards,
    Pavlina
    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
  6. TIGER
    TIGER avatar
    24 posts
    Member since:
    Mar 2008

    Posted 12 Oct 2011 Link to this post

    Hi, Pavlina;
      Sorry that I did the previous test completely wrong. I declared the onmouseover and onmouseout javascript event on the div_item element that made it appeared to work. But when I strip out the javascript event and use only the jquery event bound to the div_item element.: when the listview is first loaded, moving mouse over div_item cause response from the jquery event handler; when change page size using change pagesize combobox in the layout template, moving mouse over div_item, nothing happens. It seems just like the jquery event handler has been unbound from the element. Since the listview is inside a ajaxpanel, I tried to remove the ajaxpanel, and it worked again.I'm wondering if ajax has done something to the jquery, since the javascript event was triggered in any event. Is there any thing that we should be aware of when using jquery with ajax and radcontrols? thank you. attach the script, hope it helps
    Best regard.
    <style type="text/css">
        .div_item
        {
           height:157px;
           width:268px;
           font-family: 宋体, Arial, Helvetica, sans-serif;
           font-size: small;
        }
        .itemwrap
        {
           float:left;
           height:160px;
           width:270px;
        }   
        .div_layout
        {
            width:836px;
        }
        .div_pager
        {
            width:800px;
        }
    </style>
     
    <telerik:RadCodeBlock ID="RadCodeBlock" runat="server">
        <script type="text/javascript">
     
            var curItem = null;
            function mouseDown(event) {
     
                curItem = event.currentTarget;
                var pos = curItem.id.lastIndexOf("_");
                setTooltipTargetID();
                selectItem(curItem.id.substring(pos + 1));
     
            }
            function selectItem(idx) {
                var listView = $find("<%= lvItems.ClientID %>");
                if (listView != null)
                    listView.selectItem(idx);
            }
            var currentLoadingPanel = null;
            var currentUpdatedControl = null;
            function RequestStart(sender, args) {
                currentLoadingPanel = $find("<%= ilvRadAjaxLoadingPanel.ClientID %>");
                if (currentLoadingPanel != null && curItem != null) {
                    currentUpdatedControl = curItem.id;
                    currentLoadingPanel.show(currentUpdatedControl);
                }
            }
            function ResponseEnd() {
                //hide the loading panel and clean up the global variables
                if (currentLoadingPanel != null)
                    currentLoadingPanel.hide(currentUpdatedControl);
                currentUpdatedControl = null;
                currentLoadingPanel = null;
            }
            function setTooltipTargetID() {
                var hfld = document.getElementById("HiddenField");
                if (hfld != null)
                    hfld.value = curItem.id;
            }
            $(document).ready(
                 function () {
                     $(".div_item").bind("mouseover", function () {
                         $(this).css("border-style", "solid");
                     });
                     $(".div_item").bind("mouseout", function () {
                         $(this).css("border-style", "none");
                     });
                 }
             );
     
     
        </script>
    </telerik:RadCodeBlock>
    </head>
    <body>
        <form id="ilvform" runat="server">
     
     
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" >
       <Scripts>
           <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" />
       </Scripts>
    </telerik:RadScriptManager>
     
        <telerik:RadSkinManager ID="ilvRadSkinManager" runat="server" Skin="Vista"></telerik:RadSkinManager>
        <telerik:RadFormDecorator ID="RadFormDecorator" runat="server" />
        <telerik:RadAjaxLoadingPanel ID="ilvRadAjaxLoadingPanel" runat="server"
            Transparency="50" />
            
        <telerik:RadAjaxManager ID="ilvRadAjaxManager" runat="server"
            DefaultLoadingPanelID="ilvRadAjaxLoadingPanel">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="lvItems">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="ilvRadToolTip"
                                LoadingPanelID="ilvRadAjaxLoadingPanel" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
                <ClientEvents OnRequestStart="RequestStart" OnResponseEnd="ResponseEnd" />
            </telerik:RadAjaxManager>
                <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" height="200px"
                    width="300px">
            <telerik:RadListView ID="lvItems" runat="server"
                ItemPlaceholderID="ProductItemContainer" AllowPaging="True"
                DataSourceID="DataTechAspNetDataSource" PageSize="6"
                onselectedindexchanged="lvItems_SelectedIndexChanged"
                onitemcreated="lvItems_ItemCreated"
                DataKeyNames="PLUCODE,PLINE" >
                    <ClientSettings AllowItemsDragDrop="true">
                </ClientSettings>
                <LayoutTemplate>
                    <div class="div_layout">
                        <table cellpadding="0" cellspacing="0">
                            <tr>
                                <td>
                                <div class="div_pager">
                                    <telerik:RadDataPager ID="ilvRadDataPager" runat="server" Culture="zh-CN"
                                        PagedControlID="lvItems" PageSize="6" Skin="Windows7">
                                        <Fields>
                                            <telerik:RadDataPagerButtonField FieldType="FirstPrev" PageButtonCount="6" />
                                            <telerik:RadDataPagerButtonField FieldType="Numeric" NextButtonText="..."
                                             PageButtonCount="8" PrevButtonText="..." />
                                            <telerik:RadDataPagerButtonField FieldType="NextLast" PageButtonCount="6" />
                                            <telerik:RadDataPagerTemplatePageField>
                                            <PagerTemplate>
                                            <div style="float: left">
                                            <b>每页显示
                                             <telerik:RadComboBox runat="server" ID="cmbPageSize" AutoPostBack="true" SelectedValue='<%# Container.Owner.PageSize %>'
                                                  OnSelectedIndexChanged="cmbPageSize_SelectedIndexChanged" Width="60">
                                             <Items>
                                                   <telerik:RadComboBoxItem Text="3" Value="3" />
                                                   <telerik:RadComboBoxItem Text="6" Value="6" />
                                                   <telerik:RadComboBoxItem Text="9" Value="9" />
                                                   <telerik:RadComboBoxItem Text="12" Value="12" />
                                                   <telerik:RadComboBoxItem Text="15" Value="15" />
                                                   <telerik:RadComboBoxItem Text="18" Value="18" />                                              
                                            </Items>
                                            </telerik:RadComboBox>
                                             项 </b>
                                             </div>
                                                  <div style="float: left">
                                                        <b>合共:
                                                           <asp:Label runat="server" ID="TotalItemsLabel" Text="<%# Container.Owner.TotalRowCount %>" />
                                                           
                                                        </b>
                                                 </div>
                                            </PagerTemplate>
                                            </telerik:RadDataPagerTemplatePageField>
                                        </Fields>
                                    </telerik:RadDataPager>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:Panel ID="ProductItemContainer" runat="server" />
                                </td>
                            </tr>
                        </table>
                    </div>
                </LayoutTemplate>
     
                <ItemTemplate>
                <span class="itemwrap">
                  <div id="div_item" class="div_item" 
                        runat="server" onmousedown="mouseDown(event)" >
                        <table cellpadding="2" cellspacing="0" style="width: 263px">
     
                            <tr>
                                <td rowspan="6" style="width:100px; vertical-align: middle;">
                                    <span class="span_picture" >
                                      <img  src='<%#  (string)GetItemPictureUrl((string)Eval("PLUCODE"),(string)Eval(iBOOKSTORE.商品类型字段.商品类型)) %>' alt="<%# Eval("TITLE") %>"  width="100px" style="height: 131px;"  />
                                    </span>
                                </td>
                            </tr>  
                            <tr>
                                <td >
                                    <span class="span_pline" >
                                       <%# Eval("PLINE") %>
                                    </span>
                                </td>
                                <td style="height:20px; text-align: right;">
                                    <span class="span_media">
                                      <%# Eval("MEDIA") %>
                                     </span>
                                </td>
                            </tr>           
     
                            <tr style="height:40px; width:80px">
                                <td colspan=2 style="vertical-align:top;">
                                   <span class="span_title" style="height:40px; overflow:hidden;">
                                      <%# GetTitle((System.Data.DataRowView)Container.DataItem) %>
                                   </span>
                                 </td>
                            </tr>
                            <tr>
                                <td colspan="2" style="height:20px;">
                                    <span class="span_author" >
                                       <%# Eval("AUTHOR")%>
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <td >
                                    <span class="span_pubname" >
                                       <%# Eval("PUBNAME") %>
                                    </span>
                                </td>
                                <td style="height:20px;text-align: right;">
                                    <span class="span_pubdate">
                                    <%# GetPubDate((System.Data.DataRowView)Container.DataItem) %>
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <td >
                                    <span class="span_price" >
                                       <%# GetOrgPrice((System.Data.DataRowView)Container.DataItem, (string)Eval("PLINE")) %>
                                    </span>
                                </td>
                                <td style="height:20px; text-align: right;">
                                    <span class="span_nprice" >
                                       <%# GetNewPrice((System.Data.DataRowView)Container.DataItem) %>
                                    </span>
                                </td>
                            </tr>
     
                        </table>
                    </div>
                    </span>
                </ItemTemplate>
     
            </telerik:RadListView>
     
            </telerik:RadAjaxPanel>
          <div>
                <telerik:RadToolTip ID="ilvRadToolTip" runat="server" Animation="FlyIn"
                    EnableShadow="True" HideEvent="ManualClose"
                    ManualCloseButtonText="关闭" ShowEvent="FromCode" Width="268px"
                    IsClientID="True" OffsetY="0" RelativeTo="Element" >
     
                    <asp:PlaceHolder ID="PlaceHolder" runat="server" />
                   
                </telerik:RadToolTip>
      
     
      
                <asp:HiddenField ID="HiddenField" runat="server" />
     
     
     
          </div>


  7. TIGER
    TIGER avatar
    24 posts
    Member since:
    Mar 2008

    Posted 14 Oct 2011 Link to this post

    Hi, Pavlina;
       I did some more work on the matter and finally got it done. I have to re-bind the jquery every time the listview is recreated like this:        function clientListViewCreated(sender, eventArgs) {
                $(".itemwrap").bind("mouseover", function () {
                    $(this).css("border-style", "solid");
                });
                $(".itemwrap").bind("mouseout", function () {
                    $(this).css("border-style", "none");
                });          
            }
    Now it works as expected, problem solved.
    Best Wishes


  8. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 17 Oct 2011 Link to this post

    Hello Tiger,

    Please do not hesitate to contact is if other questions or problems arise.

    Greetings,
    Pavlina
    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017