1

My scenario is to show doc icon in Jquery Grid for sharepoint document library. My Data is in JSON. here is how i am fetching the data and building the array object and Pass it to JSON.Now in my Jqgrid i want to display Doc icon based up on the type. For example . If my doc type is pdf i want to load image which is related to pdf, and if it is of xsxlx i want to load image which is related to xslx. so on .I tried using formatter function but it shows only one image for all types ie. pdf ,xslx,txt.here is the function which i have written. can you please help me out on this .

 $().SPServices({
            operation: "GetListItems",
            async: false,
            listName: pdlist,
             CAMLQuery: pdquery,
            CAMLViewFields:pdfieldsToRead,
            completefunc: buildProcessDocdata
        });
    }
    function buildProcessDocdata(xData, status)
    {
       var ProcessDocdata  = [ ];
      $(xData.responseXML).SPFilterNode("z:row").each(function () {  
         ProcessDocdata.push({
                Processid: $(this).attr("ows_ID"),
                Type: $(this).attr("ows_DocIcon"),            
                DocumentName: $(this).attr("ows_FileLeafRef").split("#")[1],            
                Date: $(this).attr("ows_Modified"),
                ProcessTask: $(this).attr("ows_Process_x0020_Task").split("#")[1], 
                DocumentType: $(this).attr("ows_Document_x0020_Type"),
                DocumentURL: "http://test.sharepoint.com/" + $(this).attr("ows_FileRef").split("#")[1]
            });
       console.log(ProcessDocdata);
      });
           ClientGriddisplay(ProcessDocdata);
    }

/BINDING THE DATA TO THE SHAREPOINT GRID/

function ClientGriddisplay(ProcessDocdata) { 
 jQuery("#Grid_ProcessDocuments").jqGrid({   
   url: ProcessDocdata.json,
   data: ProcessDocdata,
        datatype: "local",
          colNames:["Date","Document Name","DocumentType","DocumentURL","ProcessTask","Processid","Type"],

          colModel:[
            {name:'Date',index:'Date',align: 'left',sortable: true,width:100,formatter:"date" },
            {name:'DocumentName',index:'DocumentName',align:'left', width:350,sortable:true,formatter:formatURL}, 
            {name:'DocumentType',index:'DocumentType',hidden: true,align:'left', width:100,sortable: false},
            {name:'DocumentURL',index:'DocumentURL',hidden: true,align:'left', width:100,sortable: false},
            {name:'ProcessTask',index:'ProcessTask',align: 'left',width:450,sortable: false },
            {name:'Processid',index:'Processid',hidden: true,align:'left', width:60,sortable: false},
           {name:'Type',index:'Type',align:'left', width:60,sortable: true,formatter:formatImage}         

                       ],
        rowNum: 300,      
        height: 'auto',
        viewrecords: true,
      sortname: 'ProcessTask',
      grouping:true,
      groupingView : { groupField : ['DocumentType'] },
      groupColumnShow : [false, false],
      groupCollapse : false, 
      groupOrder: ['asc', 'asc'], 
      groupSummary : [false, false],
      caption: "PROCESS DOCUMENTS "

 });

}
   function formatURL(cellValue, options, rowObject) 
{
            var docuurl = '<a href="' + rowObject['DocumentURL'] + '" target="_blank" >' + rowObject['DocumentName'] + '</a>';
            return docuurl;
  }
function formatImage(cellValue, options, rowObject)
{
  alert(cellValue);
  var imageHtml;
  if(cellValue="pdf")
    {
        imageHtml = "<img src='/_layouts/images/icpdf.png' />";

    }
  else if(cellValue="icxlsx")
    {
        imageHtml = "<img src='/_layouts/images/icxlsx.png' />";

    }

            return imageHtml;

        }

function unformatImage(cellValue, options, cellObject) {

            return $(cellObject.html()).attr("originalValue");
        }

MY JSON OUT PUT enter image description here

2 Answers 2

1

Shorten your logic with:

var icons = {
    xls: 'ICXLS.PNG',
    xlsx: 'ICXLS.PNG',
    xlsm: 'ICXLS.PNG',
    docx: 'icdocx.png',
    doc: 'icdocx.png',
    ppt: 'icpdf.png',
    pptx: 'icpdf.png',
    txt: 'ictxt.gif',
};
var icon = 'ATTACH16.PNG';
if (icons.hasOwnProperty(ext)) icon = icons[ext];
var thumbnail = '<img class="ms-asset-icon" src="/_layouts/15/images/' + icon + '">';
0
0

I was able to solve this . Here is the function which i have created and might be useful for some one

/*This Function will Get the DOCiCON for sharepoint library
   Here FileURL will be the ServerUrl. 
     */
function GenerteDocIcon(FileURL)
{
  var fileURL = FileURL;
        var filenameArray = fileURL.split("/");
        var filenamePosition = filenameArray.length;
        var theFileName = filenameArray[filenamePosition-1];
     var pattern=/\.[0-9a-z]+$/i;
        var ext = (theFileName).match(pattern);
        ext = ext[0].toLowerCase();
    //alert(ext);

     var icon = '/_layouts/15/images/ATTACH16.PNG';  
        // check for excel
        if ( '.xls' == ext || '.xlsx' == ext|| '.xlsm' == ext){
            icon = '/_layouts/15/images/ICXLS.PNG';
        }
        // check for ms document
        else if( '.docx' == ext || '.doc' == ext){
             icon = '/_layouts/15/images/icdocx.png';
        }
        // check for powerpoint
        else if( '.ppt' == ext || '.pptx' == ext){
             icon = '/_layouts/15/images/PPT16.GIF';
        }
      else if( '.pdf' == ext ){
             icon = '/_layouts/15/images/icpdf.png';
        }
    else if( '.txt' == ext ){
             icon = '/_layouts/15/images/ictxt.gif';
        }
        // create the html to dipslay the file icon
        var thumbnail = '<img class="ms-asset-icon" src="'+icon+'">';

     return thumbnail;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.