Download a document when user clicks on File Icon


September 13, 2013 by Ravi C Khambhati

When you go to any sharepoint 2013 view and click on file icon it will select the entire row and will not download the document. I did some research and come up with below solution and below are the steps for the same,

Step 1: Create JS file and put below code into it.

(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Fields = { 'DocIcon': { 'View': DocIconBody } };

function DocIconBody(ctx) {
    var imgUrl = "/_layouts/15/images/ic" + ctx.CurrentItem.File_x0020_Type + ".png";
    var ret = "<a href='" + ctx.CurrentItem.FileRef + "'>" +
                "<img title='" + ctx.CurrentItem.FileLeafRef + "' border='0' alt='" + ctx.CurrentItem.FileLeafRef + "' src='" + imgUrl + "' width='16' height='16' DragId='1' />" +
    return ret;

Step 2: Open view’s schema file and change JSLink property to newly created file in above step

<JSLink>javascript file reference</JSLink>

Happy coding !!!



One thought on “Download a document when user clicks on File Icon

  1. Eliel says:

    Thanks for the post! I have some folders and I don’t get the Icon so I modified the code as follows:
    var imgUrl;
    if(ctx.CurrentItem.File_x0020_Type.length == 0)
    imgUrl = “/_layouts/15/images/skydrive_folder.png”;
    imgUrl = “/_layouts/15/images/ic” + ctx.CurrentItem.File_x0020_Type + “.png”;

    I use skydrive_folder.png just because is nice and small but there is another options.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: