This question is locked. New answers and comments are not allowed.
Hi,
I've spent most of the morning trying to integrate a simple jQuery drop down menu that I've built with an existing Telerik grid within a web app, but with limited success. The control itself works fine in a stand-alone situation in a blank basic HTML file, just not in a Telerik grid.
I am using jQuery to hide all but the first menu item of the drop down menu, and then basically adding a class to the parent to manipulate the control using CSS. Here is my code for the 3 files which make up the drop down menu control itself (which 100% works) :
index.html
AnchorDropDown.js
Content.css
Those 3 files should give you 3 instances of the drop down menu which open when the down arrow is clicked, close when the up arrow of an active menu is clicked, and the open menu should be shut when another menu is open.
However, when I introduce it to the following Telerik grid it both parts of the 'if else' statement are executed, showing and hiding the menu for each click.
This is essentially the part of my grid in question:
Does anybody have an idea why my jQuery isn't executing as it should when combined with the grid? Thanks.
I've spent most of the morning trying to integrate a simple jQuery drop down menu that I've built with an existing Telerik grid within a web app, but with limited success. The control itself works fine in a stand-alone situation in a blank basic HTML file, just not in a Telerik grid.
I am using jQuery to hide all but the first menu item of the drop down menu, and then basically adding a class to the parent to manipulate the control using CSS. Here is my code for the 3 files which make up the drop down menu control itself (which 100% works) :
index.html
<!DOCTYPE html><html lang="en"><head> <title>Form</title> <meta charset="utf-8"> <link rel="stylesheet" href="Content.css" type="text/css" media="screen" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="AnchorDropDown.js" type="text/javascript"></script></head><body><div class="grid"><table align="center"><tbody><tr><td> <div class="linkDropDown"> <a href="/AppraisalForm4/ProposedPDPItemEdit?pdpId=795c8d62-4b3c-e111-a28a-001143ebaf2f&userAppraisalId=8c9b0217-8a2c-e111-a28a-001143ebaf2f">Edit</a> <div class="arrow-surround"> <div class="arrow"></div> </div> <div class="options"> <a href="/AppraisalForm4/ProposedPDPItemEdit?pdpId=795c8d62-4b3c-e111-a28a-001143ebaf2f&userAppraisalId=8c9b0217-8a2c-e111-a28a-001143ebaf2f">View</a> <a href="/AppraisalForm4/ProposedPDPItemRemove?pdpId=795c8d62-4b3c-e111-a28a-001143ebaf2f&userAppraisalId=8c9b0217-8a2c-e111-a28a-001143ebaf2f">Remove</a> </div> </div></td></tr><tr><td> <div class="linkDropDown"> <a href="/AppraisalForm4/ProposedPDPItemEdit?pdpId=795c8d62-4b3c-e111-a28a-001143ebaf2f&userAppraisalId=8c9b0217-8a2c-e111-a28a-001143ebaf2f">Edit</a> <div class="arrow-surround"> <div class="arrow"></div> </div> <div class="options"> <a href="/AppraisalForm4/ProposedPDPItemEdit?pdpId=795c8d62-4b3c-e111-a28a-001143ebaf2f&userAppraisalId=8c9b0217-8a2c-e111-a28a-001143ebaf2f">View</a> <a href="/AppraisalForm4/ProposedPDPItemRemove?pdpId=795c8d62-4b3c-e111-a28a-001143ebaf2f&userAppraisalId=8c9b0217-8a2c-e111-a28a-001143ebaf2f">Remove</a> </div> </div></td></tr><tr><td> <div class="linkDropDown"> <a href="/AppraisalForm4/ProposedPDPItemEdit?pdpId=795c8d62-4b3c-e111-a28a-001143ebaf2f&userAppraisalId=8c9b0217-8a2c-e111-a28a-001143ebaf2f">Edit</a> <div class="arrow-surround"> <div class="arrow"></div> </div> <div class="options"> <a href="/AppraisalForm4/ProposedPDPItemEdit?pdpId=795c8d62-4b3c-e111-a28a-001143ebaf2f&userAppraisalId=8c9b0217-8a2c-e111-a28a-001143ebaf2f">View</a> <a href="/AppraisalForm4/ProposedPDPItemRemove?pdpId=795c8d62-4b3c-e111-a28a-001143ebaf2f&userAppraisalId=8c9b0217-8a2c-e111-a28a-001143ebaf2f">Remove</a> </div> </div></td></tr></tbody></table></div></body></html>AnchorDropDown.js
$(document).ready(function () { $('html').addClass("js"); $('div.linkDropDown').find('a:not(:first)').hide(); $('div.linkDropDown div.arrow-surround').click(function () { if ($(this).parent().is('.active')) { $(this).parent().removeClass("active"); } else { $(this).parent().addClass("active").parents('tr').siblings().find('div.linkDropDown').removeClass("active"); } });});Content.css
.linkDropDown{ float: left; width: 105px; padding-left: 3px; border: 1px solid #5091cd; background-color: #f1f5fb; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px;}.linkDropDown a{ display: block; width: 70px; float: left; margin-top: 2px;}.linkDropDown.active a{ display:block !important;}.arrow-surround{ width: 26px; height: 21px; float: right; background-color: #5091cd; cursor: pointer;}.arrow{ width: 0; height: 0; float: right; margin: 8px 7px 0 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #fff; border-bottom: 0; cursor: pointer;}div.linkDropDown.active .arrow{ border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #fff; border-top: 0;}div.linkDropDown.active .arrow-surround{ border-radius: 0 0 0 4px; -moz-border-radius: 0 0 0 4px; -webkit-border-radius: 0 0 0 4px; -o-border-radius: 0 0 0 4px;}div.linkDropDown.active{ position: relative; border-bottom: 0; border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; -o-border-radius: 4px 4px 0 0;}div.linkDropDown.active .options{ position: absolute; top: 21px; left: 0; width: 105px; margin-left: -1px; padding-left: 3px; padding-bottom: 4px; border-left: 1px solid #5091cd; border-bottom: 1px solid #5091cd; border-right: 1px solid #5091cd; background-color: #f1f5fb; border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; -o-border-radius: 0 0 4px 4px; /*box-shadow: 1px 3px 2px #bfbfbf; -moz-box-shadow: 1px 3px 2px #bfbfbf; -webkit-box-shadow: 1px 3px 2px #bfbfbf;*/ z-index: 100;}div.linkDropDown.active a{ margin-bottom: 3px;}/**** Links *****/a{font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 0.8em;color: #5091CD;}a:hover{color: #fbd913;}Those 3 files should give you 3 instances of the drop down menu which open when the down arrow is clicked, close when the up arrow of an active menu is clicked, and the open menu should be shut when another menu is open.
However, when I introduce it to the following Telerik grid it both parts of the 'if else' statement are executed, showing and hiding the menu for each click.
This is essentially the part of my grid in question:
<div class="grid"> @(Html.Telerik().Grid(Model.Data) .Columns(columns => { columns.Template(@<text><div class="linkDropDown">@Html.ActionLink(@item.IsReadOnly ? "View" : "Edit", MVC.AppraisalForm4.ProposedPDPItemEdit(@item.pdpProposedID, appraisalId))<div class="arrow-surround"><div class="arrow"></div></div><div class="options">@Html.ActionLink(@item.IsReadOnly ? "View" : "View", MVC.AppraisalForm4.ProposedPDPItemEdit(@item.pdpProposedID, appraisalId)) @Html.ActionLink("Remove", "ProposedPDPItemRemove", new { pdpId = @item.pdpProposedID, userAppraisalId = appraisalId })</div></div></text>).Width(120).HtmlAttributes(new { style = "text-align:left;" }); } )</div>Does anybody have an idea why my jQuery isn't executing as it should when combined with the grid? Thanks.
1 Answer, 1 is accepted
0
Robert
Top achievements
Rank 1
Rank 1
answered on 20 Mar 2012, 05:10 PM
Apologies for wasting anybody's time. The web app I was working on was including my .js file twice, hence the strange jQuery behaviour. Issue solved now.