How to get Image path of Type column in document library

Hi All,

Today i found one very interesting thing. I thought it may help you a lot in many cases.

I was developing webpart which functions like this.

I have document library and in that Document Library i have one column which specially identified a ContactID from other List. When i add that contact i also take the attachment and put it in that document library, so first when i get that ContactID (ID of the contact listItem), i insert a row in that document library with Contact ID in the ContactID column in that document library.

This post is not regarding this, but would be one of the scenario to explain what i am now about to tell you.

I also needed the icon with each respective documents. If the document is Docx, i needed to show the docx icon which sharepoint puts in Type column in Document Library. same goes for any files. Doc,Docx,XML,Xls,Xlsx,ppt etc.

so i wonder how sharepoint manages this, i tried to take the ListItem of the document library and tried to see that any of the Field gives the icon path or not. But no, none of the fields returns me the Icon of the path, or even none of the Field tells us that it uses which icon. I search a bit, then i found that everything is in one Field which is called "DocIcon".

So assume that you have document library called "Shared Documents".

---------------------------------------------------------------------------------------------
SPDocumentLibrary objDocLib =(SPDocumentLibrary)SPContext.Current.Web.Lists["Shared Documents"];
---------------------------------------------------------------------------------------------

Now, Lets say i am taking the First Document,SPListItem objItem = objDocLib.GetItemById(1); // Make sure you have at least one doc, otherwise this will give ErrorNow,

Check for this condition,

---------------------------------------------------------------------------------------------
if (objItem["DocIcon"] == null)
---------------------------------------------------------------------------------------------

Because if sharepoint images does not have supporting type icon for that document type, lets say any file without any extesnion, this field will return you null. so first check this. now proceed.

---------------------------------------------------------------------------------------------
string strFileType= Convert.ToString(objItem["DocIcon"]);
---------------------------------------------------------------------------------------------

This returns you the type (it returns doc,docx,ppt,xls,xlsx,xml etc). So from here you can come to know what is the type of the document.

Now, interesting part comes. you must be wondering that OK, that is fine, but where is the icon path?

Here is a trick that i found,

Check the Images Folder inside C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES.

Now Check you will find all the icons which sharepoint uses have .gif extension and all these icons have IC prefix with the extension and plus .gif at last. So have you got any hint? No??? no, problem, here we go. Check this out.

---------------------------------------------------------------------------------------------
Image picture = new Image();
if (objItem["DocIcon"] == null)
{
picture.ImageUrl = @"_layouts\Images\" + "ICgen.gif";
}
else
{
picture.ImageUrl = @"_layouts\Images\" + "IC" + objItem["DocIcon"].ToString() + ".gif";
}
---------------------------------------------------------------------------------------------

Consider picture as asp Image control, If you have noticed that if sharepoint does not have icon matching with the document type then it puts one white paper kind of icon and the name of that icon is ICgen.gif. so we have done same thing, if sharepoint does not have any supported icon for that document type, it will give objItem["DocIcon"] null. so we have also checked that and places the proper URL, and if we found that then we make combination of "IC" + objItem["DocIcon"].ToString() which is extension + ".gif" which is default extension of any images of sharepoint.That's it. your job is done.

Resize Quick Launch at runtime in Sharepoint

Many of us finding the solution to resize the Quick Launch on Sharepoint site. I have found the one javascript which is used to resize the Quick Launch.


But the changes is temperary when you refresh the page the changes wich we have made is not reflected.


The Script for this is as follows...

var _tk_spDragProps = new Object();

function _tk_setGrab()
{
try
{
var oNavigation = document.getElementById("LeftNavigationAreaCell");

if (oNavigation == null) return;

var oDivider = oNavigation.nextSibling;
oDivider.style.cursor = "col-resize";
oDivider.onmousedown = _tk_spStartDrag;
_tk_findNavContainers(oNavigation);

_tk_spDragProps.element = oNavigation.nextSibling;
_tk_spDragProps.sidePanel = oNavigation;
_tk_spDragProps.element.nextSibling.style.width = "0px";
_tk_spDragProps.element.style.width = "5px";
_tk_spDragProps.element.nextSibling.nextSibling.style.width = "5px";

var width = _tk_getNavWidthCookie();
if (width != null)
{
_tk_setContainerWidths(width);
_tk_spDragProps.dragStartLeft = width;
}
}
catch (e)
{
alert(e.message);
}
}

function _tk_findNavContainers(e)
{
for (var c=0; c<e.children.length; c++)
{
var oChild = e.children[c];

if (oChild.id.indexOf("TreeViewNavigationManager") > 0)
_tk_spDragProps.navMan = oChild;

if (oChild.id.indexOf("TreeViewRememberScroll") > 0)
{
_tk_spDragProps.navScroll = oChild;
return;
}
_tk_findNavContainers(oChild);
}
}

function _tk_spStartDrag(e)
{
_tk_sp_startDrag(window.event);
}

setTimeout("_tk_setGrab()", 50);

function _tk_sp_startDrag(e)
{
var x = e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
_tk_spDragProps.mouseX = x;
_tk_spDragProps.dragStartLeft = parseInt(_tk_spDragProps.sidePanel.style.width, 10);

if (isNaN(_tk_spDragProps.dragStartLeft)) _tk_spDragProps.dragStartLeft = 150;

_tk_spDragProps.element.style.zIndex = ++_tk_spDragProps.zIndex;

document.attachEvent("onmousemove", _tk_sp_dragMove);
document.attachEvent("onmouseup", _tk_sp_dragEnd);
window.event.cancelBubble = true;
window.event.returnValue = false;
}

function _tk_setContainerWidths(width)
{
_tk_spDragProps.sidePanel.style.width = width + "px";

if (_tk_spDragProps.navScroll != null)
_tk_spDragProps.navScroll.style.width = _tk_spDragProps.sidePanel.style.width;

if (_tk_spDragProps.navMan != null)
_tk_spDragProps.navMan.style.width = _tk_spDragProps.sidePanel.style.width;
}

function _tk_sp_dragMove()
{
var x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
var width = (_tk_spDragProps.dragStartLeft + x - _tk_spDragProps.mouseX);
if (width < 150) width = 150;

_tk_setContainerWidths(width);

window.event.cancelBubble = true;
window.event.returnValue = false;
}

function _tk_getNavWidthCookie()
{
var oCookies = document.cookie;
var arCookies = oCookies.split(";");
for (var c=0;c <arCookies.length; c++)
{
var arCookie = arCookies[c].split("=");
if (arCookie[0].replace(/^\s+\s+$/g, '') == "tkNavWidth")
return arCookie[1];
}

return null;
}

function _tk_setNavWidthCookie(width)
{
document.cookie = "tkNavWidth=" + width + "; path=/";
}

function _tk_sp_dragEnd()
{
_tk_setNavWidthCookie(parseInt(_tk_spDragProps.sidePanel.style.width));
document.detachEvent("onmousemove", _tk_sp_dragMove);
document.detachEvent("onmouseup", _tk_sp_dragEnd);
}