4

I have a question about ECB: In Sharepoint 2013, how to create Edit Control Block (ECB) in view with JSLink.

  • I use JSLink to modify the default view, but I can't display the ECB context menu with "View item", "New item" ... I don't want use XSLT or custom action. Per my employer, I must to use JSLink to do it.

  • I update JSLink for View in FeatureReceiver.cs, not using orther webpart. My View is OK, but missing ECB.

Here is a picture of my custom view:

enter image description here Standard view in SP2013

enter image description here

This is my JavaScript code:

(function () {
var itemCtx = {};
itemCtx.Templates = {};
itemCtx.Templates.Item = ItemOverrideFun;
itemCtx.BaseViewID = 1;
itemCtx.ListTemplateType = 104;
itemCtx.OnPostRender = [];
itemCtx.OnPostRender.push(function () {
    $(document).ready(function () {

        // use this method to extend ECB on common lists...
         function Custom_AddListMenuItems(m, ctx) {
         // Adding a simple command to the ECB
         CAMOpt(m, 'Go to', 'javascript:STSNavigate("http://www.abc.com");return false;'); 
         // Adding a separator to the ECB
         CAMSep(m);                 
         } 
         // use this method to extend ECB on libraries...
         function Custom_AddDocLibMenuItems(m, ctx) {} 

    });
});
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);})();

function ItemOverrideFun(ctx) {
var id = ctx.CurrentItem["ID"];
var _announcementTitle = ctx.CurrentItem["Title"];
var _announcementDesc = ctx.CurrentItem["Content"];
var createBy = ctx.CurrentItem["Author"][0].title;
var modified = ctx.CurrentItem["Modified"];
var att = ctx.CurrentItem["Attachments"];
var attImg = "";
if (att == true) {
    attImg = attImg + "<img src='/../../_layouts/15/images/attach.gif' />&nbsp;";
}
return "<tr><td></td><td vAlign='top' style='width:20px;padding-left:8px;'>" + attImg + "</td><td colspan='2' style='padding-left:40px;'><img style='cursor:pointer' onclick='Expand(" + id + ");' id='imgId" + id + "' src='" + L_Menu_BaseUrl + "/Images/minus.gif' /><span style='padding-left:5px'><a style='cursor:pointer;font-size:1em' href='" + L_Menu_BaseUrl + "/Lists/Bulletin%20Board/DispForm.aspx?ID=" + id + "'>" + _announcementTitle + "</a></span><div id='sh" + id + "' style='padding-left:15px;'>" + _announcementDesc + "</div></td><td>" + createBy + "</td><td>" + modified + "</td></tr>";}

function Expand(id) {
var dsStatus = document.getElementById('sh' + id).style.display;
var url = L_Menu_BaseUrl;
if (dsStatus == 'none') {
    jQuery("#imgId" + id).attr('src', url + '/Images/minus.gif');
    $('#sh' + id).show();
}
else {
    jQuery("#imgId" + id).attr('src', url + '/images/plus.gif');
    $('#sh' + id).hide();
}   

}

What is struct HTML of ECB? I return missing ECB, so how can I resolve that issue?

  • Anyone can help me, please! I am so tired with this issues :(( – LaLa Apr 25 '14 at 3:50
2

ok, i have fixed this issue.

ECB not show because struct HTML return in ItemOverrideFun not correct.

This is final Javascript code:

(function () {
var itemCtx = {};
itemCtx.Templates = {};
itemCtx.Templates.Item = ItemOverrideFun;

itemCtx.BaseViewID = 1;
itemCtx.ListTemplateType = 104;

itemCtx.OnPostRender = [];
itemCtx.OnPostRender.push(function () {
    $(document).ready(function () {
        HideHeaderView();
    });
});

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);

 })();

function ItemOverrideFun(ctx) {
var itemctxId = ctx.ctxId;

var itemId = ctx.ctxId + "," + ctx.CurrentItem.ID + "," + ctx.CurrentItemIdx;

var id = ctx.CurrentItem["ID"];
var _announcementTitle = ctx.CurrentItem["Title"];
var _announcementDesc = ctx.CurrentItem["Content"];
var createBy = ctx.CurrentItem["Author"][0].title;
var modified = ctx.CurrentItem["Modified"];
var att = ctx.CurrentItem["Attachments"];
var attImg = "";
if (att == true) {
    attImg = attImg + "<img src='/../../_layouts/15/images/attach.gif' />&nbsp;";
}

var rt = "<tr id='" + itemId + "' iid='" + itemId + "' oncontextmenu='return ShowCallOutOrECBWrapper(this, event, false)' class=' ms-itmHoverEnabled ms-itmhover' setedgeborder='true'><td tabindex='0' class='ms-cellStyleNonEditable ms-vb-itmcbx ms-vb-imgFirstCell'><div tabindex='-1' class='s4-itm-cbx s4-itm-imgCbx' role='checkbox' title='Test item'><span class='s4-itm-imgCbx-inner'><span class='ms-selectitem-span'><img src='/_layouts/15/images/spcommon.png?rev=23' alt='' class='ms-selectitem-icon'></span></span></div></td>" +
            "<td vAlign='top' style='width:20px;padding-left:8px;'>" + attImg + "</td>" +
            "<td colSpan='2' height='100%' isecb='TRUE' class='ms-cellstyle ms-vb-title ms-positionRelative'>" +
                "<img style='cursor:pointer' onclick='Expand(" + id + ");' id='imgId" + id + "' src='" + L_Menu_BaseUrl + "/Images/minus.gif'/><span style='padding-left:5px'>" +
                "<div eventtype='' perm='0x7fffffffffffffff' field='Title' id='" + id + "' ctxname='ctx" + itemctxId + "' class='ms-vb  ms-vb-menuPadding itx'>" +
                    "<a target='_self' onclick='EditLink2(this, " + itemctxId + ");return false;' href='" + L_Menu_BaseUrl + "/Lists/Bulletin%20Board/DispForm.aspx?ID=" + id + "' onfocus='OnLink(this)' class='ms-listlink ms-draggable' dragid='0' draggable='true'>" + _announcementTitle + "</a>" +
                 "</div>" +
                 "<div id='sh" + id + "' style='padding-left:15px;'>" + _announcementDesc + "</div>" +
             "</td>" +
             "<td>" + createBy + "</td>" +
             "<td>" + modified + "</td>" +
             "<td class='ms-list-itemLink-td ms-cellstyle ms-vb-lastCell ms-vb-lastCell'><div onclick='ShowECBMenuForTr(this, event); return false;' class='ms-list-itemLink '><a href='#' onclick='ShowECBMenuForTr(this.parentNode, event); return false; ' title='Open Menu' class='ms-lstItmLinkAnchor ms-ellipsis-a' ms-jsgrid-click-passthrough='true'><img alt='Open Menu' src='/_layouts/15/images/spcommon.png?rev=23' class='ms-ellipsis-icon'></a></div></td>" +
         "</tr>";

    return rt;
 }


 function Expand(id) {

   var dsStatus = document.getElementById('sh' + id).style.display;
   var url = L_Menu_BaseUrl;
   if (dsStatus == 'none') {
    jQuery("#imgId" + id).attr('src', url + '/Images/minus.gif');
    $('#sh' + id).show();
  }
   else {
    jQuery("#imgId" + id).attr('src', url + '/images/plus.gif');
    $('#sh' + id).hide();
   }
 }

 function HideHeaderView() {
   $('div.ms-vh-div').filter('[DisplayName~="Body"],[CTXNum~="3"]').hide();    
}

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.