0

I have a Refinement Web Part with the "Maximum number of refiner values" property set to 3.

However, I want to add a Show All button, which when clicked will list all the values. Does anybody have any ideas on how to achieve this?

I did something similar for the Search Result web part by added a button and some javascript to the display template which updated the default number of items -

 document.getElementById("viewAllButton").onclick = function () { ctx.DataProvider.set_resultsPerPage(500); ctx.DataProvider.issueQuery(); };

Was hoping use a similar approach but can find the property that sets the refinement row count.

Improve this question

1 Answer 1

Reset to default
0

I wasn't able to update the property. As a work around I set the Max number of refinement items to 1000. Then, used CSS to hide the refinement items by default and added some JavaScript to the display template to show the first 4 refinement items and append a show more/less button there were more than 4 refinement items. 

$(".ms-ref-unsel-shortList").each(function () { $(this).find(".Value:lt(4)").show(); if ($(this).find(".Value").length > 4) { $(this).append("<div class='show-more-refiner-button more'>Show More</div>"); } }); $('.show-more-refiner-button').click(function () { if ($(this).hasClass("more")) { $(this).prevAll(".Value").show(); $(this).text("Show Less").addClass("less").removeClass("more"); } else if ($(this).hasClass("less")) { $(this).prevAll(".Value").hide(); $(this).parent().find(".Value:lt(4)").show(); $(this).text("Show More").addClass("more").removeClass("less"); } });
Improve this answer