Delete button in list view Webpart in sharepoint 2010

Delete button in list view Webpart in sharepoint 2010

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



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.
//Or You can try this

Just Break the webpart in XSLT
ADD the ID field into the webpart,Select the ID(Heading like End time,Comment in my picture) Div and delete it then just select any id like 1 ,2  etc.
Example :

See the image and replace the selected text with this below text , then save.



<xsl:variable name="LstId" select="$thisNode/@*[name()=current()/@Name]"/>
    <a href="#" onclick="javascript:DeleteItem('{$LstId}');"><img alt='delete' src='/_layouts/images/delitem.gif' style='border:0px;' /></a>


after this check one thing the "ddwrt:ghost" property ( should be blank )  like  ddwrt:ghost="" otherwise it will not  be updated .


<xsl:template name="FieldRef_body.ID" ddwrt:dvt_mode="body" match="FieldRef[@Name='ID']" mode="body" ddwrt:ghost="">
    <xsl:param name="thisNode" select="."/>

<xsl:variable name="LstId" select="$thisNode/@*[name()=current()/@Name]"/>

     <a href="#" onclick="javascript:DeleteItem('{$LstId}');"><img alt='delete' src='/_layouts/images/delitem.gif' style='border:0px;' /></a>

</xsl:template>

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.

Please follow the full  blog :Here