Search This Blog

Saturday, July 8, 2017

Custom Document Preview on Click of Document Link in GRID ( Data Table)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="">

    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <link rel="stylesheet" type="text/css" href="" />
    <script type="text/javascript" src=""></script>

    <script type="text/javascript" src=""></script>

    <script type="text/javascript" charset="utf-8">
         $(document).ready(function () {
            SP.SOD.executeFunc('sp.js', 'SP.ClientContext', retrieveListItems);
            ExecuteOrDelayUntilScriptLoaded(CallOut, "callout.js");
            var aHtml="";
            var rowID;        
            var siteUrl = "";
            var restUrl="";
            function retrieveListItems() {
             // This piece of code retrieves list items from the list called "Resources"
                // you can change the name of the list in the variable 'listName'
                // Also, the fields revieved are 'ows_Title' and 'ows_Cost', you can change those too
                    operation: "GetListItems",
                    async: false,
                    listName: "KhaitanDocLib",
                    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='EncodedAbsUrl'/></ViewFields>",
                    completefunc: function (xData, Status) {
                        $(xData.responseXML).SPFilterNode("z:row").each(function () {
                            var aHtml = "<a href=" + $(this).attr("ows_EncodedAbsUrl") + ">" + $(this).attr("ows_Title") + "</a>";
                            var tdHtml = "<tr class='gradeX' id='" + $(this).attr("ows_ID") + "'> <td class='DocLinkID'>" + aHtml + "</td>";
                            tdHtml += "<td class='two'>" + $(this).attr("ows_PracticeArea") + "</td>";

                // the table is constructed dynamically where results are going to be placed
                var nCloneTh = document.createElement('th');
                var nCloneTd = document.createElement('td');
                nCloneTd.innerHTML = '<img class="editRowIMG" src=" Library/details_open.png" height="25" width="25"  alt="EDIT"><img class="delItemImg" src=" Library/Delete.png" height="25" width="25" alt="Delete">';
                nCloneTh.innerHTML = 'Actions';
                nCloneTd.className = "center";
                // this is an 'Add' image  inserted in front of each row
                $('#resourcepool thead tr').each(function () {
                    //this.insertBefore( nCloneTh, .childNodes[0]);

                $('#resourcepool tbody tr.gradeX').append(nCloneTd);
                var resourceTable = $('#resourcepool').dataTable();
                //this is an event handler to handle users clicking on the 'Add' image in front of each row
                $('#resourcepool').on( 'click', 'tbody tr .DocLinkID', function () {
     restUrl = "'KhaitanDocLib')/items("+rowID+")";
                    url: restUrl,
                    method: "GET",                
                    headers: { "Accept": "application/json; odata=verbose" },
                    success: function (data) {
var metaDataCols ="";
                        $("#frame").attr("src", data.d.ServerRedirectedEmbedUrl);
                        metaDataCols="<table><tr><td>Practice Area:</td><td>"+data.d.PracticeArea+"</td><td>Sub Practice Area:</td><td>"+data.d.SubPracticeArea+"</td></tr>";
                        metaDataCols +="<tr><td>Comments</td><td>"+data.d.Comments+"</td></tr><table>";
                        $("#openDocID").attr("href", data.d.ServerRedirectedEmbedUrl);
                    error: function (data) {
                });//onclick of row             
            }//retrieve item method
   function GetDocNameLinkURL(){
        url: restUrl,
                    method: "GET",                
                    headers: { "Accept": "application/json; odata=verbose" },
           success: function(results){
     var docURL = results.d.LinkingUrl.split('?');
          var arr = results.d.Name.split('.');

        function myFunction(){
          alert("Document downloaded");
         }// download completes

    <style type="text/css">
        .edit-row-modal {
            display: none;

<body id="dt_example">
    <table cellpadding="0" cellspacing="0" border="0" class="display" id="resourcepool">
                <th>Name Of Document</th>
                <th>Practice Area</th>
        <tbody class="tablebodyresources"></tbody>

  <div id="mydiv" width="100%" height="100%">
  <h1 id="DocNameID"></h1>
     <iframe Id="frame" height="440px"></iframe>
  <div id="metadatav"></div>  
   <a id="openDocID"><input type="button" value="Open" ></a>
   <a id="downloadDocID" onclick="myFunction()"><input type="button" value="Download" ></a>

No comments:

Post a Comment