Hi,
I am implementing a combobox in which I need to make each row change backcolor when mouse is over the row. I use a table inside item template to define item row with <tr class="div_row"> . I then write two jquery in the header section with class selector and event $(.div_row).mouseover and $(.div_row).mouseout. I get no response from the jquery. Using firebug to trace, I find out the script rendered back to the browser changed dramatically, the javascript code functions are completely missing. I had same problem with data pager control but that one was caused by the ajaxmanager. This time I don't have any ajax updates and still get the same error. Is there anything I have to take care when using jquery and radcontrols ? Could you please kindly explain and advice how to enable jquery in telerik ajax environment. I would appreciate it very much since we are going to use a lot of jquery in our development.
Thank you. Attach the script I used.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SearchBox.aspx.cs" Inherits="iBOOKSTORE.SearchBox" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
></
title
>
<
script
src
=
"Scripts/jquery-1.4.1.js"
type
=
"text/javascript"
></
script
>
<
telerik:RadCodeBlock
ID
=
"RadCodeBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
function clientItemsRequesting(sender, e)
{
// var context = e.get_context();
// using jQuery to get the checked item and pass it to the server
// context["QString"] = sender.get_text();
var comboInput = $find("<%= cmbInput.ClientID %>");
var istr = comboInput.get_text();
if (istr.length == 0 || istr.substr(istr.length - 1, 1) == ':' || istr.substr(istr.length - 1, 1) == ':') {
e.set_cancel(true);
comboInput.hideDropDown();
}
}
function clientDropdownOpening(sender, e) {
var istr = sender.get_text();
if (istr.length == 0 || istr.substr(istr.length - 1, 1) == ':' || istr.substr(istr.length - 1, 1) == ':') {
e.set_cancel(true);
}
}
function clientDropdownClosing(sender, e) {
var comboInput = $find("<%= cmbInput.ClientID %>");
var istr = comboInput.get_value();
if (istr.length == 0) {
e.set_cancel(true);
}
}
function indexChanged_handler(sender, e) {
var comboInput = $find("<%= cmbInput.ClientID %>");
var txt = comboInput.get_text();
if (txt.length > 0)
txt += ',';
comboInput.set_text(txt + sender.get_value());
var input = comboInput.get_inputDomElement();
input.focus();
}
var backcolor;
$(document).ready(function () {
$(".div_row").mouseover(function () {
backcolor = $(this).css("backgound-color");
$(this).css("background-color", "yellow");
})
})
$(document).ready(function () {
$(".div_row").mouseout(function () {
$(this).css("background-color", backcolor);
})
})
</
script
>
</
telerik:RadCodeBlock
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
asp:ScriptManager
ID
=
"ScriptManager1"
runat
=
"server"
>
</
asp:ScriptManager
>
<
div
>
<
telerik:RadComboBox
ID
=
"cmbMode"
Runat
=
"server"
Width
=
"66px"
OnClientSelectedIndexChanged
=
"indexChanged_handler"
>
<
Items
>
<
telerik:RadComboBoxItem
runat
=
"server"
Text
=
"录入书名"
ToolTip
=
"录入书名查询条件"
Value
=
"书名:"
/>
<
telerik:RadComboBoxItem
runat
=
"server"
Text
=
"录入作者"
ToolTip
=
"录入作者查询条件"
Value
=
"作者:"
/>
<
telerik:RadComboBoxItem
runat
=
"server"
Text
=
"出版机构"
ToolTip
=
"录入出版社名称查询条件"
Value
=
"出版社:"
/>
<
telerik:RadComboBoxItem
runat
=
"server"
Text
=
"关键词句"
ToolTip
=
"录入关键词查询条件"
Value
=
"关键词:"
/>
<
telerik:RadComboBoxItem
runat
=
"server"
Text
=
"图书分类"
ToolTip
=
"录入图书分类名称查询条件"
Value
=
"类别:"
/>
<
telerik:RadComboBoxItem
runat
=
"server"
Text
=
"读者人群"
ToolTip
=
"录入读者人群查询条件"
Value
=
"读者:"
/>
<
telerik:RadComboBoxItem
runat
=
"server"
Text
=
"丛书系列"
ToolTip
=
"录入丛书系列查询条件"
Value
=
"丛书:"
/>
</
Items
>
</
telerik:RadComboBox
>
<
telerik:RadComboBox
ID
=
"cmbInput"
Runat
=
"server"
AllowCustomText
=
"True"
LoadingMessage
=
"读取数据..."
DataTextField
=
"TITLE"
DataValueField
=
"TITLE"
OnClientDropDownClosing
=
"clientDropdownClosing"
OnClientItemsRequesting
=
"clientItemsRequesting"
OnClientDropDownOpening
=
"clientDropdownOpening"
EnableLoadOnDemand
=
"True"
Skin
=
"Windows7"
DropDownWidth
=
"526px"
Height
=
"400px"
MaxHeight
=
"400px"
AutoPostBack
=
"true"
onitemsrequested
=
"cmbInput_ItemsRequested"
Width
=
"500px"
onselectedindexchanged
=
"cmbInput_SelectedIndexChanged"
>
<
ItemTemplate
>
<
table
width
=
"500"
style
=
"border-style: solid; border-width: thin"
>
<
tr
class
=
"div_row"
>
<
td
style
=
"width: 200px;"
><%# Eval("TITLE") %></
td
>
<
td
style
=
"width: 50px;"
><%# Eval("AUTHOR") %></
td
>
<
td
style
=
"width: 50px;"
><%# Eval("PUBNAME") %></
td
>
<
td
style
=
"width: 60px;"
><%# Eval("CLSNAME") %></
td
>
<
td
style
=
"width: 40px;"
><%# Eval("KEYWDS") %></
td
>
<
td
style
=
"width: 40px;"
><%# Eval("SERIES") %></
td
>
<
td
style
=
"width: 40px;"
><%# Eval("READER") %></
td
>
</
tr
>
</
table
>
</
ItemTemplate
>
<
HeaderTemplate
>
<
table
width
=
"500"
style
=
"border-style: solid; border-width: thin"
>
<
tr
>
<
td
style
=
"width: 200px;"
>书名</
td
>
<
td
style
=
"width: 50px;"
>作者</
td
>
<
td
style
=
"width: 50px;"
>出版社</
td
>
<
td
style
=
"width: 60px;"
>图书分类</
td
>
<
td
style
=
"width: 40px;"
>关键词</
td
>
<
td
style
=
"width: 40px;"
>丛书名</
td
>
<
td
style
=
"width: 40px;"
>读者群</
td
>
</
tr
>
</
table
>
</
HeaderTemplate
>
</
telerik:RadComboBox
>
</
div
>
</
form
>
</
body
>
</
html
>