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:
The column headers are appearing at the bottom of the view. I can move them to the top in the post render function but..
Filter selection is not working as usual i.e. page needs to be refreshed to filter the view after applying filters
- 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');
})();