Delete button in list view

Hi, we all know that list view is the best way to show the data to use without wasting of time.

It gives all the basic required functionality but as always client ask few simple things which SharePoint is not providing by default.

And for that silly thing we have to create custom webpart or custom listview

We already shown you few ways to show how you can change your listview HTML by JQuery and JavaScript like
http://www.sharepointkings.com/2010/04/sharepoint-custom-so-called-kpi.html
http://www.sharepointkings.com/2008/12/highlight-sharepoint-list-rows.html
http://www.sharepointkings.com/2009/04/sharepoint-calculated-column-and-jquery.html
All jquery stuff http://www.sharepointkings.com/search/label/JQuery

Recently we got requirement that client needs delete button link in SharePoint list view
Now edit button is available but delete button is not available in default view.

So finally we are went the same way as we always used: change the Listview HTML in JavaScript

We created a text field “Delete” and put some below text inside that field

<div><a href='#' onclick='javascript:DeleteItem(2);'><img alt='delete' src='/_layouts/images/delitem.gif' style='border:0px;' /></a></div>
where 2 will be listitem ID

Note: calculated column is not supporting ID. So we can use event handler or SPDesigner workflow to fill this field.

Now what we had done is on DeleteItem function we called web service from JavaScript using SPServices jQuery and delete the item and then just reload the thepage.

That’s it
Here is the function which called on page load to change text field to div field.

we have to put this JavaScript on the same page of list view.

$(document).ready(function(){
$(".ms-vb2:contains('<div')").each(function(){
var tempDIV = document.createElement ("div");
tempDIV.style.cursor = "pointer";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);

});
});

function DeleteItem(cID)
{try{
var cnf = confirm("Are you sure you want to send the item(s) to the site Recycle Bin?");
//this is default message that sharepoint gives.
if(cnf)
{
$().SPServices({
operation: 'UpdateListItems',
listName: ‘your list name’,
batchCmd: 'Delete',
ID: cID,
completefunc: function (xData, Status) {
location.reload(true)
}
});
}


}catch(ex){alert(ex);} }</script>

Hope fully you will get the idea how its working.