Enable or Disable Delete Icon in Ribbon on SharePoint List Item Selection

This SharePoint tutorial, we will discuss, how to enable or disable delete icon from the ribbon on SharePoint list item selection based on the logged-in user using CSOM or REST API services using jQuery.

The scenario is to disable the delete icon in the ribbon on the List item selection. But when any user logs into the SharePoint site the items created by him should have the delete option on them when only one selection is there.

This can be performed using custom Permission Level with Delete permission removed and item-level or folder-level permissions, but this can cause you a lot of problem managing the broken inheritance of permissions. Or you could create a SharePoint event handler to prevent the deletion of that item but the best way to do is using jQuery/ CSOM/ REST.

I have offered a code demo about how to disable the delete icon in the ribbon on List Item Selection.

Before:

sharepoint 2013 enable or disable deleite icon from sharepoint list ribbon

Enable or Disable Delete Icon in Ribbon on SharePoint List Item Selection

Here are the steps to enable or disable Delete icon from the ribbon on SharePoint list item selection in SharePoint 2013/2016.

Step 1: Navigate to your SharePoint 2013 site.

Step 2: From this page select the Site Actions | Edit Page.

Edit the page, go to the “Insert” tab in the Ribbon and click the “Web Part” option. In the “Web Parts” picker area, go to the “Media and Content” category, select the Script Editor web part and press the “Add button”.

Step 3: Once the Web Part is inserted into the page, you will see an “EDIT SNIPPET” link; click it. You can insert the HTML and/or JavaScript as in the following:

// JavaScript source code
< script type = "text/javascript"
src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" > < /script> < script type = "text/javascript"
language = "javascript" >

$(document).ready(function()
{
$(document.getElementById('Ribbon.ListItem.Manage-LargeMedium-1-2')).addClass('ms-cui-row ms-cui-disabled');
ExecuteOrDelayUntilScriptLoaded(init_disableRibbomButton, "sp.ribbon.js");
});

function init_disableRibbomButton()
{
setInterval(function()
{
disableRibbomButton();

}, 10);
}

//Using CSOM GetSelectedItems
function disableRibbomButton()
{
var cc = new SP.ClientContext.get_current();
var web = cc.get_web();
var listId = SP.ListOperation.Selection.getSelectedList();
var selectedItems = SP.ListOperation.Selection.getSelectedItems();
if (selectedItems.length == 1)
{
var flag = CheckCreatedBy(listId, selectedItems[0].id, _spPageContextInfo.userId);
if (flag)
$(document.getElementById('Ribbon.ListItem.Manage-LargeMedium-1-2')).removeClass('ms-cui-row ms-cui-disabled');
} else
{
$(document.getElementById('Ribbon.ListItem.Manage-LargeMedium-1-2')).addClass('ms-cui-row ms-cui-disabled');
}

}

//Using REST API Apply Filter Created Item by logged in user
function CheckCreatedBy(ListId, ItemID, AuthorID)
{
var result = false;
var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyid('" + ListId + "')/items?$filter=((ID eq '" + ItemID + "') and (Author/ID eq '" + AuthorID + "'))";

getListItems(url, function(data)
{
var items = data.d.results;
if (items.length > 0)
{
result = true
} else
{
result = false;
}
}, function(data)
{
result = false;
});
return result;
}

function getListItems(siteurl, success, failure)
{
$.ajax
({
async: false,
url: siteurl,
method: "GET",
headers:
{
"Accept": "application/json; odata=verbose"
},
success: function(data)
{
success(data);
},
error: function(data)
{
failure(data);
}
});
} < /script>

Without any list item Selection to disable delete icon in the ribbon on List.

Disable Delete Icon in Ribbon on SharePoint List Item Selection

With Multi list item Selection to disable delete icon in the ribbon on List.

Disable Delete Icon in Ribbon on SharePoint 2013 List Item Selection

With Single list item Selection (Logged in) to unable delete icon in the ribbon on List.

Disable Delete Icon in Ribbon on SharePoint 2016 List Item Selection

You may like following SharePoint customization tutorials:

I have tried to disable/enable the delete icon in the ribbon on List Item Selection, which would provide you greater flexibility in user interaction on the application. I have achieved this using CSOM/REST API and jQuery in SharePoint 2013. I hope this article is helpful to you and I expect you to revert back to it in case of any queries.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

>