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");
}