SP2013 - Library using Preview Pane Style - How do I sort by the library columns?

Question

We have a request to create a library and the user group really likes the preview pane style. However, they also asked if it possible for users to sort the items by item name, created date, or any of the other columns noted in the screenshot. Is this possible in preview pane style? Are there work-arounds I can use?

Answer 1

You can leverage Client Side Rendering framework to customize the Preview Pane behavior, refer this article for more details. One approach to solve this would be:

• Override the PostRender event of ListView, specifically using below lines of code

  // Register the template overrides. overrideCtx.OnPostRender = postRenderHandler; // Register the template overrides. SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

• Then in the postRenderHandler function, add a click event listener the labels showing column names, like this:

  $('#preview1 > table > tbody > tr > td.ms-formlabel').click(function() { console.log('Column Name clicked'); //Write your sorting logic here });

• Then use the sorting logic to change sequence of elements found using below jQuery selector:

  $('#previewpanetable0 > tbody > tr > td:nth-child(1) > div > table > tbody > tr')