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
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
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
I am glad you managed to get things working. Good luck with your project!
Kind regards,
Pavlina
the Telerik team
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
>
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
Please do not hesitate to contact is if other questions or problems arise.
Greetings,
Pavlina
the Telerik team