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

cannot use jquery with radcontrols

3 Answers 168 Views

ComboBox

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

TIGER asked on 08 Oct 2011, 05:43 PM

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>

3 Answers, 1 is accepted

answered on 09 Oct 2011, 05:36 AM

Hi,
After some more plowing, I find out there is a "highlightTemplateItem" property of the combobox control which enabled change of background color on mouse over row that satisfied my requirement. But I get to know more about the jquery problem. The jquery problem is definitely associate with itemtemplate that envolves dynamic generation of items. I make an example out of the LoadOnDemand Example in the tutorial RadcontrolAJAXcourseware, and a add a div element beside the combobox like this:<div class="div_row" style="height: 76px; width: 100px; background-color:Lime" >. Notice the class name is the same as the <tr> that defines a row in the itemtemplate like:
<tr class="div_row">. My jquery works when I move mouse over the div; the border of div changes. But when I pull down the combo dropdown and move mouse over a row, nothing happened. I move mouse over the div element, the jquery still works. I first suspect that the class name of the row items changed during the generation process, but when I use firebug to look into it, all rows have the correct classname "div_row". It seems that only the items in itemtemplate which are generated dynamically are affected. The same problem happen to Listview too. When change pagesize cause a re-generation of the items, the jquery gets knocked out. What are the reasons? could some give any explaination please.
Thank you very much. Attach the script I used

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="iBOOKSTORE.WebForm1" %>

<%@ 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 id="Head1" runat="server">

<title>Templates</title>

<style type="text/css">

.div_sqr

{

height: 76px;

width: 199px;

background-color:Lime;

}

</style>

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function IndexChanged(sender, args) {

// get a reference to the footer DOM element

var footer = sender._getFooterElement();

// set its innerHTML to the selected item text

footer.innerHTML = args.get_item().get_text();

}

function InitComboFooter(sender) {

// get a reference to the footer DOM element

var footer = sender._getFooterElement();

// set its innerHTML to the initial text of the combo box

footer.innerHTML = sender.get_text();

}

var backcolor;

$(document).ready(function () {

$(".div_row").mouseover(function () {

$(this).css("border-style", "solid");

alert("asdfasdf");

})

$(document).ready(function () {

$(".div_row").mouseout(function () {

$(this).css("border-style", "none");

})

</script>

</telerik:RadCodeBlock>

</head>

<body >

<form id="form1" runat="server" >

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<telerik:RadComboBox ID="RadComboBox1" Runat="server"

DropDownWidth="350px" Width="250px" Skin="Outlook"

HighlightTemplatedItems="false"

onclientselectedindexchanged="IndexChanged"

onclientload="InitComboFooter" EnableLoadOnDemand="True"

onitemsrequested="RadComboBox1_ItemsRequested"

EnableVirtualScrolling="True" onitemdatabound="RadComboBox1_ItemDataBound" >

<HeaderTemplate>

<table style="width: 315px; text-align: left">

<tr>

<td style="width: 95px;">Last Name</td>

<td style="width: 95px;">First Name</td>

<td style="width: 125px;">Title</td>

</tr>

</table>

</HeaderTemplate>

<FooterTemplate>

</FooterTemplate>

<ItemTemplate>

<table style="width: 315px; text-align: left">

<tr class="div_row">

<td style="width: 95px;">

<%# DataBinder.Eval(Container.DataItem, "LastName") %>

</td>

<td style="width: 95px;">

<%# DataBinder.Eval(Container.DataItem, "FirstName") %>

</td>

<td style="width: 125px;">

<%# DataBinder.Eval(Container.DataItem, "Title") %>

</td>

</tr>

</table>

</ItemTemplate>

</telerik:RadComboBox>

<div class="div_row" style="height: 76px; width: 100px; background-color:Lime" >

</div>

</form>

</body>

</html>

answered on 12 Oct 2011, 01:00 PM

example.zip

Hello Tiger,

I've prepared a sample page showing how to achieve the desired functionality.

Regarding the usage of jQuery along with our controls please refer to the following help articles here and here.

Best wishes,
Dimitar Terziev
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