1

Im trying to implement a FAQ accordion SharePoint list. I managed to get the accordion working while using JSLink. Sadly the search is not working properly. I used the following code in my JSLink js:

(function () {
/*
 * Initialize the variable that store the overrides objects.
 */
var overrideCtx = {};
overrideCtx.Templates = {
    Header: function(ctx) {
            var headerHtml =  RenderTableHeader(ctx);
            headerHtml += "</table>";
            headerHtml += "<div id='accordion'>";
            return headerHtml;
        },
    Footer: function (ctx) {
        return "</div>";
                        },
    Item: function(ctx) {
        // Build a listitem entry for every announcement in the list.
        var ret = "<h3 class='OutlookFAQ'>"+ctx.CurrentItem.Title+"</h3><div style='display:none;' class='OutlookFAQContent'><p>"+ctx.CurrentItem.Answer+"</p></div>";
        return ret;
    }

};


overrideCtx.BaseViewID = 1;
overrideCtx.ListTemplateType = 100;



overrideCtx.OnPostRender = [];
overrideCtx.OnPostRender.push(function()
{
    $('#accordion h3').click(function(e) {
            $(e.target).next('div').siblings('div').slideUp();
            $(e.target).next('div').slideToggle();
    });
});

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

})();

As i sad, the accordion is working, the searchbox is beeing display. If I try to submit search a JS Error "TypeError: this.$T_3 is null" in sp.ui.listsearchbox.js pops up. Any ideas?

Regards

René

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
Bo4711
  • 11
  • 1
  • 2
  • I suppose you follow this blog post: http://www.sharepointnutsandbolts.com/2013/01/using-jslink-to-change-ui-of-sharepoint_20.html ? – AymKdn Feb 19 '14 at 09:10

1 Answers1

1

This error occurs due to the missing Search Status element which is a part of search control and rendered in Footer template

Search Status

Search status element is used to display hints about search results. RenderSearchStatus function is used for rendering Search status

enter image description here

Solution

Replace Footer rendering template 

Footer: function (ctx) {
    return "</div>";   
}

with 

Footer: function (ctx) {
   var footerHtml = "</div>";
   footerHtml += RenderFooterTemplate(ctx);  //render standard footer (pager, search status)
   return footerHtml;   
}

Blog post Customize the rendering of a List View in Sharepoint 2013: Displaying List Items in Accordion contains a working example of List View rendered as Accordion.

Vadim Gremyachev
  • 57,952
  • 20
  • 129
  • 193
  • Great, thanks for your help. The search is now working, at least partly. When the search is executed, the rendering is totally wrong, when you clear the search, the rendering is even worse. I think my JS code is somehow wrong. Any ideas how to fix? – Bo4711 Feb 24 '14 at 10:23
  • Hmm.. the answer has been updated, the mentioned post describes how to customize List View to render it as accordion – Vadim Gremyachev Feb 24 '14 at 11:35