3

I've created the following to override a ListView I'm using to display an Announcements List to users. This works in IE9, enabling 'Asynchronous Update' has no effect on the results. In other versions and browsers when 'Next' is clicked the second announcement changes, but the first remains the same. The second announcement is actually the first result of the list, so the second result never appears (Example: 'Next' clicked -> First Announcement is the same as before, second announcement is the first item on page 2 of my Announcement List). Any ideas?

window.NewsList = window.NewsList || {};
window.NewsList.Post = {
customHeader: function (ctx) {
    var hdrHtml = RenderTableHeader(ctx) + "</table>"; 
    hdrHtml += "<div id='new-ann' class='custom-right'><div id='inside-right-rail'><a href='/sites/eonecentralDev/Lists/News%20and%20Announcements' class='block-header'>News & Announcements</a>";
    return hdrHtml;
},
customItemHtml: function (ctx) {
    var _announcementTitle = ctx.CurrentItem.Title;
    var _announcementDate = ctx.CurrentItem.Modified;
    var _announcementID = ctx.CurrentItem.ID;
    return "<div class='right-announcement-article'><p class='article-header'><a href='/sites/eonecentralDev/Lists/News%20and%20Announcements/DispForm.aspx?ID=" + _announcementID + "'>" + _announcementTitle + "</a></p><p class='article-date'>" + _announcementDate +"</p></div>";
},
pagingControl: function (ctx) {
    var html = "<table class='ms-bottompaging'><tr><td>";
    var firstRow = ctx.ListData.FirstRow;
    var lastRow = ctx.ListData.LastRow;
    var prev = ctx.ListData.PrevHref;
    var next = ctx.ListData.NextHref;
    html += "<div id='inside-right-rail' style='margin-top: -50px;'><div id='left=news-arrow'>";
    html += prev ? "<a title='Previous' class='left-news-button' href='javascript:void(0)' onclick='RefreshPageTo(event, &quot;" + prev + "&quot;); return false;'></a></div>" : "";
    html += "<div id='news-footer'><div class='news-footer-pagination'><span class='news-pagination news-selected'></span><span class='news-pagination'></span><span class='news-pagination'></span><span class='news-pagination'></span><span class='news-pagination'></span><span class='news-pagination'></span><span class='news-pagination'></span><span class='news-pagination'></span><span class='news-pagination'></span></div></div><div id='right-news-arrow'>";
    html += next ? "<a title='Next' class='right-news-button' href='javascript:void(0)' onclick='RefreshPageTo(event, &quot;" + next + "&quot;); return false;'></a></div>" : "";
    html += "</div>";
    html += "</td></tr></table>";
    return html;    
}
};

(function () {

var itemCtx = {};
itemCtx.Templates = {};

    itemCtx.Templates.Header = window.NewsList.Post.customHeader;
    itemCtx.Templates.Item = window.NewsList.Post.customItemHtml;
    itemCtx.Templates.Footer = window.NewsList.Post.pagingControl;

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

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);

})();
  • At first sight.. Check your prev/next reference into the ctx Object... ctx is a global object and JavaScript passes objects by reference. #At second sight; what happens without MDS enabled? – Danny '365CSI' Engelman Feb 9 '16 at 18:06
  • 1
    So, there is an accepted answer by Andrei on that question, he is the CSR guru.. where does his answer not apply? – Danny '365CSI' Engelman Feb 9 '16 at 21:19
  • The comments below the article all refer to the same issue I'm having. But, they were never answered. The author also updated the article to state that the accepted solution didn't end up working for him. I think this is close I'm just not sure why the results aren't appearing. – Nathan Voth Feb 9 '16 at 21:47

Your Answer

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

Browse other questions tagged or ask your own question.