JSLink: Is it possible keep the default list view header with column headers for filtering?

Question

I am rendering a view with JSLink. Rendering is fine but is it possible keep the default list view header with column headers for filtering?

I have tried this code in my dev environment.

Issues:

1. The column headers are appearing at the bottom of the view. I can move them to the top in the post render function but..

2. Filter selection is not working as usual i.e. page needs to be refreshed to filter the view after applying filters

3. Filters get reset by ordering a column asc or desc

Is it possible to retain/enforce the default filter behaviour and still rendering items using custom html?

 (function () {


        function OnListViewPostRender(ctx) {

           $("#lfilters").html($("thead[id^='js-listviewthead-']").parent('table').html());

        }



        function OnListViewPreRender(ctx) {

        }

        function RenderListItemTemplate(ctx) {


            var ItemHtml;

                var listItem = ctx.CurrentItem;


                ItemHtml += '<h2>'+listItem.Title +'</h2>';
                ItemHtml += '<div>' +listItem._x0066_zq1 +'</div>' ;

            return ItemHtml ;
        }
        function RenderListViewHeader(ctx) {
            var headerHtml = RenderTableHeader(ctx); 
            return headerHtml ;

        }

        function _registerAccordionViewTemplate() {

            var ListViewContext = {};


            ListViewContext.Templates = {};
            ListViewContext.Templates.Item = RenderListItemTemplate;
            //ListViewContext.Templates.Header = RenderListViewHeader;
            ListViewContext.OnPreRender = OnListViewPreRender;
            ListViewContext.OnPostRender = OnListViewPostRender;
            SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ListViewContext);
        }
        ExecuteOrDelayUntilScriptLoaded(_registerAccordionViewTemplate, 'clienttemplates.js');

    })();

Answer 1

Your item-HTML needs to be formed like the default html. If you dont want to rebuild everything just call RenderItemTemplate(ctx) and modify the return html.

Example

 (function () {         
        function RenderListItemTemplate(ctx) {
            var $html = $(RenderItemTemplate(ctx));
            $html.children("td").css('font-weight', 'bold', 'important');
            return $html[0].outerHTML;
        }

        function _registerAccordionViewTemplate() {
            var ListViewContext = {};
            ListViewContext.Templates = {};
            ListViewContext.Templates.Item = RenderListItemTemplate;
            SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ListViewContext);
        }
        ExecuteOrDelayUntilScriptLoaded(_registerAccordionViewTemplate, 'clienttemplates.js');
  })();

Answer 2

Here is how to create a nice flexbox layout for a SharePoint list view and also keeping the default column headers for filtering:

    (function () {
    ExecuteOrDelayUntilScriptLoaded(_registerDemoViewTemplate, 'clienttemplates.js');
    function _registerDemoViewTemplate() {
        // Initialize the variable that store the objects. 
        var overrideCtx = {};
        overrideCtx.Templates = {};
        overrideCtx.Templates.Header = RenderDemoViewHeader;
        overrideCtx.Templates.Item = ItemRenderCustom;
        overrideCtx.OnPostRender = OnDemoViewViewPostRender;
        // Register the template overrides. 
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
    }
    function OnDemoViewViewPostRender(ctx) {
        if (window.navigator.appName != "Microsoft Internet Explorer") {
            $(".flex-container").css({ 'width': 'auto' });
        }
    }
    function RenderDemoViewHeader(ctx) {
        return RenderHeaderTemplate(ctx);
    }
    function ItemRenderCustom(renderCtx) {
        var listItem = renderCtx.CurrentItem;
        var listSchema = renderCtx.ListSchema;
        var idx = renderCtx.CurrentItemIdx;
        var _indicator = "green";
        var itemHTML = [];
        if (idx == 0) {
            itemHTML.push('<tr>');
            var fields = listSchema ? listSchema.Field : null;
            itemHTML.push('<td colspan="');
            itemHTML.push(fields.length + 2);
            itemHTML.push('" class="tdItems" >');
            itemHTML.push('<div id="container-fluid"><h1 class="text-center">Demo121</h1><ul class="flex-container row">');
        }
        itemHTML.push(String.format('<li class="white-panel"><div class="panel-heading Demo121-ts-{2} Demo121-ts-heading">{0}</div><div class="panel-body"><p><b>Assigned To: </b>{4}</p><p ><b>Status: </b>{1}<span class="Demo121-ts-icon-{2}"></span></p><p><b>Department:</b>{3}</p></div></li>', listItem.Title, listItem.Status,  _indicator, listItem.Departments, listItem.AssignedTo[0].title));
        if (idx == renderCtx.ListData.Row.length - 1) {
            itemHTML.push('</ul></div></td>');
            itemHTML.push('</tr>');
        }
        return itemHTML.join('');
    };
})();

CSS

<style>
ul.flex-container {

    display: flex;
    height: 100%;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 900px;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}

ul.flex-container > li {
    list-style-type: none;
    min-width: 20em;
    -ms-flex: 1 1 20em;
    -webkit-flex: 1 1 20em;
    flex: 1 1 20em;
    margin-bottom: 1%;
    margin-right: 1%;
}
</style>