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

change pagesize cause different html rendered

6 Answers 133 Views

ListView

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

TIGER asked on 06 Oct 2011, 04:51 AM

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.

6 Answers, 1 is accepted

answered on 11 Oct 2011, 01:45 PM

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

answered on 12 Oct 2011, 05:43 AM

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>

answered on 15 Oct 2011, 03:08 AM

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

change pagesize cause different html rendered

6 Answers, 1 is accepted