Hide ECB(Edit Control Block) Send to Sub Menu Option using Jquery on List Item Status:
Hi all, One Interesting thing I came across in SharePoint
2010, related to hiding ECB sub menu option within send to. I had gone through the internet to search for
hiding the ECB menu but on most of the site it was given how we can ADD ECB
menu, but nowhere I found how we can hide or remove it.
Going through other sites I came across http://extreme-sharepoint.com/2011/10/29/hide-menu-ecb/
Which helped me to achieve what I was looking for. Below is the snippet and method which I used
to Hide the sub menu within Send To.
1.
The thing which I was looking for was hiding the
sub menu with Send To which is named Archive as given in Image below:
2.
Also, before proceeding to the next step let me
show you how I fetched the item id of the current item which was selected:
Item id to be fetched for the highlighted
item using below snippet.
//”iid attribute contains the item id eg: “1,121,2””
so the middle number “121” is the item ID.
var itemId =
$('.ms-MenuUIPopupBody').parent().parent().attr("iid");
var
n=itemId.split(",");
alert(n[1]); // this will alert the middle numeric value
between three numbers
3.
Now lets move to Below code which was used to
hide the sub menu on basis of Status column of List Item, if condition is not
met the “Archive” should remain as it is.
Before procedding to below code add the SPServices
and jquery js files and code should be placed in Content place holder named “PlaceHolderPageDescription”
or in place where already the jquery is written. I have placed this code on Allitems.apsx
of the document library as I wanted this code on this library only. If you
require it on entire application you can place below code in Master page file.
<asp:Content
ContentPlaceHolderId="PlaceHolderPageDescription" runat="server">
<script
type="text/javascript"
src="../../SiteAssets/Scripts/jquery-1.6.2.min.js"></script>
<script
type="text/javascript"
src="../../SiteAssets/Scripts/jquery.SPServices-0.6.2.min.js"></script>
<script
type="text/javascript">
$(document).ready(function()
{
// Function takes the
item id and fetches the item from the list.
function
hideArchive(id)
{
var url=$().SPServices.SPGetCurrentSite();
var query
="<Query><Where><Eq><FieldRef Name='ID'
/><Value
Type='Counter'>"+id+"</Value></Eq></Where></Query>";
var viewFields =
"<ViewFields><FieldRef Name='c8db30a3_x002d_bc36_x002d_4d74_x002d_9e1e_x002d_67dda1e75d7a'
/><FieldRef
Name='_x007b_a15c94e5_x002d_b76e_x002d_4885_x002d_95bb_x002d_1363389c2b9a_x007d_'
/></ViewFields>";
$().SPServices(
{
operation: "GetListItems",
async: false,
listName: "Cases",
CAMLViewFields: viewFields,
CAMLQuery: query,
webURL: url,
completefunc: function (xData, Status)
{
$(xData.responseXML).find(
"[nodeName='z:row']" ).each( function(){
var i = 0;
var attrs = $(this)[0].attributes;
//debugger;
for(i = 0; i < attrs.length; i++)
{
if(attrs[i].name=="ows__x007b_a15c94e5_x002d_b76e_x002d_4885_x002d_95bb_x002d_1363389c2b9a_x007d_")
{
// Checks if the item is completed if it is
completed allow to move the document else hide the archive
if(attrs[i].value
!= "إكمال")
{
// hides
the archive option from user if case is not completed
$("span:contains('Archive')").parent().hide();
}
else
{
//Shows the archive option from user if case is completed
$("span:contains('Archive')").parent().show();
}
}
}
});
}
});
}
//The below jquery snippet hides the “archive” option
from ECB menu item at mouseover on the div(class=ms-MenuUIPopupBody)
that is created on fly everytime a ECB menu is constructed.
$('.ms-MenuUIPopupBody').live('mouseover',
function() {
// below
code returns item id text
var
itemId = $('.ms-MenuUIPopupBody').parent().parent().attr("iid");
//
creates an array of the item id text
var
n=itemId.split(",");
//
method that hides the archive option on condition of list item status for the
given id.
hideArchive(n[1]);
});
</script>
</asp:Content>
So from
above snippet the important piece of code is:
$('.ms-MenuUIPopupBody').live('mouseover',
function() {
$("span:contains('Archive')").parent().hide();
which hides the archive
});
4.
Thus using above snippet we can achieve the
hiding of ECB and its sub menu’s as shown in below image:
