Getting SharePoint List attachments in the SPGrid or Asp grid

In ascx or aspx file add the below code :

<script type="text/javascript">
  
    var listName = "List Name";
       function deleteListItem(ID) {
        var siteUrl = 'Site URL';
        this.itemId = ID;
        var clientContext = new SP.ClientContext(siteUrl);
        var oList = clientContext.get_web().get_lists().getByTitle('List Name);
        this.oListItem = oList.getItemById(itemId);
        oListItem.deleteObject();
        clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
    }
    function onQuerySucceeded(data) {
        alert("The Report has been successfully deleted.");
        location.reload();
    }
    function onQueryFailed(err) {
        alert("Error occurred.");
    }
</script>
<SharePoint:SPGridView ID="gvWBReportsChild" ShowHeader="false" runat="server" AutoGenerateColumns="false"/>
                                    <Columns>
                                        <asp:TemplateField HeaderText="Column name" ControlStyle-Width="250px" Column name>
                                            <ItemTemplate>
                                                <asp:Label ID="lblReinsuranceReports" runat="server" Text='<%# Eval("Column name") %>'></asp:Label>
                                                <td class="ms-vb clsHiddenID" style="display: none">
                                                    <%# Eval("ID") %>
                                                </td>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderStyle-CssClass="ms-vb">
                                            <ItemTemplate>
                                                <div class="demo-box" id='<%# Eval("ID") %>' style="display: block" onload="">
                                                </div>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderStyle-CssClass="ms-vb">
                                            <ItemTemplate>
                                                <a href="#" class="clsRemoveHash" onclick="EditItemAlert(<%# Eval("ID") %>)">
                                                    <img border="0" src="../Style Library/Images/edititem.gif" alt="Edit" /></a>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderStyle-CssClass="ms-vb">
                                            <ItemTemplate>
                                                <a id="<%# Eval("ID") %>" Class="clsRemoveHash" onclick="javascript: if(DeleteItemConfirmation()){deleteListItem(<%# Eval("ID") %>);}">
                                                    <img border="0" alt="Delete" src="../Style Library/Images/deleteitem.GIF" /></a>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                 </SharePoint:SPGridView>


//Getting SharePoint list item attachments Script file:

  var itemId = "";
   

    $(document).ready(function () {
        //var tdIds = $("td.ms-vb:hidden");
       
        var tdIds = $(".clsHiddenID");

        $.each($(tdIds), function (index, td) {
            itemId = $(td).text();
            GetItemAttachments(itemId);
        });
        $("[id^='spanAtt_']").each(function () {
            $(this).click(function () {
                var fileLnk = _spPageContextInfo.webAbsoluteUrl + $(this).attr("lnk");
                window.open(fileLnk);
            });
        });
    });
    function GetItemAttachments(itmId) {
        var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items(" + itmId + ")/AttachmentFiles";
        var requestHeaders = { "Accept": "application/json;odata=verbose" };
        $.ajax({
            url: requestUri,
            async: false,
            contentType: "application/json;odata=verbose",
            headers: requestHeaders,
            success: onSuccess,
            error: onError
        });
    }
    function onSuccess(attData, respStatus) {
        if (typeof attData != 'undefined') {
            if ((typeof attData.d != 'undefined') && (typeof attData.d.results != 'undefined') && (attData.d.results.length > 0)) {
                var attHTML = "";

                for (var i = 0; i < attData.d.results.length; i++) {
                    var fileUrl = attData.d.results[i].ServerRelativeUrl;
                    var fileExtn = attData.d.results[i].FileName.substr(attData.d.results[i].FileName.indexOf('.') + 1).toUpperCase();
                    var fileExtnArray = fileExtn.split(".");
                   
                    if (fileExtnArray[1] != null) {
                        fileExtn = fileExtnArray[1];
                    }
                    else {
                        fileExtn = fileExtnArray[0];
                    }
                    var dirVal = "";

                    if (fileExtn == "PDF") {
                        dirVal = "ltr";
                    }
                    else if (fileExtn == "PPT") {
                        dirVal = "ppt";
                    }
                    else if (fileExtn == "XLSX") {
                        dirVal = "xlsx";
                    }
                    var spanId = "spanAtt_" + itemId + "_" + i;
                    attHTML = attHTML + '<div style="float:left"><span id="' + spanId + '" lnk="' + fileUrl + '" style="background-size: 16px 16px; outline: medium none; border: medium none; cursor: pointer;" dir="' + dirVal + '">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div>';
                }//end for

               
                var test = $(document).find("div.demo-box");
                var tempDev;
                for (var j = 0; j < test.length; j++) {
               
                    if($(test[j]).attr("id") == itemId.trim())
                    {                   
                        tempDev = test[j];
                    }
                }
                $(tempDev).append(attHTML);
               

               // $("div.demo-box").html(attHTML);
                //attHTML= "";

            }//end inner if
        }//end outer if      
    }
    function onError(errAtt) {
        alert(errAtt.responseText);
    }
//Delete list items in the grid:
$(document).ready(function () {
   
    $('.clsRemoveHash').click( function(event){   event.preventDefault();})
     
    var win = window.location.href;
        $('.clsBtnCustom').click(
    function () {
        var options = {
            height:600,
            url: "../Lists/Listname/Listnewform.aspx",
            //url:  _spPageContextInfo.webServerRelativeUrl + "/SitePages/AddAgreement.aspx",
            dialogReturnValueCallback: function(dialogResult)
            {
                  if(dialogResult == 1)
                  {
                  var postbackText = GetPostBackValue();
                  //displaySaveMsg();   
                __doPostBack(postbackText);
                }
            }   
         };
        SP.UI.ModalDialog.showModalDialog(options);
    });

    });   
//Edit List Item in the grid:

function EditItemAlert(cid){
  var popup = {
            height:600,
            url: "../Lists/ListName/ListEdit.aspx?&ID=" + cid,
            //url: _spPageContextInfo.webServerRelativeUrl + "/SitePages/EditAgreement.aspx?ID=" + cid,
            dialogReturnValueCallback: function(dialogResult)
            {
              if(dialogResult == 1)
               {
                     var postbackText = GetPostBackValue(); 
                     //displayUpdateMsg();
                __doPostBack(postbackText);
               }
            }   
        };
        SP.UI.ModalDialog.showModalDialog(popup);
 }

function DeleteItemConfirmation()
{
        var r=confirm("Are you sure you wish to delete this item?");        
        return r;
}