2

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');

    })();
4
  • Yes it is possible, unless you are overwriting the header in your code. Can you post your code, at least the part where you overwrite the header... Feb 8, 2016 at 17:04
  • Paste your code, if you only CSR the View Fields the whole UI is available. Feb 8, 2016 at 17:13
  • I have tried with and without overriding the header by returning the default header html.
    – HarryB
    Feb 8, 2016 at 22:13
  • Thanks for confirming that the filtering is available with custom html. I just needed to put all my custom HTML generated by RenderListItemTemplate in a single <tr><td> to get everything rendered correctly.
    – HarryB
    Feb 12, 2016 at 16:32

2 Answers 2

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');
  })();
1

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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