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?

enter image description here


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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