I have a document library in SharePoint 2013 with a number of different views and I want to add the menu ellipsis (...) at the end of each view by using javascript in the masterpage. I know how to do it via Designer but I'd prefer to put it in the Masterpage.



For the libraries, the menu ellipsis (...) is associated with the column "Name (linked to document with edit menu)" by default.

To move the ellipsis to the end of each view, you can change the order of the columns in the view to let the Name (linked to document with edit menu) display at the end of the view.

If you want to use JavaScript, you can try the script below. We can use it to add menu ellipsis (...) to a column. Refer to this demo

(function () {

//   Initialize the variables for overrides objects
    var overrideCtx = {};
    overrideCtx.Templates = {};

//  alert("Override call worked");

    overrideCtx.Templates.OnPreRender = csrMenuAvail; 


function csrMenuAvail(ctx) {
//  Specifying which column you are adding the ellipsis to based on the displayed field name. 
//  As written this will work across multiple web parts on the same page

    var numColumns = ctx.ListSchema.Field.length;
    var columnArr = ctx.ListSchema.Field;
    for (var i = 0; i < numColumns; i++)
        if (columnArr[i].RealFieldName == "Title")  //example 1
            columnArr[i].listItemMenu = "TRUE";         

It is not recommended to add scripts to master page as you only want to make it in one library.

You can use the script via JSLink. Save the above the script to a .js file such as AddMenuEellipsis.js, and upload the file to a Site library such as Site Assets library. Using code such as PowerShell to deploy the same JSLink for multiple views across the library.

Add-PSSnapin microsoft.sharepoint.powershell
$site = Get-SPSite http://sp/sites/team
$web = $site.OpenWeb()
$list = $web.Lists["doc04"]
$views = $list.views
foreach ($view in $views){
    $view = $view.ServerRelativeUrl
    $file = $web.GetFile($view);
    $wpManager = $file.GetLimitedWebPartManager([System.Web.UI.WebControls.Webparts.PersonalizationScope]::Shared);
    $webpart = $wpManager.WebParts[0]
    $webpart.JSLink = "~site/SiteAssets/AddMenuEellipsis.js"
  • Thanks for your reply. I actually want it in the Master Page as it will need to be applied to subsequent libraries that are add to the site. Also, I understand that it's attached the the Name column - I am needing to keep that column in the first position but would like to move (or add) the ellipsis to the end of the row. Is there any way of doing this? – AlyshaK Feb 7 '19 at 2:57
  • You can use the script I provided above in the master page. Use the JavaScript to check which column is the last column in each view and add the menu to the last column. – JoannaW_MSFT Feb 7 '19 at 4:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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